您的位置：首页 > 职场人生

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

2017-09-05 13:54 796 查看

转载请注明出处：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：

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：

<!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">

<div class="head">

<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>



<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>



<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>



<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>


<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>

</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

觉得博文有用，请点赞，请评论，请关注，谢谢！~

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： WEB HTML CSS Shop Demo

相关文章推荐

新的分享

章节导航