首页 > 代码库 > css

css

2024-08-25 05:55:36   217人阅读

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>考试</title>
	<style type="text/css">
		/*清除内外间距*/
		*{margin: 0;padding: 0;}
		/*给body添加样式*/
		body{font-size: 13px;color: #ccc;}
		/*对a标签进行美化*/
		a:link,a:visited{
			text-decoration: none;
			color: #ccc;
		}
		a:hover{
			color: #f00;
		}
		/*去除ul小黑点*/
		ul li{
			list-style: none;
		}
		/*清除浮动*/
		.clear{
			clear: both;
		}
		
		.box{
			width: 350px;
			margin:0 auto;
		}
		.header{
			width: 350px;
			border-bottom: 3px solid #BE0000;
			margin-bottom: 5px;
			
		}
		.header h4{
			float: left;
			color: black;
			height: 16px;
			line-height: 16px;
			padding: 5px 0 0 20px;
		}
		.header div{
			padding-left:100px;
		}
		.header div a{
			float: left;
			display: block;
			height: 20px;
			line-height: 20px;
			border-right:1px solid #fff;
			padding:0 15px;
			color: #1F1F1F;
			background-color: #DCDCDC;
		}
		#red{
			background-color: #C2130E;

		}
	
		.content ul{
			
			margin-left: 8px;
			background: url(bg.gif) no-repeat left center;
		}
		.content ul li{
			
			padding-left: 24px;
			height: 26px;
			line-height: 26px;
			}
		.more1{
			text-align: right;
			padding-bottom: 50px;
		}
		
	</style>
</head>
<body>
	<div class="box">
		<div class="header">
			<h4>新闻排行</h4>

			<div>
				<a href="http://www.mamicode.com/#" id="red">国内</a>
				<a href="http://www.mamicode.com/#">国际</a>
				<a href="http://www.mamicode.com/#">社会</a>
				<a href="http://www.mamicode.com/#">网屏</a>
			</div>	
			<div class="clear"></div>
		</div>

		<div class="content">
			<ul>
				
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨滞涨相伴相伴的是房地产企业高歌猛进</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑滞涨相</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑滞涨相</a></li>
				<li><a href="http://www.mamicode.com/#">与房价滞涨相伴的是房地产企业高歌猛进的跑</a></li>
			</ul>
		</div>
		<div class="more1">...more</div>
	</div>
</body>
</html>

 

css


联系
我们