18.css

一些css样式表的例子供大家学习和参考。

body{
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#cad7df url(bg.jpg) repeat-x;
	/* 背景色、水平重复的背景图片 */
}
#container{
	width:758px;
}
div br{
	display:none;
}
#globallink{
	width:758px; height:62px;
	margin:0px 0px 1px 0px;
	background:url(logo.jpg) no-repeat;	/* 添加banner图片 */
}
#globallink ul{
	list-style:none;
	position:absolute;
	left:540px; top:4px;				/* 调整菜单文字的位置 */
	padding:0px; margin:0px;
}
#globallink li{
	float:left; 
	text-align:center;
	padding:0px 10px 0px 18px;
	margin:0px;
}
#globallink a:link, #globallink a:visited{
	color:#4a6f87;
	text-decoration:none;
}
#globallink a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}

#left{
	width:158px;
	float:left;
}
#navigation{
	width:158px;
	padding:0px;
	margin:0px 0px 10px 0px;
}
#navigation ul{
	margin:0px;
	padding:0px;
	border-top:5px solid  #cad7df;		/* 顶端粗线 */
}
#navigation li{
	border-bottom:1px solid #cad7df;	/* 添加下划线 */
	
}
#navigation li a{
	display:block;						/* 区块显示 */
	padding:3px 5px 3px 2em;
	text-decoration:none;
	background:url(icon1.gif) no-repeat 13px 9px;
}
#navigation li a:link, #navigation li a:visited{
	background-color:#7591a3;
	color:#FFFFFF;
}
#navigation li a:hover{					/* 鼠标经过时 */
	color:#003e66;						/* 改变文字颜色 */
	background:#aacbe0 url(icon2.gif) no-repeat 13px 9px;
}
#search form, #search p{
	margin:0px;
	padding:0px;
	text-align:center;
}
#search input.text{
	border:1px solid #7591a3;
	background:transparent;
	width:80px; font-size:12px;
	font-family:Arial;
}
#search input.btn{
	border:1px solid #7591a3;
	background:transparent;
	font-size:12px; height:19px;
	font-family:Arial;
	padding:0px;
}

#main{
	width:600px; float:left;
	margin:0px; padding:0px;
	background-color:#FFFFFF;
}
#hottest h3{
	font-size:16px;
	padding:28px 5px 4px 40px;
	margin:0px;
	background:url(icon3.gif) no-repeat 29px 34px;
}
#hottest h3 a:link, #hottest h3 a:visited{
	color:#000000;
	text-decoration:none;
}
#hottest h3 a:hover{
	color:#7591a3;
	text-decoration:underline;
}

#list{
	float:left;
	margin:20px 0px 4px 0px;
	width:340px;
	padding:0px 0px 0px 28px;
}
#list h4{
	font-size:12px;
	background:#e0e7ec url(icon4.gif) no-repeat 7px 8px;
	padding:3px 0px 2px 17px;
	margin:0px;
}
#list p.date{
	margin:0px; padding:5px 0px 5px 2px;
	font-weight:bold;
	color:#014e68;
}
#list ul{
	margin:0px 0px 6px 40px;
	padding:0px;
	list-style-type:disc;
}
#list ul li a:link, #list ul li a:visited, #list p.more a:link, #list p.more a:visited{
	color:#333333;
	text-decoration:none;
}
#list ul li a:hover, #list p.more a:hover{
	color:#00a9e7;
	text-decoration:underline;
}
#list p.more{
	margin:0px; padding:5px 0px 20px 10px;
	background:url(icon5.gif) no-repeat 0px 10px;
}

#letter{
	float:left;
	width:180px;
	margin:20px 0px 5px 30px;
	padding:0px;
	border-left:1px solid #7591a3;
}
#letter h4{
	margin:0px;
	font-size:12px;
	background:url(right_right.gif) no-repeat;
	color:#FFFFFF;
	padding:2px 0px 2px 15px;
}
#letter p.date2{
	background:#e0e7ec url(icon6.gif) no-repeat 5px 7px;
	margin:7px 15px 3px 7px;
	padding:1px 0px 1px 15px;
	font-weight:bold;
}
#letter p.content2{
	margin:2px 15px 0px 7px;
	padding:1px 0px 1px 0px;
}
#letter p.more2{
	margin:1px 15px 3px 7px;
	padding:0px 0px 1px 8px;
	background:url(icon5.gif) no-repeat 2px 5px;
}
#letter p.more2 a:link, #letter p.more2 a:visited{
	color:#555555;
	text-decoration:none;
}
#letter p.more2 a:hover{
	color:#000000;
	text-decoration:underline;
}