0 0 2 5 - 图片边框 - 这就是高B格的H5+C3！,Web密训营,Web开发,鱼C论坛

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

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

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

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

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

在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>
看一下效果，其实没啥太大变化：

好了，复习深化结束！

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

[*]矩形边框

在CSS中设计边框，就是border！

有三个常用属性，边框宽度、点/线、颜色

直接在CSS格式中，实践下：点框、宽度为6px、颜色#6F6（鱼C主色）
<!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>
效果图：

只需要将dotted（虚点的）修改为solid（实心的）
img{
border: 6px solid #6F6;

}
效果图：

好方阿！

赶紧修改成最Fashion的圆角矩形，border-radius。

唯一要注意的是，这个属性值，要用%，多用几遍就知道什么时候用%了
img{
border: 6px solid #6F6;
border-radius: 6%;

}
效果图：

嗯，这才对嘛，整个世界都祥和了{:9_240:}

[*]圆形边框

radius啥意思？

半径！

So，当border-radius的值，大于等于50%时，就是圆形了。

就这么简单
img{
border: 6px solid #6F6;
border-radius: 51%;

}
效果图：

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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

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工作室微信公众号头像给扒拉下来吗？哈哈哈哈哈哈，逃。。。{:9_240:}

不二如是 发表于 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
哈哈哈，我能说聪明吗～

{:10_332:}

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

一刷至此。

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

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

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

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

交作业！

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

原来鱼Clogo是这么搞的啊{:10_257:}

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

视频更新的慢，还是看你这个来的快{:5_106:}

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>
https://fishc.com.cn/https://xxx.ilovefishc.com/album/201810/17/234100qstc2hgszi0ccebt.jpg

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 编辑

好多绿色，为啥大佬交作业都不改个色号{:10_245:}紫色#FF00FF也不错啊~

页: [1] 2

鱼C论坛's Archiver

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