0 0 0 7 - 优化传送门

不二如是 · 发表于 2017-1-9 08:36:39

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

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

x

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

在0006，我们基于本地最佳默认字体，修改了区块中的字体。

这次，我们来优化下”传送门“！

加上点很有情怀的框框！

突然想起一句名言：

所谓的自由，必须要有限制

哈哈，不扯远哈～

最近，圆角矩形是网页开发的必备佳品！

而圆角矩形的精髓就是：

在周边加上1px的细细白色边框，然后设置非常小的3px圆角值。

由于超链接，默认是紫色的字体，很不和谐，就不设置成0004中的粉色了。

用贴近，海浪的Cyan，#33FFFF，0004里面有颜色大全哈

～

添加代码如下：

a{
color: #33FFFF;
border:1px solid #33FFFF;
border-radius: 3px
}

复制代码

color属性，设置字体颜色，其实在CSS中，颜色代码#rrggbb，可以简写为#rgb，即#33FFFF，#3FF

border属性，设置边框1px，实现，湖蓝

border-radius属性，设置圆角边框。

看一下效果：

哇塞，总觉得哪里不对劲！

边框！

外框离字体太近了，没有距离美！

另外，超链接自带的一条线，摆在那里太傻了！

我们需要给他改成一个可爱性感的按钮。

添加代码如下：

a{
font-size: 55px;
background: #33FFFF;
color: #FFF;
border:1px solid #33FFFF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}

复制代码

padding属性，上下两侧10px，左右两侧，66px

text-decoration属性，none就是去掉链接下划线。

由于，之前字体为了打广告，设计的大了些，所以圆角矩形，也放大些

看一下效果：

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

）

官方 Web 课程：

wangguohui · 发表于 2017-6-22 16:58:06

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>
我的第一个HTML5页面
</title>
<style type="text/css">
html{
height: 100%;
color: #FF0088
}
body{
background: url(314e251f95cad1c862803b2e7d3e6709c93d5184.jpg) center center;
background-size: cover;
font-size: 33px;
font-family: sans-serif;
}
#container{
width: 100%;
text-align:center;
position: absolute;
top: 50%;
text-transform: translateY(-50%);
}
a{
color: #FFFFFF;
border: 1px solid #33FFFF;
border-radius: 10px;
font-size: 55px;
background: #33FFFF;
text-transform: none;
padding: 10px 66px;
}
</style>
</head>
<body>
<div id="container">
<h1>这是标题</h1>
<p>编程改变世界</p>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539&page=5" title="鱼C论坛">传送门</a>
</div>
</body>
</html>

复制代码

joker11111 · 发表于 2017-2-9 19:36:07

交作业交作业！！！！

不二如是 · 发表于 2017-2-9 21:52:47

joker11111 发表于 2017-2-9 19:36
交作业交作业！！！！

joker，一如既往的棒！

后面的CSS页面，顺便帮我查漏补缺

dreamdnj · 发表于 2017-2-17 11:18:26

边框填充颜色怎么弄的啊

不二如是 · 发表于 2017-2-17 12:49:42

dreamdnj 发表于 2017-2-17 11:18
边框填充颜色怎么弄的啊

border:1px solid #33FFFF;

金哥专用 · 发表于 2017-3-2 11:20:33

我的边框也没有填充色。跟教程上面不一样。

不二如是 · 发表于 2017-3-2 11:29:29

金哥专用发表于 2017-3-2 11:20
我的边框也没有填充色。跟教程上面不一样。

在web，发帖，将代码附上

longwutian004 · 发表于 2017-3-2 17:46:44

继续学习！！！！

345127857 · 发表于 2017-3-7 13:50:23

交作业

lyzklkl · 发表于 2017-3-31 14:57:06

