<div+css页面布局课堂笔记>11-页面布局网站首页设计实例终极版（仿csdn首页）_html/css_WEB-ITnose

1. firstPage.html文件：

			
			
					
 								
				
									
								
					
联系我们
						
						
联系我们
						
						
联系我们
						
						
联系我们
						
						
联系我们
						
						
联系我们
						
						
联系我们
						
						
联系我们
					
			
			
				
			
				
					
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
										
						
										
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
				
				
					
精品课程
					
01 操作系统---北京大学					
					
02 操作系统---北京大学					
					
03 操作系统---北京大学					
					
04 操作系统---北京大学					
					
05 操作系统---北京大学					
					
06 操作系统---北京大学					
					
07 操作系统---北京大学					
					
08 操作系统---北京大学					
					
09 操作系统---北京大学					
					
10 操作系统---北京大学					
					
11 操作系统---北京大学					
					
12 操作系统---北京大学					
					
13 操作系统---北京大学					
								
				
					
				
								
								
					
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
										
						
										
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
											
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
										
						
										
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
				
								
					
活动在线
											
						
2016/3/29         上海
														
LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）
					
					
						
2016/3/29         上海
													
LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）
					
					
						
2016/3/29         上海
													
LinkSprite全球硬创马拉松CSDN
					
					
						
2016/3/29         上海
													
LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）
					
					
						
2016/3/29         上海
													
LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）
					
					
						
2016/3/29         上海
													
LinkSprite全球硬创马拉松CSDN专场（基于开源硬件）
					
				
				
					
				
								
								
					
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
										
						
										
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
										
						
										
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
				
				
					
行业热点
					
01 JetBrains全套工具包，超值超乎你想象！					
					
02 JetBrains全套工具包，超值超乎你想象！					
					
03 JetBrains全套工具包，超值超乎你想象！					
					
04 JetBrains全套工具包，超值超乎你想象！					
					
05 JetBrains全套工具包，超值超乎你想象！					
					
06 JetBrains全套工具包，超值超乎你想象！					
					
07 JetBrains全套工具包，超值超乎你想象！					
					
08 JetBrains全套工具包，超值超乎你想象！					
					
09 JetBrains全套工具包，超值超乎你想象！					
					
10 JetBrains全套工具包，超值超乎你想象！					
				
				
					
				
								
				
								
					
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
										
						
										
						
极客头条						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
					
					
						
滚动						
						
01 再别康桥---徐志摩						
						
02 再别康桥---徐志摩						
						
03 再别康桥---徐志摩						
						
04 再别康桥---徐志摩						
						
05 再别康桥---徐志摩						
						
06 再别康桥---徐志摩						
						
07 再别康桥---徐志摩						
						
08 再别康桥---徐志摩						
						
09 再别康桥---徐志摩						
						
10 再别康桥---徐志摩						
						
11 再别康桥---徐志摩						
						
12 再别康桥---徐志摩						
					
				
				
					
下载专辑
					
01 Android项目源码用例					
					
02 Android项目源码用例					
					
03 Android项目源码用例					
					
04 Android项目源码用例					
					
05 Android项目源码用例					
					
06 Android项目源码用例					
					
07 Android项目源码用例					
					
08 Android项目源码用例					
					
09 Android项目源码用例					
					
10 Android项目源码用例					
					
11 Android项目源码用例					
					
12 Android项目源码用例					
					
13 Android项目源码用例					
									
			
			
				
			
				
核心技术类目				
				
				
					
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
												
Android
											
IOS
						
Hadoop
						
AWS
									
移动游戏
												
Java
											
			
					
	

body {	margin:0;	padding:0;	text-align:center;}.space {	width:650px;	height:10px;	overflow:hidden;}#container {	width:900px;	margin:0 auto;}#header {	width:900px;	height:150px;}.dot {	padding-left:6px;	margin:auto;	font-size:13.3px;	font-weight:bold;	color:#6D22DD;}.style_li {	width:100px;	height:18px;	float:left;	margin:17.5px auto;}.gap {	width:2px;	height:20px;	background:#000;	margin:15px 0;	float:left;	overflow:hidden;}.date_loc {	width:100%;	float:left;	text-align:left;	padding-top:15px;}.con_sidebar {	width:100%;	float:left;	text-align:left;	padding-top:15px;	margin-bottom:13px;}.one_sidebar {	float:left;	width:100%;	height:21px;	text-align:left;	margin:3.9px 0;	border-bottom:1px dotted lightgray;}.three_sidebar {	width:100%;	height:48px;	text-align:left;	margin:10px 0;	border-bottom:1px dotted lightgray;}.four_sidebar {	float:left;	width:100%;	height:21px;	text-align:left;	margin:3.9px 0;	border-bottom:1px dotted lightgray;}.bottom_tit {	width:100%;	height:15px;	text-align:left;	padding:5px;	float:left;	margin-bottom:5px;	//border-bottom:1px solid;}.bottom_gap {	width:100%;	float:left;	border-bottom:1px solid gray;}.bottom_li {	//width:20px;	height:15px;	float:left;	margin:3px 11px;	}#content {	width:900px;}.ad {	float:left;}.main {	width:650px;	float:left;	border-right:1px solid lightgray;}.main_left {	width:250px;	height:200px;	float:left;	//border:1px dotted;}.main_right {	width:390px;	height:200px;	//border:1px dotted;	float:right;}.tit {	width:97%;	height:30px;	text-align:left;	margin-bottom:2px;	border-bottom:2px solid;}.con {	float:left;	width:48.5%;	height:21px;	text-align:left;	border-bottom:1px dotted lightgray;	margin:3.9px 0;}.con_1 {	width:97%;}.sidebar {	width:240px;	//border:1px dotted black;	float:right;}.activity_1 {	width:100%;	float:left;	border-bottom:1px dotted lightgray;}.activity_2 {	width:100%;	float:left;	background:lightgreen;	border-bottom:1px dotted lightgray;}.sidebar_1 {	height:412px;	float:right;}.sidebar_2 {	height:624px;	float:right;}#logo {	width:230px;	height:100px;	float:left;}#bar {	width:660px;	height:100px;	float:left;	margin-left:10px;}#nav {	width:900px;	height:50px;	background:#f0f8ff;	float:left;	margin-top:10px;	}#bottomer {	width:900px;	height:150px;	background:#f0f8ff;}

3.content.css:具体内容样式文件：

img {	padding:0;	margin:0;	border:0;}ul {	padding:0;	margin:0;	border:0;	font-size:15px;	list-style:none;}#nav ul li a {	text-decoration:none; //去除超链接a的下划线	color:#0a0;}.tit a {	padding-left:6px;	color:#ea0000;	font-family:"华文仿宋";	font-size:20px;	font-weight:bold;	text-decoration:none;	line-height:30px;}.con a {	color:#0a0;	font-family:KaiTi;	text-decoration:none;}.logo_img {	float:left;	margin:4.5px auto;}.one_sidebar a {	color:#0aa;	font-size:13px;	text-decoration:none;}.three_sidebar a {	color:#0aa;	font-size:13.6px;	text-decoration:none;}.con_sidebar a {	color:#0aa;	text-decoration:none;}.four_sidebar a {	color:#0aa;	font-size:13.3px;	text-decoration:none;}.bottom_tit a {	font-family:"华文仿宋";	font-weight:bold;	color:black;	text-decoration:none;}.bottom_li a {	color:#a0a;	text-decoration:none;}

4.网站涉及图片：