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！

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

评分

本帖被以下淘专辑推荐:

点评

点评

点评

评分

点评

评分

浏览过的版块