0 0 2 5 - 图片边框 - 这就是高B格的H5+C3！

不二如是 · 发表于 2017-1-16 21:36:27

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:18 编辑

还记得在04中，我们懵懂无知的就这么把第一次。。。

哈哈，表想歪，是第一次调用本地图片！（如果你想歪了，证明你是老司机，给你看个东西，传送门）

在16中，我们在figuer中，也调用了一下下。

这次，我们利用边框样式，为鱼C，Logo，提神下B格！

在此之前，重温下，两种调图方式

----------------第一种----------------

代码如下：

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <style type="text/css">
                html,body{
                        height: 100%;
                }
                body{
                        background: url(FishC.png)center center;
                        background-repeat:no-repeat        
                }
        </style>
</head>
<body>
</body>

效果图，纯粹版的：

简单解释下background-repeat:no-repeat

如果不设置下的话，就会满屏都是Logo，效果立刻很恶心。。。

是不是一下就把咱们鱼C高贵的气质，拉下来了！

这样怎么对得起小甲鱼老湿的信任呢～

----------------第二种----------------

现在，用<img>在实现下上面的效果。

有言在先，有几点注意的，之前没说。

请注意：

img 元素向网页中嵌入一幅图像，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。

<img> 标签创建的是被引用图像的占位空间。

<img> 标签有个必需的属性：src 属性

你可以这么理解，src‘调取’本地图片。

另一个， alt 属性，就是添加图片名而已，可你自己了。

上代码：

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <style type="text/css">
                html,body{
                        height: 100%;
                        text-align: center;
                }

        </style>
</head>
<body>
        <img src="FishC.png">
</body>

看一下效果，其实没啥太大变化：

好了，复习深化结束！

可以正式设计边框样式了。

矩形边框

border

边框宽度

点/线

颜色

<!doctype html>
<html>
<head>
        <meta charset="utf-8">
        <style type="text/css">
                html,body{
                        height: 100%;
                        text-align: center;
                }
                img{
                        border: 6px dotted #6F6;

                }
        </style>
</head>
<body>
        <img src="FishC.png">
</body>

solid（实心的）

        img{
                        border: 6px solid #6F6;

                }

%

        img{
                        border: 6px solid #6F6;
                        border-radius: 6%;

                }

祥和

圆形边框

半径！

img{
                        border: 6px solid #6F6;
                        border-radius: 51%;

                }

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

shishunfu · 发表于 2017-4-21 15:50:21

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Css边框</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        text-align: center;
                        background-color: beige;
                }
                img{  
/*border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
border-width
border-style
border-color
如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
*/
                        margin-top: 100px;
                        border: 6px solid #a5bef9;
                        border-radius: 6%;                /*当border-radius的值，大于等于50%时，就是圆形了*/
                }
        </style>
</head>
<body>
        <img src="FishC.jpg">
</body>
</html>

MSK · 发表于 2017-7-15 13:37:43

本帖最后由 MSK 于 2017-7-15 13:42 编辑

交作业~

我与戈多 · 发表于 2017-1-17 10:03:32

小甲鱼要改行做设计了？

不二如是 · 发表于 2017-1-17 10:46:21

我与戈多发表于 2017-1-17 10:03
小甲鱼要改行做设计了？

小甲鱼老湿，业余爱好～

不二如是 · 发表于 2017-1-17 10:46:25

我与戈多发表于 2017-1-17 10:03
小甲鱼要改行做设计了？

小甲鱼老湿，业余爱好～

joker11111 · 发表于 2017-3-1 00:21:29

本帖最后由 joker11111 于 2017-3-1 00:22 编辑

我会告诉你找不到图片然后我把鱼C工作室微信公众号头像给扒拉下来吗？哈哈哈哈哈哈，逃。。。

不二如是 · 发表于 2017-3-1 08:40:38

joker11111 发表于 2017-3-1 00:21
我会告诉你找不到图片然后我把鱼C工作室微信公众号头像给扒拉下来吗？哈哈哈哈哈哈，逃。。。
...

哈哈哈，我能说聪明吗～

joker11111 · 发表于 2017-3-1 08:43:24

不二如是发表于 2017-3-1 08:40
哈哈哈，我能说聪明吗～

wei_Y · 发表于 2017-3-27 19:21:32

一刷至此。

晓月56 · 发表于 2017-6-30 00:09:17

轻踩油门，注意速度，保持直线。

0025-图片引用和边框样式

从网页上截图，然后修改的，

aswyamato1989 · 发表于 2017-7-15 02:32:16

交作业！

MSK · 发表于 2017-7-15 13:36:22

原来鱼Clogo是这么搞的啊

rock5442107 · 发表于 2018-6-6 21:26:26

<!doctype html>
<html>
<head>
         <meta charset="utf-8">
        <title>025-圖片</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        text-align: center;
                }
        img{
                border:10px dotted #FF0000;
                border-radius:51%;
        }
        </style>
</head>
<body>
        <img src="FishC.png" width="250px" height="250px">
</body>
</html>

STmove · 发表于 2018-7-16 18:26:25

呃，我这个可能不是原图？

<!doctype html>
<html>
<meta charset="utf-8">
<head>
        <title>WEB lesson 0025</title>
        <style type="text/css">
                html,body
                {
                        height:100%;
                        text-align:center;
                }
                img
                {
                        border:6px solid #78e;
                        border-radius: 50%;
                }
        </style>
</head>        

<body>
        <img src="fishC.png">
</body>
</html>

新手·ing · 发表于 2018-8-9 21:37:08

logo就够绿的了。。

charles_2268 · 发表于 2018-8-9 23:03:54

视频更新的慢，还是看你这个来的快

soulwyb · 发表于 2018-10-17 23:39:33

本帖最后由 soulwyb 于 2018-10-17 23:41 编辑

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        html,
        body {
            height: 100%;
            text-align: center;
        }
        
        img {
            /* border: 6px dotted #6f6; */
            border: 6px solid #6f6;
            /* border-radius: 6%; */
            border-radius: 50%;
        }
        /* body {
            background: url(./timg.jpg) center center;
            background-repeat: no-repeat;
        } */
    </style>
</head>

<body>
    <img src="./timg.jpg">
</body>

</html>

登录/注册后可看大图

QiaoaiMen · 发表于 2018-11-16 14:41:09

继续交作业，交完作业该去写学校的作业了，天天向上。

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>025_2</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        text-align: center;
                }
                img{
                        border: 6px solid #0F8;
                        border-radius: 50%;
                }
        </style>
</head>
<body>
        <img src="xiaowu2.jpg" alt="此处是小乌">
</body>
</html>

542624047 · 发表于 2019-1-16 17:10:54

本帖最后由 542624047 于 2019-1-16 17:12 编辑

好多绿色，为啥大佬交作业都不改个色号

紫色#FF00FF也不错啊~

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 2 5 - 图片边框 - 这就是高B格的H5+C3！

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分

点评

评分