3、商城首页制作实战训练--主体模块样式编写
1、从上至下开始编写整体样式；2、先编写样式的宽、高、外边距、内边及圆角等基本样式；
3、部分代码；
style.css/* style reset */
body,h1,h2,h3,h4,p,ul,ol,form,input,textarea,th,td,select{margin: 0;padding: 0;}
em{font-style: normal;}
li{list-style: none;}
a{text-decoration: none;}
img{border: none;vertical-align: top;}
table{border-collapse: collapse;}
input,textarea{outline: none;}
textarea{resize: none;overflow: auto;}
body{font-size: 12px;}
/* public */
.clear{zoom:1;}
.clear:after{content: '';display: block;clear: both}
.fl{float: left;}
.fr{float: right;}
.gradient{
background: -webkit-linear-gradient(top,#ffffff,#f8f8f8);
background: -moz-linear-gradient(top,#ffffff,#f8f8f8);
background: -ms-linear-gradient(top,#ffffff,#f8f8f8);
background: linear-gradient(top,#ffffff,#f8f8f8);
+background:#f9f9f9;
}
/* layout */
#header{width:960px; height: 30px; margin: 0 auto; border-radius: 0 0 6px 6px;}
#nav{width: 960px; height: 100px; margin: 0 auto; background: #FEE;}
#search{width: 958px; height: 114px; margin: 0 auto 10px; border: 1px solid #EEE; border-radius: 6px;}
.content{width: 960px;margin: 0 auto;}
.main{width: 710px;}
.section{width:318px; height: 200px; padding: 0 15px; border: 1px solid #EEE;border-radius: 6px; margin-bottom: 10px}
.options{width: 350px; height: 200px; background: #EEE}
.main_ad{margin-bottom: 10px;border-radius: 6px; overflow: hidden;}
.side{width:240px;}
.side_section{}
.side_ad{}
#footer{}index.html<!DOCTYPE html>
<html>
<head>
<title>电子商务网站模板</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.12.0.min.js"></script>
<script>
</script>
</head>
<body>
<div id="header" class="gradient"></div>
<div id="nav"></div>
<div id="search" class="gradient"></div>
<div class="content">
<div class="main">
<div class="clear">
<div class="section fl"></div>
<div class="options fr"></div>
</div>
<div class="main_ad"><a href="#"><img src="img/ad/ad1.jpg"/></a></div>
<div class="clear">
<div class="section fl"></div>
<div class="section fr"></div>
</div>
<div class="clear">
<div class="options fl"></div>
<div class="section fr"></div>
</div>
<div class="main_ad"><a href="#"><img src="img/ad/ad1.jpg"/></a></div>
<div class="clear">
<div class="section fl"></div>
<div class="section fr"></div>
</div>
<div class="clear">
<div class="section fl"></div>
<div class="section fr"></div>
</div>
</div>
<div class="side">
<div class="side_section"></div>
<div class="side_ad"></div>
<div class="side_ad"></div>
<div class="side_section"></div>
<div class="side_section"></div>
<div class="side_section"></div>
<div class="side_section"></div>
<div class="side_section"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>4、源代码下载：**** Hidden Message *****
页:
[1]