京东项目之头部和尾部

京东项目之头部和尾部

花了一天时间写京东首页的头部和尾部，小细节真的太多了，这里附上代码：

html部分：

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="utf-8"><!--在百度里面输入https://www.jd.com/favicon.ico可以得到京东的图标--><!--如果想用自己设计的图片做图标，可以在http://www.bitbug.net中把图片变为ico文件。--><linkrel="shortcut icon"href="favicon.ico"type="image/x-icon"/><!--引入css初始化文件--><linkrel="stylesheet"type="text/css"href="css/Noramlize.css"/><!--头部和底部结构基本相同，我们做基本的公共样式--><linkrel="stylesheet"type="text/css"href="css/base.css"/><title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title><!--description是该网站的具体描述，这个标签的功能可以使百度把这个部分显示出来--><metaname="description"content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /><metaname="Keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
</head>
<body><!--header部分 start-->
<header><divclass="w"><ahref="#"><imgsrc="images/header.jpg"width="1190"height="80"></a></div>
</header>
<!--header部分 end-->
<!--快速导航栏部分-->
<divclass="shortcut"><divclass="w"><ulclass="fl city"><li><iclass="fl0"></i><ahref="#">北京</a></li></ul><ulclass="fr"><li><ahref="#">您好，请登录</a><ahref="#"class="fl0">免费注册</a>                </li><liclass="space"></li><li><ahref="#">我的订单</a>            </li><liclass="space"></li><li><ahref="#">我的京东</a><i></i>            </li><liclass="space"></li><li><ahref="#">京东会员</a>            </li><liclass="space"></li><li><ahref="#">企业采购</a>            </li><liclass="space"></li><li><ahref="#">客户服务</a>    <i></i>        </li><liclass="space"></li><li><ahref="#">网站导航</a>    <i></i>        </li><liclass="space"></li><li><ahref="#"class="mobile">手机京东<imgsrc="images/mobile.jpg"></a>            </li></ul></div>
</div>
<!--中间头部分 start--><divclass="w middle"><divclass="logo"><h1><!--h1可以提高权重，便利于搜索引擎优化--><ahref="#"></a></h1></div><!--搜索框--><divclass="form"><inputtype="text"placeholder="扫描仪"><button><i></i></button></div><!--购物车--><divclass="shopCar"><i></i><ahref="#"class="f10">我的购物车</a><span>0</span></div><!--关键词--><divclass="hotwords"><ahref="#"class="f11">低至5折</a><ahref="#">神舟超品</a><ahref="#">1元兽药</a><ahref="#">潮童保暖</a><ahref="#">4k电视</a><ahref="#">仙人球防辐射</a><ahref="#">橄榄调和油</a><ahref="#">山姆回馈</a><ahref="#">自拍杆</a></div><!--小导航部分--><divclass="navitems"><ul><li><ahref="#"> 秒杀</a></li><li><ahref="#"> 优惠券</a></li><li><ahref="#"> 闪购</a></li><li><ahref="#"> 拍卖</a></li><liclass="space"></li><li><ahref="#"> 京东服饰</a></li><li><ahref="#"> 京东超市</a></li><li><ahref="#"> 生鲜</a></li><li><ahref="#">全球购</a></li><liclass="space"></li><li><ahref="#"> 京东金融</a></li></ul></div><!--超级日部分--><divclass="super"><ahref="#"><imgsrc="images/super.png"width="190"height="40"></a></div></div>   <!--中间头部分 end--><!--底部部分  start--><divclass="footer"><!--服务模块--><divclass="server"><divclass="w"><ul><li><h5>多</h5><p>品类齐全，轻松购物</p></li><li><h5>快</h5><p>多仓直发，极速配送好</p></li><li><h5>好</h5><p>正品行货，精致服务</p></li><li><h5>省</h5><p>天天低价，畅选无忧</p></li></ul></div></div><!--帮助模块--><divclass="w help"><divclass="fl"><dl><dt>购物指南</dt><dd><ahref="#">购物流程</a></dd><dd><ahref="#">会员介绍</a></dd><dd><ahref="#">生活旅行</a></dd><dd><ahref="#">常见问题</a></dd><dd><ahref="#">大家电</a></dd><dd><ahref="#">联系客服</a></dd></dl><dl><dt>配送方式</dt><dd><ahref="#">上门自提</a></dd><dd><ahref="#">211限时达</a></dd><dd><ahref="#">配送服务查询</a></dd><dd><ahref="#">配送费收取标准</a></dd><dd><ahref="#">海外配送</a></dd></dl><dl><dt>支付方式</dt><dd><ahref="#">货到付款</a></dd><dd><ahref="#">在线支付</a></dd><dd><ahref="#">分期付款</a></dd><dd><ahref="#">邮局汇款</a></dd><dd><ahref="#">公司转账</a></dd></dl><dl><dt>售后服务</dt><dd><ahref="#">售后政策</a></dd><dd><ahref="#">价格保护</a></dd><dd><ahref="#">退款说明</a></dd><dd><ahref="#">返修/退换货</a></dd><dd><ahref="#">取消订单</a></dd></dl><dl><dt>特色服务</dt><dd><ahref="#">夺宝岛</a></dd><dd><ahref="#">DIY装机</a></dd><dd><ahref="#">延保服务</a></dd><dd><ahref="#">京东E卡</a></dd><dd><ahref="#">京东通信</a></dd><dd><ahref="#">京东JD+</a></dd></dl></div><divclass="fr coverage"><h5>京东自营覆盖区县</h5><p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p><ahref="#">查看详情<</a></div><!--版权模块--><divclass="w copyright"><p><ahref="#">关于我们</a><span>|</span><ahref="#">联系我们</a><span>|</span><ahref="#">联系客服</a><span>|</span><ahref="#">合作招商</a><span>|</span><ahref="#">商家帮助</a><span>|</span><ahref="#">营销中心</a><span>|</span><ahref="#">手机京东</a><span>|</span><ahref="#">友情链接</a><span>|</span><ahref="#">销售联盟</a><span>|</span><ahref="#">京东社区</a><span>|</span><ahref="#">风险监测</a><span>|</span><ahref="#">隐私政策</a><span>|</span><ahref="#">京东公益</a><span>|</span><ahref="#">English Site</a><span>|</span><ahref="#">Media & IR</a></p><div><p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p><p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p><p>Copyright © 2004 - 2017  京东JD.com 版权所有<span>|</span>消费者维权热线：4006067733经营证照</p><p>京东旗下网站：京东支付<span>|</span>京东云</p></div><pclass="footicon"><ahref="#"></a><ahref="#"></a><ahref="#"></a><ahref="#"></a><ahref="#"></a><ahref="#"></a></p></div></div></div><!--底部部分  end-->
</body>
</html>

