H5学习小结——div+css创建电子商务静态网页
来源：互联网 发布：教师远程网络培训 编辑：程序博客网 时间：2024/06/04 20:09
使用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>
1 0
- H5学习小结——div+css创建电子商务静态网页
- DIV+CSS学习小结
- CSS+DIV网页样式与布局——CSS初探
- DIV+CSS网页制作布局技巧学习
- 网页学习之div，span，CSS
- 第二部分：html div+css（静态网页）（一）
- 第二部分：html div+css（静态网页）（二）
- html静态网页制作中div+css的浅运用
- 精通CSS+DIV网页样式与布局——基础
- CSS+DIV网页样式与布局——滤镜
- 【CSS+DIV网页样式与布局】——基础知识总结
- H5学习之22 CSS-导航栏的创建
- DIV+CSS创建三栏网页布局方法介绍
- Css+Div布局小结
- DIV+CSS小结
- css与div小结
- CSS+DIV小结
- CSS+DIV小结
- 在VS中添加lib库的三种方法
- Linux系统命令行常识问答2
- Thinking in Java——第八章-多态
- java 死锁产生原因及解锁
- 期末1.0比赛
- H5学习小结——div+css创建电子商务静态网页
- Retrofit 2中@Path 和@Query的区别
- 初识reactJS的组件化开发(一)：简单封装
- U-BOOT-1.1.6-note-文件结构分析注释
- POJ 2553——The Bottom of a Graph（强连通分量）
- PAT-B 1044. 火星数字
- Java设计模式之单例模式
- 脉搏信号检测与处理系统
- 算法的时间复杂度
