HTML5 教程学习 - HTML5+CSS3 实战(14) 特色文章及主要内容 - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

HTML5 教程学习 - HTML5+CSS3 实战(14) 特色文章及主要内容

Blog - 代码 Monday, 01 February 2010 16:02

我想起一句话，叫作“天有不测风云”什么的；记得是很小的时候，寒假之前结业会结束之后，学校给每个学生发了一封信；那时使用的还是人力印刷，那种油墨味道很重的印刷机，用滚轮刷啊刷的；那样印出来的东西拿到手里总是先去闻一闻上面的味道，有时会蹭的手上鼻子上都是未干的油迹。那天发的信上面第一句就是“天有不测风云”，后来明白事了就搞不大懂为什么学校要给即将放寒假的孩子们发这样的东东，其实到现在也没懂。当天拿着这信一边在路上走着一边读着，觉得那种天色啊，云的颜色啊，树枝的样子啊，有种特别清净肃杀的感觉；前两天玩Half Life 2的时候发现水障碍区那些关卡简直和小时候记忆里的样子没有差别，我几乎已经忘记游戏，而沉浸在那种感觉里了。

慢慢觉得自己之所以喜欢做自己的网站，每天折腾这些东东，从文档到到原型到设计到代码到各种乱七八糟见鬼的CMS，终归都是因为这些几乎可以自己掌握一切，而不用看谁的脸色，不用顾及什么，不用担心什么，不用唯唯诺诺，不用圆滑不用周全，不用担心什么叫做天有不测风云...虽然哪也不挨哪，但我爱用CSS3我就用，我爱用HTML5我就用，我觉得JS世上最恶心我就不用，别说IE6，我连IE7都不支持，懒的设计了就做个白底黑字跟挽联一样的你爱看就看不爱看就滚蛋；别来跟我扯可用性可访问性用户体验亲和力回访率关键词SEOUFO...我自己的东西，我喜欢怎样，我就怎样。兴许我唯一能做主的，就是这摊子烂事了。

突然没心情了哎；继续之前的HTML5+CSS3实战吧，前面一篇中呢，我们搞定了页面头部的样式；今天来看看特色文章和主要内容部分(Featured block and Body)。先回顾一下最初的页面设计图吧。

首先是特色文章的：

html5-aside-featured-block

然后是主体内容的：

html5-css3-body-block-viiiix

HTML部分可以参见“HTML5 教程学习 - HTML5+CSS3 实战(6) ‘特色文章’”和“HTML5 教程学习 - HTML5+CSS3 实战(7) 主体内容”，样式代码在下面：

/*
	Featured
*****************/
#featured {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
#featured figure {
	border: 2px solid #eee;
	float: right;
	margin: 0.786em 2em 0 5em;
	width: 248px;
}
#featured figure img {display: block; float: right;}
 
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
 
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
 
/*
	Body
*****************/
#content {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px 20px;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}