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 - 优化传送门

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

评分

本帖被以下淘专辑推荐:

点评

点评

评分