按时交作业～

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到html的世界</title>
<style type="text/css">
html,body{
height: 100%;
color:#fff;
font-family: sans-serif;
}
body{
background: url(背景图片.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
h1{
font-size: 78px;
margin-bottom: -15px;
}
#z{
margin-bottom: 20px;
}
a{
font-size: 30px;
background-color: #000;
opacity: 0.4;
color: #fff;
border: 1px solid:#000;
border-radius: 4px;
padding:8px 16px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>bbs.fishC.com - 是你在改变我，谢谢你</p>
<p id="z">---------[url=home.php?mod=space&uid=378930]@不二如是[/url] 的学生 lyzklkl---------</p><br>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

复制代码

lyzklkl · 发表于 2017-3-31 15:05:23

请问一下下啊，这个怎么检查IE的兼容性

不二如是 · 发表于 2017-3-31 17:28:24

lyzklkl 发表于 2017-3-31 15:05
请问一下下啊，这个怎么检查IE的兼容性

自行百度吧。。。度娘说的比我好

shishunfu · 发表于 2017-4-18 09:06:07

交作业

<html lang="en">
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>center</title>
<style type="text/css">
html,body{
height: 100%;
width: 100%;
color: red;
font-family: sans-serif, serif,cursive,fantasy,monospace;
}
body{
background: url("background.jpg") center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: inherit;
text-align: center;
position: absolute;
top:50%;
transform:translateY(-50%);
}
h1{
font-size: 33px;
margin-bottom: 22px;
}
p{
font-size: 18px;
margin-bottom: 22px;
}
a{
font-size: 22px;
color: white;
border:1px solid aqua;
background-color: aqua;
padding: 10px 22px;
border-radius: 5px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>让编程改变世界!<br/>Change the world by program!</p>
<a href="http://www.fishc.com/">传送门</a>
<a id="controller" href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</div>
</body>
</html>

复制代码

不二如是 · 发表于 2017-4-18 09:14:27

shishunfu 发表于 2017-4-18 09:06
交作业

加油！

MSK · 发表于 2017-7-5 16:14:49

交！作！业！哈哈

<!doctype html>
<html>
<head>
<title>可爱性感的超链接</title>
<meta charset='utf-8'>
<style type='text/css'>
html{
height:100%;
}
body{
background: url(http://img2.imgtn.bdimg.com/it/u=330117910,1717224124&fm=26&gp=0.jpg) center center;
background-size:cover;
text-align: center;
margin:0;
padding:0;
color:red;
position:relative;
top:50%;
}
#link{
width:100%;
position:absolute;
transform: translateY(-50%)
}
h1{
font-family: 宋体;
font-size:80px;
margin-bottom:5px;
}
p{
margin-bottom:60px;
color:orange;
font-size:20px;
}
a{
color:#FFF;
border:1px solid aqua;
border-radius:10px;
padding:10px 66px;
text-decoration: none;
font-size:16px;
background:cyan;
}
</style>
</head>
<body>
<div id='link'>
<h1>我爱鱼C</h1>
<p>让编程改变世界</p>
<a href='http://www.fishc.com'>传送门</a>
</div>
</body>
</html>

复制代码

aswyamato1989 · 发表于 2017-7-5 22:20:42

作业：

不二如是 · 发表于 2017-7-5 22:23:36

aswyamato1989 发表于 2017-7-5 22:20
作业：

会玩～

aswyamato1989 · 发表于 2017-7-5 22:30:36

不二如是发表于 2017-7-5 09:23
会玩～

跟着楼主好好学学web知识，希望在秋招中能找到一份junior web developer的工作。

不二如是 · 发表于 2017-7-5 22:45:07

aswyamato1989 发表于 2017-7-5 22:30
跟着楼主好好学学web知识，希望在秋招中能找到一份junior web developer的工作。

加油～

没事可以做做这个：
那些年我做过Web（H5+C3+Js）‘有趣’的面试题 |【索引帖】

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

[庖丁解牛] 0 0 0 7 - 优化传送门

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

评分

本帖被以下淘专辑推荐:

点评

点评

评分