:HTML5 | 0 0 7 - 优化传送门-图片素材模板推荐免费ppt模版下载-道格办公

HTML5 | 0 0 7 - 优化传送门

责任。 要优化传送门的样式,我们可以使用HTML5的标签和CSS样式来实现。首先,我们需要创建一个传送门的容器,并为其添加一个框框的样式。可以使用`

`标签来创建容器,并为其添加一个唯一的`id`属性,以便我们可以在CSS中针对该容器进行样式设置。 在HTML文件中添加以下代码: ```html
``` 接下来,我们需要在CSS文件中添加样式来优化传送门的外观。可以使用`border`属性为传送门添加边框

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

(810)
打赏 支付宝扫一扫 支付宝扫一扫
single-end

相关推荐