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{
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{
430px;
margin-top: 23px;
margin-left: 185px;
}
.search_text{
350px;
height:35px;
padding: 0 5px;
line-height: 35px9;/** css back 9 代表所有的ie浏览器*/
background: #FFF;
}
.search_btn{
70px;
height:35px;
font-size: 14px;
font-family: "Microsoft YaHei ","微软雅黑";
color: #FFF;
background-color: #FF8c00;
}
/**购物车*/
.shopCar{
background-color: #FF8c00;
height: 35px;
145px;
margin-top: 23px;
line-height: 35px;
font-family: "Microsoft YaHei ","微软雅黑";
font: 14px/35px;
color: #FFF;
margin-right: 59px;
}
.shopText{
height: 100%;
87px;
border-right: #E27A00 solid 1px;
text-indent: 40px;
}
.shopNum{
border-left: #FF9C01 solid 1px;
height: 35px;
27px;
text-align: right;
padding-right: 29px;
}
/**导航**/
.navBox{
height: 35px;
background-color: #1369C0;
color: #FFF;
}
.shopClass{
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;
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;
}