代码啊
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.news_main{
width: 998px;
//height: 350px;/*与下面同理 父盒子高度固定将会影响子盒子撑开*/
min-height: 350px;
_height: 350px;
border-radius: 5px;
margin: 0 auto;
background-color: #fff;
}
.new_left{
width: 220px;
height: 350px;
border: 1px solid #e8e8e8;
float: left;
border-radius: 3px;
}
.new_left h2{
height: 35px;
line-height: 35px;
font-family: "微软雅黑";
font-size: 13px;
color: #666;
background-image: url("../img/title_bg.gif");
padding-left: 22px;/*使标题内容与盒子左边框有一定距离*/
border-bottom: 1px solid #e8e8e8;
}
.new_left .left_content ul li{
height: 30px;
line-height: 30px;
padding-left: 7px;
}
.new_left .left_content ul li a{
color: #666;
background-image: url("../img/li_bg.gif");
background-repeat: no-repeat;
padding-left: 15px;
display: block;
background-position: left center;
}
.new_left .left_content ul li a:hover{
color: #009cdf;
background-image: url("../img/li_bg2.gif");
background-color: #f2f2f2;
}
.new_right{
width: 770px;
//height: 350px;/*高度不能固定 否则页面内容过多会溢出*/
min-height: 350px;/*最少高度 350px 随着内容增加 高度自动增加 在IE6中不支持*/
_height: 350px;/* CSS hack 解决上述IE6问题 这种写法只有IE6能够识别*/
border: 1px solid #e8e8e8;
float: right;
border-radius: 3px;
background-color: #fff;
}
footer{
clear: both;/*清除浮动 因为盒子 new_right 已经浮动 当高度改变时 将会影响 footer 盒子的布局*/
}
.new_right h2{
height: 35px;
line-height: 35px;
font-family: "微软雅黑";
font-size: 13px;
color: #666;
background-image: url("../img/title_bg.gif");
padding-left: 22px;/*使标题内容与盒子左边框有一定距离*/
border-bottom: 1px solid #e8e8e8;
}
.new_right ul{
padding-left: 7px;
}
.new_right ul li{
height: 25px;
line-height: 25px;
border-bottom: 1px solid #e8e8e8;
background-image: url("../img/list.jpg");/*用背景设置项目符号*/
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
color: #666;
}
.page_number{
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.page_number a{
display: inline-block;
border: 1px solid #e8e8e8;
padding: 5px 10px;
border-radius: 8px;
}
.page_number a:hover{
color: #fff;
background-color: #cc1b1b;
}
</style>
</head>
<body>
<!--在此制作页码的基本结构-->
<div class="news_main">
<div class="new_left">
<h2>新闻中心</h2>
<div class="left_content">
<ul>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">媒体报道</a></li>
<li><a href="#">活动专题</a></li>
<li><a href="#">精彩视频</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">公司内刊</a></li>
</ul>
</div>
</div>
<div class="new_right">
<h2>新闻中心</h2>
<div class="right_list">
<ul>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-05-28</span><a href="#" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-05-28</span><a href="#" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-05-28</span><a href="#" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-05-28</span><a href="#" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-05-28</span><a href="#" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-06-01</span> <a href="#">【慕客访谈 用户篇】“有为屌丝”在路上</a></li>
<li><span>2014-06-01</span><a href="#">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a></li>
</ul>
</div>
<div class="page_number">
<a href="#">首页</a>
<a href="#"><</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">...</a>
<a href="#">></a>
<a href="#">末页</a>
</div>
</div>
</div>
</body>
</html>