H5学习小结——div+css创建电子商务静态网页
使用Sublime Text软件编写电子商务类网站静态形式首页
经过差不多一星期的学习，基本掌握了div+css的用法之后，开始了实战练习。首先要做的就是要练习一下一般电子商务网页的编写，我做的是下图效果的网页，是一个关于台湾特产的网页。如图：
拿到图片之后，首先要分析一下整个网页的结构，上图所示的网页稍微分析一下就可以看出具体分为四个部分，为头部header，中间的广告ad_img，中间的主体内容main和底部的footer，当然具体的还可以分成很多部分，这里主要看个人的习惯，所以在这就不一一写出来了，具体的会在后面的代码部分展示出来。
个人感觉写代码不怎么难，主要是你做一个网页的时候用到的方法和思路，思路正确的话你的速度会大大的增加，这里我可是吃了很多的教训，由于急于完成这个项目，我就思考了一下具体的布局就开始写代码了，闷头苦写了半天之后，突然发现和要求那真是相差十万八千里，于是又开始埋头苦改，改了半天也没改出要求的那种效果。多亏了一位大神的指点，他说在拿到项目之后不要急着去做，而是要分析一下具体的布局和思路，把大致的轮廓做出来，然后再一步一步的写。还真是，第二遍重新做的时候，速度大大的加快，不到一会就把这个网页做出来了，收获蛮多的，以后继续加油。！下面为具体的代码部分，网页的各种素材可以去我的百度网盘下载：网页资料下载
css样式部分
*{margin:0px;padding: 0px;
}
html,body{font-family: "微软雅黑";
font-size: 14px;
text-decoration: none;
}
.all{
width: 100%;
min-width: 1000px;
}
.header{
width: 100%;
border-bottom: 4px solid #176fbb;
}
.header .head{
width: 1000px;
margin:0 auto;
overflow: hidden;
}
.head #logo{
width: 140px;
height: 113px;
float: left;
background:url(images/logo.png) 8px 14px no-repeat;
}
.head #indexlogo{
width: 21px;
height: 21px;
float: left;
margin-left: 56px;
margin-top: 83px;
background-image: url(images/indexlogo.png);
}
.head #phone{
width: 141px;
height: 22px;
float: left;
margin-left: 196px;
margin-top: 19px;
background-image: url(images/telephone.png);
}
.head_nav{
float: left;
height: 19px;
list-style: none;
margin-top: 20px;
margin-left: 14px;
}
.head .head_nav a{
color: #3d3d3d;
line-height: 19px;
text-align: center;
text-decoration: none;
}
.head_nav li{
border-left:2px solid black;
float: left;
padding:0 15px;
}
.head_nav .li3{
padding: 0 14px 0 0;
}
.head_nav .li3 img{
float: left;
margin-left: 15px;
margin-top: -5px;
}
.head_nav .li3 a{
float: left;
margin-left: 7px;
}
.head_nav .li3 span{
font-size: 12px;
color:white;
float: left;
line-height: 19px;
margin-left: -19px;
}
.head .search{
float: left;
border:1px solid black;
width: 181px;
height: 27px;
margin-top: 16px;
border-radius: 0px 14px 14px 0px;
}
.head .search img{
float: right;
margin-top: 4px;
margin-right: 10px;
}
.head .search .input1{
width: 146px;height: 27px;outline: 0;
border:0;border-right: 1px solid black;
}
.headmenu{
font-weight: bold;
margin-top: 42px;
margin-left: 38px;
height:30px;
list-style: none;
float: left;
}
.headmenu li{
float: left;
margin-right: 37px;
height:21px;
}
.headmenu li a{
font-size: 18px;
line-height: 21px;
color: #3d3d3d;
text-decoration: none;
}
.headmenu li a:hover{
font-size: 18px;
display: block;
line-height: 21px;
color: rgb(23,111,187);
}
.adress{
height: 53px;
width: 1000px;
margin:0 auto;
}
.adress .adress1{
width: 152px;
height: 53px;
text-align: center;
line-height: 53px;
float: left;
}
.adress .adress1 a{
color: #3d3d3d;
text-decoration: none;
}
.adress .adress1 a:hover{
color: blue;
text-decoration: none;
}
.image{
width: 100%;
height: 350px;
background: url(images/ad.png) center center no-repeat;
}
.gift_img{
width: 1000px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: 68px;
}
.gift_img .img{
width: 155px;
height: 38px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
.main{
width: 1000px;
height: 619px;
margin:0px auto;
border-bottom: 1px solid #898989;
}
.main #main1,.main #main2,.main #main3,.main #main4,.main #main5,.main #main6{
background-color:rgb(242,241,241);
width: 485px;
height: 160px;
}
.main #main1,.main #main3,.main #main5{
float: left;
}
.main #main2,.main #main4,.main #main6{
float: right;
}
.main #main3,.main #main4,.main #main5,.main #main6{
margin-top: 30px;
}
.main .text{
width: 198px;
color: #3d3d3d;
float: right;
margin-top: 27px;
margin-right: 30px;
}
.main .text .span1{
font-weight: bold;
width: 198px;
font-size: 16px;
line-height: 16px;
color: #3d3d3d;
display: block;
}
.main .text .span2{
/* font-weight: bold;*/
width: 198px;
font-size: 14px;
line-height: 14px;
color: #3d3d3d;
display: block;
margin-top: 17px;
}
.main .text .span3{
width: 58px;
font-size: 14px;
line-height: 12px;
color: #3d3d3d;
margin-top: 35px;
float: left;
}
.main .text .span4{
width: 58px;
font-size: 12px;
line-height: 12px;
color: #3d3d3d;
margin-left: 30px;
margin-top: 35px;
float: left;
}
.main .text .span3 a{
width: 16px;
font-size: 12px;
line-height: 12px;
float: left;
margin-top: -2px;
}
.main .text .span4 a{
width: 16px;
font-size: 12px;
line-height: 12px;
float: left;
margin-top: -2px;
}
.main .number{
width: 1000px;
height: 73px;
float: left;
}
.main .number ul{
list-style: none;
margin-left: 371px;
margin-top:30px;
width: 280px;
text-align: center;
line-height: 20px;
font-size: 12px;
}
.main .number ul .li1{
float: left;
margin-right: 14px;
}
.main .number ul .li2,.main .number ul .li6{
float: left;
margin-right: 8px;
font-size: 12.13px;
}
.main .number ul .li3{
float: left;
margin-right: 8px;
}
.main .number ul .li4{
float: left;
margin-right: 11px;
font-size: 12.13px;
}
.main .number ul .li5{
float: left;
margin-right: 11px;
background-color: #666666;
width: 30px;
height: 20px;
color: white;
}
.main .number ul .li7{
float: left;
margin-right: 10px;
}
.main .number ul .li8{
float: left;
margin-right: 12px;
font-size: 12.13px;
}
.main .number ul .li9{
float: left;
margin-right: 0px;
}
.footer{
margin-top: 30px;
width: 100%;
border-bottom: 1px solid #fff;
background: #023c4d;
}
.footer .con{
height: 178px;
width: 1000px;
margin: 0 auto;
}
.footer .con .ul1{
width: 75px;
float: left;
margin-left: 102px;
margin-top: 22px;
}
.footer .con .ul2,.footer .con .ul3,.footer .con .ul4{
width: 75px;
float: left;
margin-left: 78px;
margin-top: 22px;
}
.footer .ul1 ul,.footer .ul2 ul,.footer .ul3 ul,.footer .ul4 ul{
width: 75px;
color: white;
list-style: none;
}
.footer .ul1 ul li,.footer .ul2 ul li,.footer .ul3 ul li{
font-size: 14px;
margin-top: 15px;
line-height: 14px;
}
.footer .ul1 ul .li1,.footer .ul2 ul .li1,.footer .ul3 ul .li1,.footer .ul4 ul .li1{
font-size: 18px;
margin-top: 0px;
line-height: 18px;
}
.footer .ul4 ul li{
margin-top: 18px;
}
.footer .con .ul5{
width: 172px;
margin-left: 95px;
margin-top: 22px;
float: left;
}
.footer .con .ul5 ul{
width: 172px;
list-style: none;
color: rgb(255,255,255);
}
.footer .con .ul5 .li1{
font-size: 28px;
line-height: 28px;
font-weight: bold;
}
.footer .con .ul5 .li2{
font-size: 18px;
line-height: 18px;
margin-top: 15px;
letter-spacing: 5px;
}
.footer .con .ul5 .li3{
font-size: 18px;
line-height: 18px;
margin-top: 12px;
}
.footer .con .ul5 .li4{
margin-top: 22px;
height: 23px;
}
.footer_copy{
width: 100%;
background: #023c4d;
}
.copy{
margin:0 auto;
width: 1000px;
height: 57px;
text-align: center;
line-height: 57px;
color: #d0d0d0;
}
html主体部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伴手礼</title>
<link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<div class="all">
<div class="header">
<div class="head">
<div id="logo"></div>
<div id="indexlogo"></div>
<div id="phone"></div>
<!-- 登录注册 -->
<ul class="head_nav">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li class="li3"><img src="images/paggage.png" alt="pag"><span>12</span><a href="#">行李箱</a></li>
</ul>
<div class="search">
<input class="input1" type="text" name="" value="">
<a href="###"><img src="images/serch.png"></a>
</div>
<!-- 菜单 -->
<ul class="headmenu">
<li><a href="#" target="_blank">第一次</a></li>
<li><a href="#" target="_blank">目的地</a></li>
<li><a href="#" target="_blank">自定行程</a></li>
<li><a href="#" target="_blank">游记</a></li>
<li><a href="#" target="_blank">特产</a></li>
<li><a href="#" target="_blank">优惠</a></li>
<li><a href="#" target="_blank">环岛巴士</a></li>
</ul>
</div>
</div>
<!-- 所在地址 -->
<div class="adress">
<p class="adress1"><a href="###">首页</a> > <a href="###">特产</a> > <a href="###">伴手礼</a></p>
</div>
<!-- 广告图 -->
<div class="image"></div>
<!-- 伴手礼logo -->
<div class="gift_img">
<div class="img"><a href=""><img src="images/gift.png" alt="gift"></a></div>
</div>
<!-- 主要内容 -->
<div class="main">
<div id="main1">
<a href="#"><img src="images/photo1.png" alt="photo1"></a>
<div class="text">
<span class="span1">浓香的奶味和果仁的牛轧糖</span>
<span class="span2">好吃不粘牙，而且越嚼越香，而且是不含香料和色素...</span>
<span class="span3"><a href="###"><img src="images/xin.png" alt="xin"></a> 1168</span>
<span class="span4"><a href="###"><img src="images/chat.png" alt="chat"></a> 1168</span>
</div>
</div>
<div id="main2">
<a href="#"><img src="images/photo2.png" alt="photo2"></a>
<div class="text">
<span class="span1">浓香的奶味和果仁的牛轧糖</span>
<span class="span2">好吃不粘牙，而且越嚼越香，而且是不含香料和色素...</span>
<span class="span3"><a href="###"><img src="images/xin.png" alt="xin"></a> 1168</span>
<span class="span4"><a href="###"><img src="images/chat.png" alt="chat"></a> 1168</span>
</div>
</div>
<div id="main3">
<a href="#"><img src="images/photo3.png" alt="photo3"></a>
<div class="text">
<span class="span1">浓香的奶味和果仁的牛轧糖</span>
<span class="span2">好吃不粘牙，而且越嚼越香，而且是不含香料和色素...</span>
<span class="span3"><a href="###"><img src="images/xin.png" alt="xin"></a> 1168</span>
<span class="span4"><a href="###"><img src="images/chat.png" alt="chat"></a> 1168</span>
</div>
</div>
<div id="main4">
<a href="#"><img src="images/photo4.png" alt="photo4"></a>
<div class="text">
<span class="span1">浓香的奶味和果仁的牛轧糖</span>
<span class="span2">好吃不粘牙，而且越嚼越香，而且是不含香料和色素...</span>
<span class="span3"><a href="###"><img src="images/xin.png" alt="xin"></a> 1168</span>
<span class="span4"><a href="###"><img src="images/chat.png" alt="chat"></a> 1168</span>
</div>
</div>
<div id="main5">
<a href="#"><img src="images/photo1.png" alt="photo5"></a>
<div class="text">
<span class="span1">浓香的奶味和果仁的牛轧糖</span>
<span class="span2">好吃不粘牙，而且越嚼越香，而且是不含香料和色素...</span>
<span class="span3"><a href="###"><img src="images/xin.png" alt="xin"></a> 1168</span>
<span class="span4"><a href="###"><img src="images/chat.png" alt="chat"></a> 1168</span>
</div>
</div>
<div id="main6">
<a href="#"><img src="images/photo1.png" alt="photo6"></a>
<div class="text">
<span class="span1">浓香的奶味和果仁的牛轧糖</span>
<span class="span2">好吃不粘牙，而且越嚼越香，而且是不含香料和色素...</span>
<span class="span3"><a href="###"><img src="images/xin.png" alt="xin"></a> 1168</span>
<span class="span4"><a href="###"><img src="images/chat.png" alt="chat"></a> 1168</span>
</div>
</div>
<!-- 所在页数 -->
<div class="number">
<ul >
<li class="li1">上一页</li>
<li class="li2">1</li>
<li class="li3">.....</li>
<li class="li4">12</li>
<li class="li5">13</li>
<li class="li6">14</li>
<li class="li7">.....</li>
<li class="li8">40</li>
<li class="li9">下一页</li>
</ul>
</div>
</div>
<div class="footer">
<div class="con">
<div class="ul1">
<ul>
<li class="li1">关于遛湾</a></li>
<li>公司简介</li>
<li>联系我们</li>
<li>诚聘英才</li>
<li>网站地图</li>
</ul>
</div>
<div class="ul2">
<ul>
<li class="li1">帮助中心</li>
<li>赴台属性</li>
<li>联系我们</li>
<li>遛湾玩法</li>
<li>常见问题</li>
</ul>
</div>
<div class="ul3">
<ul>
<li class="li1">网站条款</li>
<li>服务条款</li>
<li>免责声明</li>
</ul>
</div>
<div class="ul4">
<ul>
<li class="li1">网站条款</li>
<li><a href="#"><img src="images/weichat.png" alt="weichat"></a></li>
</ul>
</div>
<div class="ul5">
<ul>
<li class="li1">400 820 8820</li>
<li class="li2">周一至周日</li>
<li class="li3">9:00~20:00</li>
<li class="li4"><a href="#"><img src="images/ask.png" alt="ask"></a></li>
</ul>
</div>
</div>
</div>
<div class="footer_copy">
<div class="copy">Copyright © 2013-2014 www.6waner.cn All Right Reserved. 京ICP备11</div>
</div>
</div>
</body>
</html>