4、商城首页制作实战训练--整体样式完善与优化

Sian · 发表于 2016-2-22 15:10:09

1、针对设计稿完善各div盒子的样式
2、部分代码
style.css

[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 */
#head, #nav, .content { width: 960px;margin: 0 auto;}
#search, #footer, .section, .side_section, .side_ad { border: 1px solid #EEE; border-radius: 6px;}
.section, .options, .side_section, .side_ad, .main_ad { margin-bottom: 10px;}

body { margin-bottom: 30px; }
#header { height: 30px; border-radius: 0 0 6px 6px;}
#nav { height: 100px; background: #FEE; }
#search { width: 958px; height: 114px; margin: 0 auto 10px;}
.content {}
.main { width: 710px; }
.section { width:318px; height: 200px; padding: 0 15px; }
.options { width: 350px; height: 200px; background: #EEE; }
.main_ad { border-radius: 6px; overflow: hidden; }
.side { width:240px; }
.side_section { height: 60px; }
.side_ad { overflow: hidden; }
#footer { width: 958px; height: 78px; margin: 0 auto; }

index.html

[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 clear">
		
		<div class="main fl">
			
			<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 fr">
			
			<div class="side_section"></div>
			
			<div class="side_ad ad_border"><a href="#"><img src="img/ad/ad2.jpg"/></div>
			
			<div class="side_ad"><a href="#"><img src="img/ad/ad3.jpg"/></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" class="gradient"></div>
</body>
</html>

3、源代码下载

游客，如果您要查看本帖隐藏内容请回复

帐号		自动登录	找回密码
密码			立即注册

[电子商务] 4、商城首页制作实战训练--整体样式完善与优化

相关帖子