0 0 0 7 - 优化传送门,Web密训营,Web开发,鱼C论坛

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

0 0 0 7 - 优化传送门

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

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

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

加上点很有情怀的框框！

突然想起一句名言：

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

哈哈，不扯远哈～

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

而圆角矩形的精髓就是：

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

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

用贴近，海浪的Cyan，#33FFFF，0004里面有颜色大全哈{:10_336:} ～

添加代码如下：
a{
color: #33FFFF;
border:1px solid #33FFFF;
border-radius: 3px
}

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

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

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

看一下效果：

哇塞，总觉得哪里不对劲！{:10_266:}

边框！

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

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

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

添加代码如下：
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就是去掉链接下划线。

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

看一下效果：

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

官方 Web 课程：

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

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页面，顺便帮我查漏补缺{:10_278:}

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">---------@不二如是的学生 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）‘有趣’的面试题 |【索引帖】

页: [1] 2 3

鱼C论坛's Archiver

0 0 0 7 - 优化传送门