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

最新推荐文章于 2024-05-14 18:25:49 发布

zhaihaohao1

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量1.3k

点赞数

分类专栏： web前端demo

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/48035329

版权

web前端demo 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

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> &gt;<a href="#"> 新手学院</a> &gt; <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>