欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

11-页面布局网站首页设计实例终极版(仿csdn首页)_html/css_WEB-ITnose

程序员文章站 2022-04-15 09:54:13
...
1. firstPage.html文件:

	
			标准的页面布局首页		


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

2. style.css:布局文件

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.网站涉及图片: