年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1931|回复: 0

[电子商务] 3、商城首页制作实战训练--主体模块样式编写

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2016-2-22 11:53:48 | 显示全部楼层 |阅读模式
    1、从上至下开始编写整体样式;
    2、先编写样式的宽、高、外边距、内边及圆角等基本样式;
    3、部分代码;
    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 */
    #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
    [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、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-28 19:43 , Processed in 0.049311 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表