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行业企业需求最多的人才 结合最新的 ...
随机推荐
- 类模板Queue的实现
#include <iostream> #include <vector> using namespace std; template <class Type> c ...
- strcmp函数使用总结
Action() { /********************************* * Author:旺仔 * object:strcmp * date:2015-12-09 * fuc:我输 ...
- JAVA 加减乘除
package homework; import javax.swing.JOptionPane; public class suanshu { public static void main(Str ...
- Angular JS 学习之 Scope作用域
1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...
- css之overflow
也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究 ...
- 使用Genymotion安装APK出现错误INSTALL_FAILED_CPU_ABI_INCOMPATIBLE的解决办法
当我们安装好Genymotion后,把Android运用部署到上面调试时,console控制台会报错:Installation error: INSTALL_FAILED_CPU_ABI_INCOMP ...
- 本BLOG简介（内有一道UVa524素数环进阶版）【B001】
[B001]Hi,大家好,今天我的博客第一天开通,今天奉上开博题,出自首都师师范大学附属中学OJ(题号未知在练习场中)原题为UVa524,题目要求如下: [难度B]—————————————————— ...
- POJ3308 Paratroopers（最小割/二分图最小点权覆盖）
把入侵者看作边,每一行每一列都是点,选取某一行某一列都有费用,这样问题就是选总权最小的点集覆盖所有边,就是最小点权覆盖. 此外,题目的总花费是所有费用的乘积,这时有个技巧,就是取对数,把乘法变为加法运 ...
- 【BZOJ3631】松树的新家 树链剖分
BZOJ3631 松树的新家 Description 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他 ...
- datanode启动不了
报如下异常:*org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.hdfs.server.protocol.DisallowedDatano ...