Android程序员学WEB前端(9)-CSS(4)-商城首页Demo-Sublime

最新推荐文章于 2024-02-14 21:30:31 发布

iwanghang

最新推荐文章于 2024-02-14 21:30:31 发布

阅读量2.2k

点赞数 2

分类专栏： Web前端 Android程序员学WEB前端文章标签： WEB HTML CSS Shop Demo

本文链接：https://blog.csdn.net/iwanghang/article/details/77850533

版权

Web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Android程序员学WEB前端

13 篇文章 1 订阅

订阅专栏

转载请注明出处： http://blog.csdn.net/iwanghang/article/details/77850533
觉得博文有用，请点赞，请评论，请关注，谢谢！~

跟着视频教程练习了一下HTML+CSS制作一个基础的商城首页，很有收获，在这里上传一下GIF图和部分代码，作为学习笔记：

老规矩，先上GIF动态图，看个效果，如果符合你的项目或者确定你要了解的内容，再往下看吧：

index1.html到index9.html资源压缩包下载地址：http://download.csdn.net/download/iwanghang/9964825

index9.html：

<!-- 
    top区域：
        1、top区域排版
        2、修改字体和样式、内外边距
        3、超链接的样式
        4、添加样式图标
    search和头图区域：
        1、search区域排版
        2、利用两层浮动
        3、修改背景、字体、行距、内外边距、a标签样式
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商城首页</title>
    <link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
    <div class="body">
        <!-- head区域开始 -->
        <div class="head">
            <!-- top区域开始 -->
            <div class="top clear">
                <div><span>欢迎您回来！ID！</span><a href="#">退出</a></div>
                <ul class="clear">
                    <li>
                        <a href="#">
                            <i class="icon_01"></i>
                            商城首页
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_02"></i>
                            个人中心
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_03"></i>
                            购物车
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_04"></i>
                            关注
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_05"></i>
                            手机版
                        </a>
                    </li>
                </ul>
            </div>
            <!-- top区域结束 -->

            <!-- search区域开始 -->
            <div class="search clear">
            	<div class="logo_01"></div>
            	<div class="form_01">
            		<form action="" method="">
            			<ul class="clear">
            				<li><input type="text" /></li>
            				<li><a href="#">搜本店</a></li>
            				<li><a href="#" style="background-color: #525252;">搜全站</a></li>
            			</ul>
            		</form>
            	</div>
            </div>
            <!-- search区域结束 -->

            <!-- 头图开始 -->
            <div class="head_img">
                <img src="http://68dsw.oss-cn-beijing.aliyuncs.com/images/system/config/mall_top_ad/mall_top_da_image_0.jpg" alt=""/>
            </div>
            <!-- 头图结束 -->

            <!-- 导航区域开始 -->
            <div class="nav">
            	<ul class="clear">
            		<li><a href="#" style="color:#FF4040;">秒杀</a></li>
            		<li><a href="#">优惠券</a></li>
            		<li><a href="#">闪购</a></li>
            		<li><a href="#">拍卖</a></li>
            		<li><a href="#">超市</a></li>
            		<li><a href="#">生鲜</a></li>
            		<li><a href="#">全球购</a></li>
            		<li><a href="#">金融</a></li>
            	</ul>
            </div>
            <!-- 导航区域结束 -->
        </div>
        <!-- head区域结束 -->

        <!-- main主体区域开始 -->
        <div class="main clear">
            <div class="main_left">
            	<div class="company_01">
            	    <h1>IWH 老王的商城</h1>
            	    <ul>
            	    	<li>多 · 快 · 好 · 省</li>
            	    	<li><a href="http://blog.csdn.net/iwanghang">会员中心</a></li>
            	    </ul>
            	</div>
            	<div class="classify">
            		<h1>产品分类</h1>
            		<ul class="clear">
	            		<li><a href="#">家用电器</a></li>
	            		<li><a href="#">手机/运营商/数码</a></li>
	            		<li><a href="#">电脑/办公</a></li>
	            		<li><a href="#">家具/家具/家装/厨具</a></li>
	            		<li><a href="#">男装/女装/童装/内衣</a></li>
	            		<li><a href="#">美妆个护/宠物</a></li>
	            		<li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
	            		<li><a href="#">男鞋/运动/户外</a></li>
            	    </ul>
            	</div>
            </div>
            <div class="main_mid">
            	<div class="company_02">
            	    <h1>AD同样精彩<a href="#">更多内容</a></h1>
            		<div class="ad_img"><img src="https://img11.360buyimg.com/babel/jfs/t7027/53/2293470434/76665/c69219f/598aaf19Nb60562f2.jpg" alt="" /></div>
            		<div class="content">
            			夏日狂欢，冰凉有价。凉风拂面，夏末之际，来一番酣畅的烧烤，再畅饮几杯啤酒，呼朋引伴，谈天说地，送走盛夏，迎来清秋，别有一番滋味。香气扑鼻的
            			各式烤肉、劲爽冰凉的啤酒，精彩绝伦的热辣表演，还有各式各样的互动游戏与终极比拼，就着唯美的景观，开始一场不醉不归、激情四溢的夏末狂欢之旅。
            			炫舞表演、才艺大比拼、互动问答、啤酒PK赛、吃西瓜比赛等缤纷节目让现场热血沸腾，不少来宾玩得酣畅淋漓。最让人印象深刻的当属每场比赛最终环节，
            			来宾兴奋不已！活动当天的来宾们不仅大饱眼福，大饱耳福，更是大饱口福。
            		</div>
                </div>
                <div class="product_01">
                		<h1 class="clear">老王秒杀<a href="#"></a>总有你想不到的低价</h1>
                        <ul class="claer">
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                    	    	<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img14.360buyimg.com/n4/s130x130_jfs/t6412/11/701676082/342156/4048ef00/59439f6cN741038d2.jpg" alt="" /></a>
                        		<a href="#">维他奶 原味豆奶植物蛋白饮品 250ml*16盒 整箱</a>
                        	</li>
                        	<li>
                    	    	<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4945/261/1102029934/162908/fe806648/58eca86cN23823be6.jpg" alt="" /></a>
                    		    <a href="#">金鼎 非转基因压榨葵花籽油食用油 5.436L 责任央企 中储粮出品</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img10.360buyimg.com/n4/s130x130_jfs/t2464/95/1765031460/193349/bc39a1e6/56726e5cNee347097.jpg" alt="" /></a>
                        		<a href="#">科沃斯（Ecovacs）地宝魔钻(BFD-wwt) 扫地机器人家用吸尘器全自动</a>
                    	    </li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>                    	
                        	<li>
                    	    	<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                    		    <a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                    	    </li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                    	    	<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                    	    </li>
                        </ul>
                </div>
            </div>
            <div class="main_right">
            	<div class="company_03">
            		公告
            	</div>
            	<div class="product_02">
            		促销商品
            	</div>
            </div>
        </div>
        <!-- main主体区域结束 -->
        <!-- foot区域开始 -->
        <div class="foot">
        	<div>
        		<a href="#">CSDN</a> |
        		<a href="#">扣丁学堂</a> |
        		<a href="#">马剑威</a> |
        		<a href="#">王航</a> |
        		<a href="#">iwanhgang</a> |
        		<a href="#">淘宝</a> |
        		<a href="#">京东</a> |
        		<a href="#">Android</a> |
        		<a href="#">AndroidStudio</a> |
        		<a href="#">Java</a> |
        		<a href="#">Kotlin</a>
        	</div>        	
        	<div>
                <a href="#">关于商城</a>
                <a href="#">合作伙伴</a>
                <a href="#">营销中心</a>
                <a href="#">廉政举报</a>
                <a href="#">联系客服</a>
                <a href="#">开放平台</a>
                <a href="#">诚征精英</a>
                <a href="#">联系我们</a>
                <a href="#">网站地图</a>
                <a href="#">法律声明</a>
                <a href="#">知识产权| © 2017-2027 Iwanghang.com 版权所有</a>
        	</div>        	
        	<div>
        		网络文化经营许可证：辽网文[2017]0888-088号|增值电信业务经营许可证：辽A1-20170808|信息网络传播视听节目许可证：1100888号|互联网违法和不良信息举报电话：0888-88889999 wh@iwanghang.com
        	</div>
        </div>
        <!-- foot区域结束 -->
    </div>
