一起来学习《响应式Web设计-HTML5和CSS3实战》吧

《响应式Web设计-HTML5和CSS3实战》是一本不错的前台设计书。书里主要以一个页面入手，涵盖了HTML5和CSS3的所有知识。

下午我根据http://www.andthewinnerisnt.com 这个网页上的资源下载下来了所需的一些图片，然后构建了主页index.html。这里放上代码，这是本人写的HTML4+CSS2.1的东西。这里分享给大家。大家可以根据上面给的网站自己去下载图片资源，然后使用我写的这个。这样就可以很快进入第三章的学习了。先不说代码，先上图！

首先是页面index.html

	
	
	
	


	

		
		

			

				AND THE WINNER ISN'T...
			
			

				

					
WHY?
					
SYNOPSIS
					
STILLS/PHOTOS
					
VIDEOS/CLIPS
					
QUOTES
					
QUIZ
				
			
		
		
		

			
			

				UNSUNG HEROES...

				
				
				

				OVERHYPED
NONSENSE...

				
				
				

			
			
			

				
				

				
EVERY YEAR
				
WHEN I WATCH THE OSCARS I'M ANNOYED...
				that films like King Kong.Moulin Rouge and Munich get the statue whilst the real cinernatic heroes lose out.Not very Hollywood is it?

					We're here to put things right.
				
				

				these should have won >>
				
			
		
		
		
		

			
NOTE:OUR OPINION IS ABSOLTELY CORRECT.YOU ARE WRONG,EVEN IF YOU THINK YOU ARE RIGHT.THAT'S A FACT.DEAL WITH IT.
			

		
	

这里用了2个css，其中那个reset是这本书推荐的一个css重置样式

另一个css是我写的，这里给出style.css

#wrapper{
	margin-right:auto;
	margin-left:auto;
	width:960px;
}

#header{
	margin-right:10px;
	margin-left:10px;
	width:940px;
	height:200px;
	background-color:white;
	background-image:url(image/buntingFW.png);
	background-repeat:repeat-x;
}

#headline{
	height:140px;
	font-size:48px;
	font-family:Arial;
}
#headline span{
	position:relative;
	top:70px;
	left:10px;
}
#special_hint{
	color:#aeaeae;
}
#navigation{
	background-color:white;
	background-image:url(image/atwiNavBg.png);
	background-repeat:repeat-x;
	height:30px;
}
#navigation ul{
	margin:0px;
	padding:0px;
}
#navigation ul li{
	display:inline-block;
}
#navigation ul li a{
	text-decoration:none;
	font-size:25px;
	font-family:Arial;
	font-weight:bold;
	color:black;
	margin-left:10px;
	margin-right:10px;
}

#main{
	border-top: dashed 1px #B67F7F;
	border-bottom: dashed 1px #B67F7F;
	background-color:white;
	background-image:url(image/sidebarBg.png);
	background-repeat:repeat-x;
	padding-top:40px;
	height:550px;
}

#siderbar{
	margin-right:10px;
	margin-left:10px;
	padding-left:5px;
	padding-right:5px;
	border-right:solid 3px #eaeaea;
	width:180px;
	float:left;
}

#siderbar span{
	font-size:20px;
	font-family:Arial;
	font-weight:bold;
	color:black;
	clear:both;
}

#siderbar img{
	width:43%;
	float:left;
	padding:10px 5px 10px 5px;
}

#content{
	margin-right:10px;
	float:right;
	margin-left:10px;
	width:700px;
	font-family:Arial;
}
#content img{
	float:left;
	width:200px;
}
#text{
	float:right;
	width:480px;
}
#text h1{
	font-size:70px;
	margin:0px;
	padding:0px;
}
#text h2{
	margin:0px;
	padding:0px;
	font-size:40px;
	color:#7F7F7F;
}
#text span{
	color:#7F7F7F;
	font-size:18px;
	line-height:30px;
	height:30px;
}
#footer{
	display:block;
	margin-right:10px;
	margin-left:10px;
	clear:both;
	width:940px;
	height:150px;
}
#notation{
	height:80px;
	text-align:center;
	padding-top:20px;
	font-size:15px;
	color:brown;
}
#footimg{
	background-image:url(image/buntingFWinvert.png);
	background-repeat:repeat-x;
	height:40px;
}

最后希望大家学习愉快。