商城底部布局1_PHP中文网手记

摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style.css" /> <link rel="stylesheet&q

<!DOCTYPE html>

<html>

<head>

</head>

<style>

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

}

a {

text-decoration: none;

color: #ccc;

cursor: pointer;

}

.clear {

clear: both;

}

/*头部样式*/

.header {

width: 100%;

height: 40px;

background: #333;

}

.menu {

width: 1226px;

height: 40px;

background: #CCCCCC;

margin: 0 auto;

}

/*主体样式*/

.content {

width: 1226px;

margin: 0 auto;

}

.contentMenu{

background: #CCCCCC;

height: 90px;

margin: 10px auto;

}

.contentPic{

background: #CCCCCC;

height: 480px;

margin: 10px auto;

}

.contentPic-left{

width: 246px;

height: 480px;

background: #CCCCCC;

float: left;

}

.contentPic-right{

width:980px ;

height: 480px;

float:left;

background: #942CFC;

}

.contentPic_ui{

height: 170px;

margin: 10px auto;

}

.contentPic-taba{

width:235px;

height:170px ;

margin-right:10px ;

background: #5F5750;

float: left;

}

.contentPic-ls{

width:317px;

height:170px;

float: left;

margin-left: 10px;

}

.contentShop{

height: 340px;

margin: 10px auto;

}

/*小米闪购*/

.xm-sg{

width: 235px;

height: 340px;

background: #CCCCCC;

float: left;

}

.contentImg{

background: #CCCCCC;

height: 100px;

margin: 10px auto;

}

.contentUL{

background: #CCCCCC;

height: 80px;

margin: 10px auto;

}

.contentPhone{

height: 614px;

margin: 10px auto;

}

.cp-sj-left{

width: 234px;

height: 614px;

float: left;

background-image: url("../images/buy/手机AD.jpg") ;

background-repeat: no-repeat;

background-size:cover;

}

.cp-sj-right{

width: 980px;

height: 614px;

float: right;

}

.cp-sj-box{

width: 235px;

height: 302px;

float: left;

background: #CCC;

}

.cp-zn-one,.cp-zn-two{

width: 235px;height: 300px;background: #ccc;float: left;

}

.cp-zn-top{

width: 235px;

height: 145px;

background: #ccc;

}

.cp-zn-bottom{

width: 235px;

height: 145px;

background: #ccc;

margin-top: 10px;

}

.cp-zn-two1{

float: left;

}

/*footer*/

.footer {

width: 1226px;

margin: 10px auto;

}

.for-li{

width: 1226px;

height: 80px;

margin:0 auto;

}

.for-li a{

font-size: 16px;

line-height: 80px;

text-align: center;

font-weight: 300;

display: block;

height: 80px;

float: left;

width: 243px;

}

.for-li span{

margin-left: 75px;

}

.for-li a:hover{

color: #FF8200;

}

.for-li-1{

width: 1226px;

height: 112px;

margin: 40px auto;

}

dl{

float: left;

display: block;

width: 160px;

}

dd a{

font-size: 12px;

line-height: 20px;

color: #757575;

}

dt{

font-size: 14px;

line-height: 20px;

margin-bottom: 15px;

color: #424242;

}

dd a:hover{

color: #FF8200;

}

.for-conten{

width: 258px ;height: 112px;border-left: 1px solid #626262;float: right;text-align: center;

}

.suorg{

font-size: 22px;

color: #FF8200;

}

.suorg-1{

font-size: 12px;

margin-top: 5px;

}

.btn{

width: 120px;

height: 25px;

border: 1px solid #FF8200;

background: #FFFFFF;

color: #FF8200;

margin-top: 10px;

}

.btn:hover{

background: #FF8200;color: #FFFFFF;

}

</style>

<body >

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="#"><i class="fa fa-wrench"> 预约维修服务</i><span>|</span></a>

<a href="#"><i class="fa fa-rotate-right"> 7天无理由退货</i><span>|</span></a>

<a href="#"><i class="fa fa-refresh"> 15天免费换货</i><span>|</span></a>

<a href="#"><i class="fa fa-map-marker"> 520余家售后网点</i></a>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="">授权体验店</a></dd>

</dl>

<dl>

<dd><a href="">投资者关系</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<p class="suorg-1">周一至周日 8:00-18:00<br />(仅收市话费)</p>

</div>

</body>

</html>

商城底部布局1

热门词条