TA的每日心情 | 开心 2021-3-12 23:18 |
---|
签到天数: 2 天 [LV.1]初来乍到
|
好了,“HTML5+CSS3实战”系列的最后一篇;本是Smashing Magazine上面的一整篇教程。HTML5方面的东西慢慢关注下来发现,国外站点上一些公认不错的教程范例,每一篇几乎都有着不同的路子,比如对新标签的理解,使用的策略等等;想来也不奇怪,W3C的HTML5规范本身还处于草案阶段的样子;
不多说了,可以参考" HTML5+CSS3 实战(9) 页脚”一文来回顾下之前页脚部分的设计样式和HTML。接下来我们来看看样式;将下面的代码添 加到main.css中:
/*
About
*****************/
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
/*
Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}
[/code]
没什么新鲜东东,属于大众码,border-radius在之前也有过介绍了。
作者专门写了几行调整IE6下样式的代码,恕我不拿过来了;IE6的不要。这是一种态度。
我们来看看最 终的成品页面吧。突然就结束了,我失落了。默。
|
|