您的位置：首页 > Web前端 > CSS

web前端html+css常用布局05列表布局

2015-08-27 20:55 811 查看

web前端html+css常用布局05列表布局

注意：引入jquery的jquery-2.1.4.min.js包

图片从自己目录中路径。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

h3{
color: #666;
font-weight: 600;
font-size: 18px;
}
body{
background-color: #f4f4f4;
}
.myContents{
width: 1200px;
margin: 0 auto;
margin-bottom: 20px;
background-color: #fff;
}
.mylist {
width: 1180px;
height: 200px;
margin: 0 auto;
padding: 20px 30px 20px 30px;

}

.p1, .p2, .ptime {
font-family: "微软雅黑";
color: #999;
}
.p1, .p2 ,.ptime{
font-size: .875em;
}
.listLeft {
width: 260px;
height: 180px;
float: left;
margin-top: 10px;
}

.listLeft .listImage {
width: 260px;
height: 180px;
}

.listRight {
width: 860px;
height: 200px;
float: left;
margin-left: 20px
}

.myTitle {
margin-top: 0;
}

h3 {
float: left;
margin-top: 0px;
}

.p1 {
margin-top: 45px;
line-height: 200%;
/*左右对齐*/
text-align: justify;
max-height: 113px;
min-height: 113px
}

.p2 {
margin-top: 16px;
}

.p2 a {
/*去掉下划线*/
text-decoration: none;
color: #3587c6;

}

.ptime {
float: right;
}
.page-location{padding: 20px 0;font-size: 12px;color: #666;  margin-left: 30px}
.page-location a{display: inline;color: #3487c4}
.page-location span{color: #333}

.pagination{position: relative;height: 30px;padding-bottom: 40px;}
.pagination ul{position: absolute;right: 0;top: 0; list-style: none}
.pagination li{cursor:pointer;float: left;height:26px;width: 26px;color: #666;line-height:26px;text-align: center;border-radius: 2px; }
.pagination li.active{background-color:#3587c6;color: #fff }
.pagination { margin-right: 30px;}
</style>
</head>
<body>

<div class="myContents">
<div class="page-location">您现在的位置:<a href="#"> 掌上贵金属</a> ><a href="#"> 新手学院</a> > <span>列表页</span></div>
<div class="mylist">

<div class="listLeft">
<img class="listImage"src="images/img01.jpg">
</img>
</div>
<div class="listRight">
<div class="myTitle">
<h3>天津贵金属交易所</h3>

<p class="ptime">2015-5-12</p>
</div>
<p class="p1">
以下简称“津贵所”）是根据国务院关于《推进滨海新区开发开放有关问题的意见》
（国发﹝2006﹞20号）的政策精神，经天津市政府批准，由天津产权交易中心发起设立的公司制交易所。
津贵所注册资本金为一亿元人民币，由中国中信集团控股，天津产权交易中心、中国黄金集团公司等企业参股
中国黄金集团公司等企业参股
</p>

<p class="p2"><a href="#">查看全文</a></p>
</div>
</div>

<div class="pagination">
<ul class="clearfix">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>

</div>
<script type="text/javascript">
$(function() {
$(".pagination li").click(function() {
var index = $(this).index();
$(".pagination li").removeClass("active");
$(".pagination li").eq(index).addClass("active");
})
})
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航