项目布局

作者: 4c7e6478f472 | 来源:发表于2019-01-02 11:55 被阅读0次

项目布局
项目布局
项目布局
项目布局
项目布局
项目布局
grid布局
UICollectionView中item的对齐方式-右对齐
05项目总结-网页改版中细节设计
2018-03-29

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>www.jd.com</title>
    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
    <style type="text/css">
        *{
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    }
    @font-face {
      font-family: 'iconfont';
      src: url('../../html代码/iconfont/iconfont.eot'); /* IE9*/
      src: url('../../html代码/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('../../html代码/iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
      url('../../html代码/iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('../../html代码/iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    /* .nva a */
    .g1{
        background-color: #580000;
        width: 100%;
        height: 80px;
    }

    .a{
        width: 1200px;
        margin: 0 auto;
    }

    .a img{
        height: 80px;
        margin: 0 auto;
    }

    .top_1{
        height:30px;
        border-bottom: 1px solid #ddd;
        background-color:#e3e4e5;
    }
    .top_2_1{
        height: 30px;
        width: 1190px;
        margin: 0 auto;
    }
    .top_2_2{
        height: 30px;
        width: 258px;
        float: left;
    }
    .top_2_3{
        width: 44px;
        height: 30px;
        float: right;
        padding-left: 7px;
        padding-right: 7px;
    }
    .top_2_3:hover{
        background-color: white;
    }
    .top_3_1{
        height: 30px;
        width: 718.11px;
        float: right;
    }
    .top_3_2{
        height: 29.6px;
        width: 127.11px;
        float: left;
        margin-right: 8px;
    }
    .top_3_2 a{
        /*display: block;*/
        color: #999;
        font-size: 12px;
        line-height: 30px;
        /*float: left;*/
    }
    .top_3_2 .style-red{
        color: #f10215;
        left: 7px;
        right: 7px;
    }

    .top_3_2 a:hover{
        color: #f10215;
        text-decoration: none;
    }
    /*.top_3_2 .style-red:hover{*/
        /*color: #f10215;*/
        /*text-decoration: none;*/
    /*}*/

    .top_3_1 li{
        float:left;
    }
    .top_3_1 li.spacer {
        overflow: hidden;
        margin: 11px 5px 0;
        width: 1px;
        height: 10px;
        background-color: #ccc;
    }

    .li_2_1{
        overflow: hidden;
        margin: 11px 5px 0;
        height: 10px;
        width: 1px;
        color: #999;
    }
    .tit_1 {
        font-family: "iconfont" !important;
        font-size: 14px;
        font-style: normal;
        color: #f10215;
        line-height: 30px;
    }
    .tit_2{
        line-height: 30px;
        float: right;
        color: #999;
        font-size: 14px;
    }
    .contre_1{
        width:100%;
        height:140px;
        background-color: red;
        position: relative;
    }
    .contre_1_2{
        width: 190px;
        height: 171px;
        position: absolute;
        left: 165px;
        top: -31px;
        background-color:white;
    }
    .center_1_2 img{
        line-height: 171px;
        outline-width: 190px;
    }
    .contre_2{
        width: 100%;
        height: 480px;
        background-color: #888888;
        margin-bottom: 20px; 
    }
    .contre_3{
        width: 100%;
        height: 3000px; background-color:blue;
    }

    .bottom{
        width: 100%;
        height: 666px;
        background: yellow;
    }

    </style>
</head>
<body>
    <div class="g1">
        <div class="a">
            <img src="img/f425145997173d54320dcbd193617d2.png" style="height: 80px">
        </div>
    </div>
    <div class="top_1" >
        <div class="top_2_1">
            <div class="top_2_2">
                <li class="top_2_3">
                    <i class="tit_1">&#xe6c4;</i>
                    <div class="tit_2">北京</div>
                </li>
            </div>
            <ul class="top_3_1">
                <li class="top_3_2">
                    <a href="#">您好，请登录</a>
                    <a href="#" class="style-red">免费注册</a>
                </li>
                <li class="spacer">
                    
                </li>
            </ul>
        </div>
        
    </div>
    <dir class="contre_1">
        <div class="contre_1_2">
            <img src="img/jingdong.png" class="">
        </div>
    </dir>
    <div class="contre_2">
        
    </div>
    <div class="contre_3">
        
    </div>
    <div class="bottom">
        
    </div>
</body>
</html>