css部分：

.w{/*版心的公共类*/width:1190px;/*京东的版心的宽是1190px*/margin:0 auto;/*居中对齐*/
}body{/*整个网页的背景颜色*/background-color:#f6f6f6;
}@font-face{/*声明字体*/font-family:'icomoon';src:url('../fonts/icomoon.eot?gvsz4b');src:url('../fonts/icomoon.eot?gvsz4b#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?gvsz4b') format('truetype'),url('../fonts/icomoon.woff?gvsz4b') format('woff'),url('../fonts/icomoon.svg?gvsz4b#icomoon') format('svg');font-weight:normal;font-style:normal;
}.fl0{color:#f10215!important;/*!important是为了提高f10的权重，防止在用它时被其他的权重高的给覆盖*/
}.f10{color:#f10215;
}a{text-decoration:none;/*取消下划线*/font-size:12px;color:#999999;/*字体颜色*/
}a:hover{color:#c81623;
}/*header部分*/header{height:80px;background-color:#020000;
}.fl{float:left;
}.fr{float:right;
}
/*快速导航栏begin*/.shortcut{height:30px;background-color:#e3e4e5;border-bottom:1px solid #dddddd;line-height:30px;/*行高 ，居中*/}.city{margin-left:200px;/*外边距*/
}.shortcut li{float:left;
}.shortcut i{font-family:'icomoon';font-style:normal;/*让倾斜的不倾斜*/color:#cccccc;
}.space{/*小竖线*/width:1px;height:10px;background-color:#cccccc;margin:10px 12px 0;/*上：10 左右：12 下：0*/
}.mobile{position:relative;/*相对定位*/
}.mobile img{position:absolute;/*绝对定位*/border:1px solid #cccccc;/*设置边框*/left:-3px;top:24px;padding:3px;/*内边距*/
}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{/*消除外边距*/margin:0;padding:0;
}input,button{border:0;outline:none;/*取消轮廓边框*/
}
/*快速导航栏over*/ul{list-style:none;
}
/*中间头部分 start*/.middle{height:140px;position:relative;
}.logo{position:absolute;top:-30px;left:0;box-shadow:0px -10px 10px rgb(0,0,0,.3);
}.logo a{display:block;width:190px;height:170px;background:#fff url(../images/logo.png) no-repeat;
}
/*搜索框*/.form{width:550px;height:35px;position:absolute;top:25px;left:320px;
}.form input{width:495px;height:33px;border:1px solid #f10215;float:left;font-size:14px;padding-left:3px;
}.form button{width:50px;height:35px;background-color:#f10215;float:left;
}.form button i{font-family:'icomoon';font-style:normal;/*让倾斜的不倾斜*/color:#fff;
}
/*购物车*/.shopCar{width:188px;height:33px;border:1px solid #cccccc;position:absolute;top:25px;right:95px;background-color:#fff;color:#f10215;text-align:center;line-height:30px;
}.shopCar i{font-family:'icomoon';font-style:normal;/*让倾斜的不倾斜*/margin-right:5px;
}.shopCar span{width:15px;height:15px;background-color:#f10215;border-radius:50%;position:absolute;top:5px;right:30px;font-size:12px;color:#fff;line-height:15px;
}
/*关键词*/.hotwords{position:absolute;top:68px;left:320px;
}
/*小导航部分*/.navitems{width:770px;height:40px;position:absolute;bottom:0;left:200px;line-height:40px;
}.navitems li{float:left;margin-left:30px;
}.navitems li a{font-size:16px;font-weight:700;color:#555;
}.navitems li a:hover{color:#f10215;
}.navitems .space{margin-top:15px;margin-left:15px;margin-right:-15px;
}.super{position:absolute;right:0;bottom:10px;
}
/*中间头部分 end*/
/*底部*/.footer{height:500px;background-color:#EAEAEA;margin-top:35px;
}
/*服务部分*/.server{padding:30px 0;/*上下30，左右0*/border-bottom:1px solid #DEDEDE;overflow:hidden;/*清除浮动*/
}.server ul li{width:297px;height:43px;float:left;position:relative;line-height:43px;
}.server li h5{position:absolute;top:0;left:38px;width:36px;height:43px;background:url(../images/foot.png) no-repeat;text-indent:-999em;
}.server li:nth-child(2) h5{background-position:0 -43px;
}.server li:nth-child(3) h5{background-position:0 -86px;
}.server li:nth-child(4) h5{background-position:bottom;
}.server li p{font-weight:700;margin-left:82px;
}
/*帮助部分*/.help{height:200px;border-bottom:1px solid #DEDEDE;padding-top:25px;box-sizing:border-box;
}.help dl{width:192px;float:left;
}.help dt,
.coverage h5{height:30px;font-size:14px;color:#666666;
}.help dd{height:22px;
}
/*范围*/.coverage{width:200px;height:150px;background:url(../images/china.png) no-repeat;background-size:200px 150px;/*设置一下china.png的大小，原图太大了，放不了*/color:#666666;
}.coverage h5{padding-left:35px;
}.coverage p{font-size:12px;color:#666666;line-height:18px;width:180px;
}.coverage a{display:block;margin-top:5px;width:180px;text-align:right;
}
/*版权部分*/.copyright{margin-top:20px;float:left;text-align:center;color:#666666;font-size:12px;
}.copyright span{margin:0 10px;/*上下0，左右10px*/
}.copyright div{margin-top:20px;
}.copyright div p{line-height:22px;
}.footicon  a{display:inline-block;width:103px;height:33px;background-color:pink;/*行内块可以用text-align: center;来实现居中*/background:url(../images/f1.png) no-repeat 0 0;margin:20px 4px 0;
}.footicon  a:nth-child(2){background-position:-103px 0;
}.footicon  a:nth-child(3){background-position:0 -33px;
}.footicon  a:nth-child(4){background-position:-103px -33px;
}.footicon  a:nth-child(5){background-position:0 -66px;
}.footicon  a:nth-child(6){background-position:-103px -66px;
}

