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>
H5学习小结——div+css创建电子商务静态网页的更多相关文章
- CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- CSS学习笔记--Div+Css布局实战(入门)
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华
以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- 网页DIV+CSS布局与ifame传统布局对比
通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
随机推荐
- TCP状态转换图详解
以下对几个关键的中间状态进行说明: 三次握手: LISTEN:表示服务器的某个SOCKET处于监听状态,可以进行连接了. SYN_SENT:表示客户端的某个SOCKET与服务器进行connect时,首 ...
- Android 自定义title 之Action Bar
Android 自定义title 之Action Bar 2014-06-29 飞鹰飞龙... 摘自 博客园 阅 10519 转 25 转藏到我的图书馆 微信分享: Action Ba ...
- JavaScript设计模式——前奏（封装和信息隐藏）
前面一篇讲了js设计模式的前奏,包括接口的讲解.. 三:封装和信息隐藏: 信息隐藏用来进行解耦,定义一些私有的数据和方法. 封装是用来实现信息隐藏的技术,通过闭包实现私有数据的定义和使用. 接口在这其 ...
- 关于oracle ORA-28001的解决方法
今天发现客户的机器上的系统登录不上了,并且提示如下情况: 发现原来Oracle11G的新特性所致, Oracle11G创建用户时缺省密码过期限制是180天(即6个月), 如果超过180天用户密码未做修 ...
- 【bzoj2440】【bzoj3994】莫比乌斯反演学习
哇..原来莫比乌斯代码这么短..顿时感觉逼格-- 写了这道题以后,才稍稍对莫比乌斯函数理解了一些 定理:和是定义在非负整数集合上的两个函数,并且满足条件,那么我们得到结论 在上面的公式中有一个函数,它 ...
- NSDictionary、NSMutableDictionary及其枚举器的用法
.不可变词典NSDictionary 字典初始化 NSNumber *numObj = [NSNumber numberWithInt:]; 以一个元素初始化 NSDictionary *dic = ...
- Redis 安装为Window服务
参考: http://www.cnblogs.com/zhoub/p/3841222.html 关键命令 redis-server.exe –service-install conf/redis.co ...
- mac 快捷键大全
1.control+space 可以使用 spotlight搜索,用于快速找到所需要的文件 2.我尝试使用android studio 提示的快捷键来进行写代码,发现自己按照它的提示操作没有成功,原因 ...
- BZOJ2629 : binomial
根据Lucas定理,等价于在$P$进制下每一位分别求组合数最后乘积模$P$. 因为答案为$0$的并不好算,所以可以考虑用$n+1$减去其它所有的答案. 那么每一位的组合数都不能是$0$,那么这就保证了 ...
- BZOJ2679 : [Usaco2012 Open]Balanced Cow Subsets
考虑折半搜索,每个数的系数只能是-1,0,1之中的一个,因此可以先通过$O(3^\frac{n}{2})$的搜索分别搜索出两边每个状态的和以及数字的选择情况. 然后将后一半的状态按照和排序,$O(2^ ...