在006,我们基于本地最佳默认字体,修改了区块中的字体。
这次,我们来优化下“传送门”
加上很有情怀的框框!
突然想起一句名言:
所谓的自由,必须要有限制
哈哈,不扯远哈~
最近,圆角矩形是网页开发的必备佳品!
而圆角矩形的精髓就是:
在周边加上1px的细细白色边框,然后设置非常小的3px圆角值。
由于超链接,默认是紫色的字体,很不和谐,就不设置成004中的粉色了。
用贴近,海浪的Cyan,#33FFFF,004里面有颜色大全哈 ~
添加代码如下:
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就是去掉链接下划线。
由于,之前字体为了打广告,设计的大了些,所以圆角矩形也放大些 。
最后噔噔噔噔——
鱼油们,如果喜欢本系列HTML的帖子,可以到论坛订阅 ☞ HTML5 - 庖丁解牛 此专辑哦~~
文章为用户上传,仅供非商业浏览。发布者:Lomu,转转请注明出处: https://www.daogebangong.com/articles/detail/HTML5%20%200%200%207%20%20Optimized%20Portal.html
评论列表(196条)
测试