images文件：

转载于:https://www.cnblogs.com/java-7/p/7889317.html

京东项目之头部和尾部相关推荐

前端学习从入门到高级全程记录之13 （京东项目一）
学习目的本期将会学习一个京东项目,综合知识非常多.首先我们要先了解一下这个项目的知识. 1.京东项目(一) 项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景 ...
iOS-UIWebView添加头部和尾部
2019独角兽企业重金招聘Python工程师标准>>> 前言项目中使用UIWebView显示本地或者是服务器上的页面很容易,但是仅限于显示页面,可控性并不高,如果有需要在头部和尾部 ...
ListView 添加头部和尾部布局 (addHeaderView 和 addFooterView)
ListView 添加头部和尾部布局其实很简单 ,listview 暴露的有方法addHeaderView 和 addFooterView 从源码里面可以看到, addHeaderView 和 ...
R语言str_trim函数去除字符串中头部和尾部的空格
R语言str_trim函数去除字符串中头部和尾部的空格目录 R语言str_trim函数去除字符串中头部和尾部的空格 #导入包和库 #仿
R语言head函数和tail函数获取dataframe、列表list、向量vector的头部和尾部数据：tail提取数据对象的尾部数据、head提取数据对象的头部数据、默认6条数据、自定义设置返回条数
R语言head函数和tail函数获取dataframe.列表list.向量vector的头部和尾部数据:tail提取数据对象的尾部数据.head提取数据对象的头部数据.默认6条数据.自定义设置返回条数 ...
vue引用公用的头部和尾部文件。
我创建了一个header.vue和fotter.vue,用来做于网站的头部和尾部,每个页面都需要引用这两个,我以组件的方式,来引用这样只需要添加注册的组件就可以了. 第一步.在components文件 ...
如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）
文章目录如何实现多个.html静态页,引用同一个header.html和footer.html文件? HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件? 首先 ...
php中连接网页头尾部,网页共用头部和尾部的部分方法
同一网站的头部和尾部通常是相同的,所有网页只要共用头部和尾部就可以使网页的维护变得方便许多,只需要修改一个页面就可以使全部网页的头部和尾部改变了,在这里我尝试使用与课程相关的几种不同方法来实现: 方法 ...
使用ffmpeg剪辑视频【删除视频头部，尾部，中间，视频拼接，获取视频指定时间截图】
使用ffmpeg剪辑视频[删除视频头部,尾部,中间,视频拼接,获取视频指定时间截图] 引入pom <dependency><groupId>org.bytedeco</g ...

京东项目之头部和尾部

京东项目之头部和尾部相关推荐

最新文章

热门文章