Android程序员学WEB前端(9)-CSS(4)-商城首页Demo-Sublime
来源：互联网 发布：火影忍者ol先攻的算法 编辑：程序博客网 时间：2024/05/21 14:04
转载请注明出处：http://blog.csdn.net/iwanghang/article/details/77850533
觉得博文有用，请点赞，请评论，请关注，谢谢！~
index1.html到index9.html资源压缩包下载地址：http://download.csdn.net/download/iwanghang/9964825
觉得博文有用，请点赞，请评论，请关注，谢谢！~
觉得博文有用，请点赞，请评论，请关注，谢谢！~
跟着视频教程练习了一下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
沈阳或周边城市公司有意开发Android，请与我联系
联系方式
微信：iwanghang
QQ：413711276
邮箱：iwanghang@qq.com
觉得博文有用，请点赞，请评论，请关注，谢谢！~
阅读全文
1 0
- Android程序员学WEB前端(9)-CSS(4)-商城首页Demo-Sublime
- Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
- Android程序员学WEB前端(13)-JavaScript(4)-Bom-Sublime
- Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
- Android程序员学WEB前端(10)-JavaScript(1)-基础-Sublime
- Android程序员学WEB前端(11)-JavaScript(2)-函数-Sublime
- Android程序员学WEB前端(4)-HTML(4)-注册页面-Sublime
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
- Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
- Android程序员学WEB前端(3)-HTML(3)-表单嵌套-Sublime
- Android程序员学WEB前端(5)-HTML(5)-框架集-Sublime
- Android程序员学WEB前端(12)-JavaScript(3)-正则表达式-Sublime
- DIV+CSS实现商城首页
- 零基础学WEB前端-CSS
- 零基础学WEB前端-CSS
- 零基础学WEB前端-CSS
- web前端初学者必学的css样式
- 博客收藏
- 01设计原则--七大设计原则
- 对于Javascript 执行上下文的理解
- 数据结构解析与归纳
- ssm框架mysql数据库报错，jdbc.properties数据库配置问题
- Android程序员学WEB前端(9)-CSS(4)-商城首页Demo-Sublime
- Swing用户界面组件 文本输入练习
- 【Java源码】PriorityQueue源码剖析及其应用
- R语言做岭回归
- 360浏览器，qq浏览器等登录页输入账号密码，在页面内再次遇见有密码框的地方会自动填充的解决办法。
- TCP之种种连接异常
- 可查询最值
- Unable to execute dex：Multiple dex files define XXXXX
- 在IoC容器中装配Bean（精通Spring+4.x++企业应用开发实战 四）
