html

 https://b-stg.pingan.com.cn/creditcard/pacesbmms/merchantAppDownload/merchant-app.html

 


http://www.cocoachina.com/ios/20180628/23964.html iOS面试准备之思维导图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="style/reset.css">
    <link type="text/css" rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a href="#" class="collection">收藏慕课</a>
            </div>
            <div class="rightArea">
                欢迎来到慕课网!
                <a href="#">[登录]</a>
                <a href="#">[免费注册]</a>
            </div>
        </div>
    </div>
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo f1">
                <img src="#" alt="慕课网">
            </div>
            <div class="search_box f1">
                <input type="text" class="search_text f1">
                <input type="button" value="搜 索" class="search_btn fr">
            </div>
            <div class="shopCar fr">
                <span class="shopText f1">购物车</span>
                <span class="shopNum f1">100</span>
            </div>
        </div>
    </div>
    <div class="navBox">
        <div class="comWidth">
            <div class="shopClass f1">
                <h3>全部商品分类<i></i></h3>
                <div class="shopClass_show">
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#">合约机</a>
                        </dt>
                        <dt>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dt>
                    </dl>
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#">合约机</a>
                        </dt>
                        <dt>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dt>
                    </dl>
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#">合约机</a>
                        </dt>
                        <dt>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dt>
                    </dl>
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#">合约机</a>
                        </dt>
                        <dt>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dt>
                    </dl>
                    <dl class="shopClass_item">
                        <dt>
                            <a href="#" class="b">手机</a>
                            <a href="#" class="b">数码</a>
                            <a href="#">合约机</a>
                        </dt>
                        <dt>
                            <a href="#">荣耀3X</a>
                            <a href="#">单反</a>
                            <a href="#">智能设备</a>
                        </dt>
                    </dl>
                </div>
            </div>
            <ul class="nav f1">
                <li><a href="#" class="active">数码城</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>
</body>
</html>
/**公共*/
.comWidth{
    width: 1000px;
    margin-left: auto;
    margin-right:auto;
}
.leftArea{
    float: left;
}
.rightArea{
    float:right;
}
.topBar{
    height: 31px;
    background-color:#F7F7F7;
    line-height: 31px;
}
/**logo*/
.logoBar{
    height: 85px;
    background: #1D7AD9;
}
.logo{
    padding-left: 41px;
    padding-top: 13px;
}
/**搜索*/
.search_box{
    width: 430px;
    margin-top: 23px;
    margin-left: 185px;
}
.search_text{
    width: 350px;
    height:35px;
    padding: 0 5px;
    line-height: 35px\9;/** css back \9 代表所有的ie浏览器*/
    background: #FFF;
}
.search_btn{
    width:70px;
    height:35px;
    font-size: 14px;
    font-family: "Microsoft YaHei ","微软雅黑";
    color: #FFF;
    background-color: #FF8c00;
}
/**购物车*/
.shopCar{
    background-color: #FF8c00;
    height: 35px;
    width: 145px;
    margin-top: 23px;
    line-height: 35px;
    font-family: "Microsoft YaHei ","微软雅黑";
    font: 14px/35px;
    color: #FFF;
    margin-right: 59px;
}
.shopText{
    height: 100%;
    width: 87px;
    border-right: #E27A00 solid 1px;

    text-indent: 40px;
}
.shopNum{
    border-left: #FF9C01 solid 1px;
    height: 35px;
    width: 27px;
    text-align: right;
    padding-right: 29px;
}
/**导航**/
.navBox{
    height: 35px;
    background-color: #1369C0;
    color: #FFF;
}
.shopClass{
    width: 190px;
    position: relative;
}
.shopClass h3{
    text-align: center;
    line-height: 35px;
}
.nav,.shopClass{
    font-family:"Microsoft YaHei ","微软雅黑";
}
.nav li{
    float: left;
}
.nav {
    line-height: 35px;
}
.nav a{
    height: 35px;
    color: #FFF;
    padding: 0 35px;
    display:inline-block;
}
/**如果是，分隔的话整个都是这个背景色，空格的话只会设置当前class类*/
.nav .active{
    background-color:#4593FD;
}
/**商品弹出列表**/
.shopClass_show{
    background-color: #4593FD;
    position: absolute;
    left: 0px;
    top: 35px;
    width: 100%;
}
.shopClass_item{
    padding: 14px 10px;
    border-bottom: #3487F2 solid 1px;

}
.shopClass_item dt{
    height: 24px;
}
.shopClass_item .b{
    font: 14px/1 "Microsoft YaHei ", "微软雅黑";
}
.shopClass_item a{
    color: #FFF;
}
@charset "utf-8";
/**Css Document*/
/**归零*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{
    margin: 0px;padding: 0px}
body{
    font-size: 12px;
}
img{
    border: none;
}
li{
    list-style: none;
}
input,select,textarea{
    outline: none;
    border: none;
    background:none;
}
a{
    text-decoration: none;
}
/**清除浮动**/
.clearfix:after{
    content: '';
    display: block;
    clear: both;
    }
.clearfix{zoom:1;}
.f1{
    float: left;
}
.fr{
    float: right;
}
posted @ 2018-06-26 20:58  TheYouth  阅读(242)  评论(0)  编辑  收藏  举报