小米商城初步补充css

原创 2018-11-30 09:59:49 205
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="static/css/style.css" /><link rel="stylesheet" hr

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="static/css/style.css" />

<link rel="stylesheet" href="static/css/font-awesome.min.css" />

<link rel="shortcut icon"  href="static/images/footlogo.png" />

<title>小米商城</title>

<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_ui{

background: #CCCCCC;

height: 180px;

margin: 10px auto;

}

.contentShop{

background: #CCCCCC;

height: 280px;

margin: 10px auto;

}

.contentImg{

background: #CCCCCC;

height: 100px;

margin: 10px auto;

}

.contentUL{

background: #CCCCCC;

height: 80px;

margin: 10px auto;

}

.contentPhone{

background: #CCCCCC;

height: 500px;

margin: 10px auto;

}

/*footer*/


.footer {

width: 1226px;

height: 100px;

background: #CCCCCC;

margin: 10px auto;

}

</style>

</head>

<body>

<div class="header">

<div class="menu"></div>

</div>

<div class="contents">

<div class="content">

<div class="contentMenu"></div>

<div class="contentPic"></div>

<div class="contentPic_ui"></div>

<div class="contentShop"></div>

<div class="contentImg" style="background:url(static/images/longAD1.jpg);)"></div>

<div class="contentUL">手机</div>

<div class="contentPhone"></div>

<div class="contentImg" style="background:url(static/images/longAD2.jpg);)"></div>

<div class="contentUL">智能</div>

<div class="contentPhone"></div>

<div class="contentImg" style="background:url(static/images/longAD3.jpg);)"></div>

<div class="contentUL">家电</div>

<div class="contentPhone"></div>

<div class="contentImg" style="background:url(static/images/longAD4.jpg);)"></div>


</div>

</div>

<div class="footers">

<div class="footer">footer</div>

</div>

</body>

</html>


发布手记

热门词条