</body>
</html>

style.css：

        /*公共样式*/
        *{
            margin:0;padding: 0;
        }
        body{
        	font-size: 12px;
        	color: #333;
        	width: 1210px;
        	margin:0 auto;
        	background-color:#F7F7F7;
        }
        ul{list-style: none;}
        /*很NB的清除浮动方法，兼容99.99%浏览器*/
        .clear:after{display: block;clear: both;content: ".";visibility: hidden;height: 0;}    
        .clear{zoom:"1";}
        a:link{color: #999;}    /*在点击超连接之前所有表现的样式*/  
        a:visited{color: #999;}    /*浏览过后的超链接样式*/  
        a:hover{color: red;}    /*鼠标悬停在超链接上的样式*/  
        a:active{color: red;}    /*鼠标点击同时所表现的样式*/  
        a{text-decoration: none;}    /*去掉下划线*/
        /*公共样式*/
        .head {
        }       	
        .top{
            
            line-height: 30px;    /*行高20px*/
            background-color: #e3e4e5;
            border-bottom: 1px solid #e5e5e5;
        	}    
        .top div{float: left;}
        .top ul{float: right;}
        .top ul li{float: left;margin-left: 8px;padding: 0 5px 0 5px;}
        .icon_01{
            background-position:-260px -184px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_02{
            background-position:-260px -207px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_03{
            background-position:-293px -3px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_04{
            background-position:-293px -184px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_05{
            background-position:-365px -3px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .search .logo_01{
        	background-position:0 15px;
        	margin-left: 2px;
        	height: 60px;
        	width: 150px;
            background-image:url(http://cn.unionpay.com/images/images2017/logo.png?v=20161102);
            /*background-image:url(http://img01.sogoucdn.com/net/a/04/link?appid=100520145&url=http%3A%2F%2Fi03.pic.sogou.com%2F6cba70b2a3fb5d80);*/
            /*background-image:url(http://i966.photobucket.com/albums/ae146/Incredible_Nicholas/Trio.gif);*/
            /*background-image:url(http://i01.pictn.sogoucdn.com/e0871261cb2dee69);*/
            background-repeat: no-repeat;
        }
        .search div{float: left;}
        .search .form_01 form ul li{float: left;}
        .search .form_01{margin-left: 150px;margin-top: 15px;}
        .form_01 input{width: 400px;height: 30px; border: 1px solid #FF4040;}
        .form_01 a{display: block;color: #fff;font-weight: bold;width: 60px;text-align: center;
                line-height: 32px;background-color: #FF4040;}

        .nav{background-color: #fff;line-height: 40px;}
        .nav ul li{
        	float: left;
        	padding: 0 52px 0 52px;
        	font-size: 18px;
        	font-family: "雅黑" "黑体";
        	font-weight: bold;
        }
        .nav a:link{color: #555;}    /*在点击超连接之前所有表现的样式*/  
        .nav a:visited{color: #555;}    /*浏览过后的超链接样式*/  
        .nav a:hover{color: #555;}    /*鼠标悬停在超链接上的样式*/  
        .nav a:active{color: #555;}    /*鼠标点击同时所表现的样式*/  

        .main{margin: 5px auto;}
        .main .main_left{width: 220px;height: 1000px;float: left;margin-right: 10px;}
        .main .main_mid{width: 790px;height: 1000px;float: left;margin-right: 10px;}
        .main .main_right{width: 160px;height: 1000px;border:1px solid #e3e4e5;float: left;margin-right: 10px;}

        .company_01{padding: 10px;background-color:#fff;}
        .company_01 h1{text-align: center;color: #CD2626;}
        .company_01 ul{margin-top: 10px;}
        .company_01 ul li{
            margin-top: 10px;
            text-align: center;
            color: #CD2626;
            font-size: 16px;
            font-family: "雅黑" "黑体";
            font-weight: bold;
        }
        .company_01 ul li a{
        	display: block;
        	width: 120px;
        	line-height: 30px;
        	color: #fff;
        	background-color:#CD2626;
        	text-align: center; 
        	margin: 10px auto;
        	font-weight: normal;
        }

        .classify{margin-top: 10px;}
        .classify h1{
        	padding-left: 15px;
        	font-size: 16px;
        	color: #fff;
        	background-color: #6e6568;
        	line-height: 30px;
        }
        .classify ul li a{
        	display: block;
        	font-weight: bold;
        	text-indent: 2em;
        	line-height: 30px;
        	color: #fff;
        	background-color:#6e6568;
        }
        .classify ul li a:link{color:#fff;}    /*在点击超连接之前所有表现的样式*/  
        .classify ul li a:visited{color:#fff;}    /*浏览过后的超链接样式*/  
        .classify ul li a:hover{color:#CD3333;background:#A1A1A1;}    /*鼠标悬停在超链接上的样式*/  
        .classify ul li a:active{color:#fff;}    /*鼠标点击同时所表现的样式*/  

        .company_02{}
        .company_02 h1{font-size: 14px;color: #5C5C5C;background-color:#fff;line-height: 30px;text-indent: 1em;}
        .company_02 h1 a{display: block;float:right;margin-right: 10px;font-size: 12px;}

        .product_01{}
        .product_01 h1{font-size: 14px;color: #5C5C5C;background-color:#fff;line-height: 30px;text-indent: 1em;}
        .product_01 h1 a{display: block;float:right;margin-right: 10px;font-size: 12px;}
        .product_01 ul li{float: left;margin: 10px 5px 10px 5px;width: 148px;}
        .product_01 ul li a{display: block;margin: 5px;}

        .foot{border-top:2px solid red;margin-top: 20px;}
        .foot div{margin: 15px;line-height: 20px;}

index9只是把CSS分离出来了，简单点，可以看index8，未分离样式的源码 ↓

index8.html：

<!-- 
    top区域：
        1、top区域排版
        2、修改字体和样式、内外边距
        3、超链接的样式
        4、添加样式图标
    search和头图区域：
        1、search区域排版
        2、利用两层浮动
        3、修改背景、字体、行距、内外边距、a标签样式
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>商城首页</title>
    <style type="text/css">
        /*公共样式*/
        *{
            margin:0;padding: 0;
        }
        body{
        	font-size: 12px;
        	color: #333;
        	width: 1210px;
        	margin:0 auto;
        	background-color:#F7F7F7;
        }
        ul{list-style: none;}
        /*很NB的清除浮动方法，兼容99.99%浏览器*/
        .clear:after{display: block;clear: both;content: ".";visibility: hidden;height: 0;}    
        .clear{zoom:"1";}
        a:link{color: #999;}    /*在点击超连接之前所有表现的样式*/  
        a:visited{color: #999;}    /*浏览过后的超链接样式*/  
        a:hover{color: red;}    /*鼠标悬停在超链接上的样式*/  
        a:active{color: red;}    /*鼠标点击同时所表现的样式*/  
        a{text-decoration: none;}    /*去掉下划线*/
        /*公共样式*/
        .head {
        }       	
        .top{
            
            line-height: 30px;    /*行高20px*/
            background-color: #e3e4e5;
            border-bottom: 1px solid #e5e5e5;
        	}    
        .top div{float: left;}
        .top ul{float: right;}
        .top ul li{float: left;margin-left: 8px;padding: 0 5px 0 5px;}
        .icon_01{
            background-position:-260px -184px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_02{
            background-position:-260px -207px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_03{
            background-position:-293px -3px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_04{
            background-position:-293px -184px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .icon_05{
            background-position:-365px -3px;;
            width: 13px;
            height: 13px;
            vertical-align: middle;
            display: inline-block;
            /*border:0.1px solid black;*/
            background-image:url(http://www.68dsw.com/images/common-icon.png);
            background-repeat: no-repeat;
            margin-bottom: 3px;
        }
        .search .logo_01{
        	background-position:0 15px;
        	margin-left: 2px;
        	height: 60px;
        	width: 150px;
            background-image:url(http://cn.unionpay.com/images/images2017/logo.png?v=20161102);
            /*background-image:url(http://img01.sogoucdn.com/net/a/04/link?appid=100520145&url=http%3A%2F%2Fi03.pic.sogou.com%2F6cba70b2a3fb5d80);*/
            /*background-image:url(http://i966.photobucket.com/albums/ae146/Incredible_Nicholas/Trio.gif);*/
            /*background-image:url(http://i01.pictn.sogoucdn.com/e0871261cb2dee69);*/
            background-repeat: no-repeat;
        }
        .search div{float: left;}
        .search .form_01 form ul li{float: left;}
        .search .form_01{margin-left: 150px;margin-top: 15px;}
        .form_01 input{width: 400px;height: 30px; border: 1px solid #FF4040;}
        .form_01 a{display: block;color: #fff;font-weight: bold;width: 60px;text-align: center;
                line-height: 32px;background-color: #FF4040;}

        .nav{background-color: #fff;line-height: 40px;}
        .nav ul li{
        	float: left;
        	padding: 0 52px 0 52px;
        	font-size: 18px;
        	font-family: "雅黑" "黑体";
        	font-weight: bold;
        }
        .nav a:link{color: #555;}    /*在点击超连接之前所有表现的样式*/  
        .nav a:visited{color: #555;}    /*浏览过后的超链接样式*/  
        .nav a:hover{color: #555;}    /*鼠标悬停在超链接上的样式*/  
        .nav a:active{color: #555;}    /*鼠标点击同时所表现的样式*/  

        .main{margin: 5px auto;}
        .main .main_left{width: 220px;height: 1000px;float: left;margin-right: 10px;}
        .main .main_mid{width: 790px;height: 1000px;float: left;margin-right: 10px;}
        .main .main_right{width: 160px;height: 1000px;border:1px solid #e3e4e5;float: left;margin-right: 10px;}

        .company_01{padding: 10px;background-color:#fff;}
        .company_01 h1{text-align: center;color: #CD2626;}
        .company_01 ul{margin-top: 10px;}
        .company_01 ul li{
            margin-top: 10px;
            text-align: center;
            color: #CD2626;
            font-size: 16px;
            font-family: "雅黑" "黑体";
            font-weight: bold;
        }
        .company_01 ul li a{
        	display: block;
        	width: 120px;
        	line-height: 30px;
        	color: #fff;
        	background-color:#CD2626;
        	text-align: center; 
        	margin: 10px auto;
        	font-weight: normal;
        }

        .classify{margin-top: 10px;}
        .classify h1{
        	padding-left: 15px;
        	font-size: 16px;
        	color: #fff;
        	background-color: #6e6568;
        	line-height: 30px;
        }
        .classify ul li a{
        	display: block;
        	font-weight: bold;
        	text-indent: 2em;
        	line-height: 30px;
        	color: #fff;
        	background-color:#6e6568;
        }
        .classify ul li a:link{color:#fff;}    /*在点击超连接之前所有表现的样式*/  
        .classify ul li a:visited{color:#fff;}    /*浏览过后的超链接样式*/  
        .classify ul li a:hover{color:#CD3333;background:#A1A1A1;}    /*鼠标悬停在超链接上的样式*/  
        .classify ul li a:active{color:#fff;}    /*鼠标点击同时所表现的样式*/  

        .company_02{}
        .company_02 h1{font-size: 14px;color: #5C5C5C;background-color:#fff;line-height: 30px;text-indent: 1em;}
        .company_02 h1 a{display: block;float:right;margin-right: 10px;font-size: 12px;}

        .product_01{}
        .product_01 h1{font-size: 14px;color: #5C5C5C;background-color:#fff;line-height: 30px;text-indent: 1em;}
        .product_01 h1 a{display: block;float:right;margin-right: 10px;font-size: 12px;}
        .product_01 ul li{float: left;margin: 10px 5px 10px 5px;width: 148px;}
        .product_01 ul li a{display: block;margin: 5px;}

        .foot{border-top:2px solid red;margin-top: 20px;}
        .foot div{margin: 15px;line-height: 20px;}

    </style>
</head>
<body>
    <div class="body">
        <!-- head区域开始 -->
        <div class="head">
            <!-- top区域开始 -->
            <div class="top clear">
                <div><span>欢迎您回来！ID！</span><a href="#">退出</a></div>
                <ul class="clear">
                    <li>
                        <a href="#">
                            <i class="icon_01"></i>
                            商城首页
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_02"></i>
                            个人中心
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_03"></i>
                            购物车
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_04"></i>
                            关注
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="icon_05"></i>
                            手机版
                        </a>
                    </li>
                </ul>
            </div>
            <!-- top区域结束 -->

            <!-- search区域开始 -->
            <div class="search clear">
            	<div class="logo_01"></div>
            	<div class="form_01">
            		<form action="" method="">
            			<ul class="clear">
            				<li><input type="text" /></li>
            				<li><a href="#">搜本店</a></li>
            				<li><a href="#" style="background-color: #525252;">搜全站</a></li>
            			</ul>
            		</form>
            	</div>
            </div>
            <!-- search区域结束 -->

            <!-- 头图开始 -->
            <div class="head_img">
                <img src="http://68dsw.oss-cn-beijing.aliyuncs.com/images/system/config/mall_top_ad/mall_top_da_image_0.jpg" alt=""/>
            </div>
            <!-- 头图结束 -->

            <!-- 导航区域开始 -->
            <div class="nav">
            	<ul class="clear">
            		<li><a href="#" style="color:#FF4040;">秒杀</a></li>
            		<li><a href="#">优惠券</a></li>
            		<li><a href="#">闪购</a></li>
            		<li><a href="#">拍卖</a></li>
            		<li><a href="#">超市</a></li>
            		<li><a href="#">生鲜</a></li>
            		<li><a href="#">全球购</a></li>
            		<li><a href="#">金融</a></li>
            	</ul>
            </div>
            <!-- 导航区域结束 -->
        </div>
        <!-- head区域结束 -->

        <!-- main主体区域开始 -->
        <div class="main clear">
            <div class="main_left">
            	<div class="company_01">
            	    <h1>IWH 老王的商城</h1>
            	    <ul>
            	    	<li>多 · 快 · 好 · 省</li>
            	    	<li><a href="http://blog.csdn.net/iwanghang">会员中心</a></li>
            	    </ul>
            	</div>
            	<div class="classify">
            		<h1>产品分类</h1>
            		<ul class="clear">
	            		<li><a href="#">家用电器</a></li>
	            		<li><a href="#">手机/运营商/数码</a></li>
	            		<li><a href="#">电脑/办公</a></li>
	            		<li><a href="#">家具/家具/家装/厨具</a></li>
	            		<li><a href="#">男装/女装/童装/内衣</a></li>
	            		<li><a href="#">美妆个护/宠物</a></li>
	            		<li><a href="#">女鞋/箱包/钟表/珠宝</a></li>
	            		<li><a href="#">男鞋/运动/户外</a></li>
            	    </ul>
            	</div>
            </div>
            <div class="main_mid">
            	<div class="company_02">
            	    <h1>AD同样精彩<a href="#">更多内容</a></h1>
            		<div class="ad_img"><img src="https://img11.360buyimg.com/babel/jfs/t7027/53/2293470434/76665/c69219f/598aaf19Nb60562f2.jpg" alt="" /></div>
            		<div class="content">
            			夏日狂欢，冰凉有价。凉风拂面，夏末之际，来一番酣畅的烧烤，再畅饮几杯啤酒，呼朋引伴，谈天说地，送走盛夏，迎来清秋，别有一番滋味。香气扑鼻的
            			各式烤肉、劲爽冰凉的啤酒，精彩绝伦的热辣表演，还有各式各样的互动游戏与终极比拼，就着唯美的景观，开始一场不醉不归、激情四溢的夏末狂欢之旅。
            			炫舞表演、才艺大比拼、互动问答、啤酒PK赛、吃西瓜比赛等缤纷节目让现场热血沸腾，不少来宾玩得酣畅淋漓。最让人印象深刻的当属每场比赛最终环节，
            			来宾兴奋不已！活动当天的来宾们不仅大饱眼福，大饱耳福，更是大饱口福。
            		</div>
                </div>
                <div class="product_01">
                		<h1 class="clear">老王秒杀<a href="#"></a>总有你想不到的低价</h1>
                        <ul class="claer">
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                    	    	<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img14.360buyimg.com/n4/s130x130_jfs/t6412/11/701676082/342156/4048ef00/59439f6cN741038d2.jpg" alt="" /></a>
                        		<a href="#">维他奶 原味豆奶植物蛋白饮品 250ml*16盒 整箱</a>
                        	</li>
                        	<li>
                    	    	<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4945/261/1102029934/162908/fe806648/58eca86cN23823be6.jpg" alt="" /></a>
                    		    <a href="#">金鼎 非转基因压榨葵花籽油食用油 5.436L 责任央企 中储粮出品</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img10.360buyimg.com/n4/s130x130_jfs/t2464/95/1765031460/193349/bc39a1e6/56726e5cNee347097.jpg" alt="" /></a>
                        		<a href="#">科沃斯（Ecovacs）地宝魔钻(BFD-wwt) 扫地机器人家用吸尘器全自动</a>
                    	    </li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>                    	
                        	<li>
                    	    	<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                    		    <a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                    	    </li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                    	    	<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                        	</li>
                        	<li>
                        		<a href="#"><img src="https://img12.360buyimg.com/n4/s130x130_jfs/t4276/363/3665979051/35416/84399e4a/58e73c35N725f8319.jpg" alt="" /></a>
                        		<a href="#">斐讯K2 1200M智能双频无线路由器 WIFI穿墙 PSG1218</a>
                    	    </li>
                        </ul>
                </div>
            </div>
            <div class="main_right">
            	<div class="company_03">
            		公告
            	</div>
            	<div class="product_02">
            		促销商品
            	</div>
            </div>
        </div>
        <!-- main主体区域结束 -->
        <!-- foot区域开始 -->
        <div class="foot">
        	<div>
        		<a href="#">CSDN</a>
        		<a href="#">扣丁学堂</a>
        		<a href="#">马剑威</a>
        		<a href="#">王航</a>
        		<a href="#">iwanhgang</a>
        		<a href="#">淘宝</a>
        		<a href="#">京东</a>
        		<a href="#">Android</a>
        		<a href="#">AndroidStudio</a>
        		<a href="#">Java</a>
        		<a href="#">Kotlin</a>
        	</div>        	
        	<div>
                <a href="#">关于商城</a>
                <a href="#">合作伙伴</a>
                <a href="#">营销中心</a>
                <a href="#">廉政举报</a>
                <a href="#">联系客服</a>
                <a href="#">开放平台</a>
                <a href="#">诚征精英</a>
                <a href="#">联系我们</a>
                <a href="#">网站地图</a>
                <a href="#">法律声明</a>
                <a href="#">知识产权| © 2017-2027 Iwanghang.com 版权所有</a>
        	</div>        	
        	<div>
        		网络文化经营许可证：辽网文[2017]0888-088号|增值电信业务经营许可证：辽A1-20170808|信息网络传播视听节目许可证：1100888号|互联网违法和不良信息举报电话：0888-88889999 wh@iwanghang.com
        	</div>
        </div>
        <!-- foot区域结束 -->
    </div>
</body>
</html>

index1.html到index9.html资源压缩包下载地址：http://download.csdn.net/download/iwanghang/9964825

转载请注明出处：http://blog.csdn.net/iwanghang/article/details/77850533

欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android，请与我联系
联系方式

微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com