1200字范文 > HTML+CSS京东商城静态页面实现（1）

HTML+CSS京东商城静态页面实现（1）

时间：2023-07-14 17:30:36

都是自己找的素材源，有些字体图标实在懒得找了，就没有改。只是完成了一部分，后续还会不断改进。

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>京东官网多快好省只为品质生活</title><meta name="description" content="京东-专业综合网上购物商城，销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、旅游等13大品类。京东PLUS会员，免费体验30天！京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！" /><meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" /><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/base.css" /><link rel="stylesheet" href="css/index.css" /></head><body><header><div class="w"><a href="#"><img src="images/guangao.jpg"></a></div></header> <div class="shortcut"><div class="w"><ul class="fl city"><li><a href=""><i class="f10"></i>北京</a></li></ul><ul class="fr"><li><a href="">你好，请登录</a><a href="" class="f10">免费注册</a></li><li class="space"></li><li><a href="">我的订单</a></li><li class="space"></li><li><a href="">我的京东<i></i></a></li><li class="space"></li><li><a href="">京东会员</a></li><li class="space"></li><li><a href="" class="f10">企业采购<i></i></a></li><li class="space"></li><li><a href="">客户服务<i></i></a></li><li class="space"></li><li><a href="">网站导航<i></i></a></li><li class="space"></li><li><a href="" class="mobile">手机京东<img src="images/mobile_qrcode.png"></a></li></ul></div></div><div class="w middle"><div class="logo"><h1><a href=""></a></h1></div><div class="form"><input type="text" placeholder="保险箱"/><button><i></i></button></div><div class="shopCart"><i></i><a href="#">我的购物车</a><span>0</span></div><div class="hotWords"><a href="#">奶粉</a><a href="#">食用油</a><a href="#">一叶子</a><a href="#">荣耀</a><a href="#">拉杆箱</a><a href="#">奶昔</a><a href="#">零食</a><a href="#">空调</a><a href="#">饮料</a></div><div class="navitems"><ul><li><a href="#">秒杀</a></li><li><a href="#">优惠券</a></li><li><a href="#">PLUS会员</a></li><li><a href="#">闪购</a></li><li class="space"></li><li><a href="#">拍卖</a></li><li><a href="#">京东时尚</a></li><li><a href="#">京东超市</a></li><li><a href="#">京东生鲜</a></li><li class="space"></li><li><a href="#">海囤全球</a></li><li><a href="#">京东金融</a></li></ul></div></div><div class="w gird"><div class="girdCol1 fl"><ul><li><a href="#">家用电器</a></li><li><a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">电脑</a>/<a href="#">办公</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li><li><a href="#">家具</a>/<a href="#">运营商</a>/<a href="#">数码</a></li></ul></div><div class="girdCol2 fl"><div class="girdCol2t"><a href="#" class="banner"><img src="images/捕获拷贝.png"></a><a href="#" class="arrowL"><</a><a href="#" class="arrowR">></a><ul class="circle"><li></li><li></li><li class="current"></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="girdCol2b"><div><img src="images/390 130 2.png"></div><div><img src="images/390 130.png"></div></div></div><div class="girdCol3 fl"><div class="login"><div class="loginT">Hi~欢迎来到京东！<br /><a href="#">登录</a><a href="#">注册</a></div><div class="loginB"><a href="#">新人福利</a><a href="#">PLUS会员</a></div></div><div class="news"><div class="newsT"><a href="#" class="cuxiao">促销</a><a href="#" class="gg">公告</a><a href="#" class="more">更多</a><div></div></div><div class="newsB"><ul><li><a href="#">爆款抢小米手环</a></li><li><a href="#">爆款抢小米手环</a></li><li><a href="#">爆款抢小米手环</a></li><li><a href="#">爆款抢小米手环</a></li></ul></div></div><div class="expand"><ul><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li><li><a href="#"><i></i><span>话费</span></a></li></ul></div></div></div><footer> <div class="service"><div class="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><div class="w help"><div class="fl"><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl></div><div class="fr coverage"><h5>京东自营覆盖区县</h5><p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p><a href="#">查看详情></a></div></div><div class="w copyright"><p><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">联系客服</a><span>|</span><a href="#">合作招商</a><span>|</span><a href="#">商家帮助</a><span>|</span><a href="#">营销中心</a><span>|</span><a href="#">手机京东</a><span>|</span><a href="#">友情链接</a><span>|</span><a href="#">销售联盟</a><span>|</span><a href="#">京东社区</a><span>|</span><a href="#">风险监测</a><span>|</span><a href="#">隐私政策</a><span>|</span><a href="#">京东公益</a><span>|</span><a href="#">English Site</a><span>|</span><a href="#">Media & IR</a></p><div><p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性--0008<span>|</span>新出发京零字第大120007号</p><p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证|网络文化经营许可证京网文[]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p><p>Copyright © - 京东版权所有<span>|</span>消费者维权热线：4006067733经营证照<span>|</span>(京)网械平台备字()第00003号<span>|</span>营业执照</p></div><p class="footerIcon"><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></p></div></footer></body> </html>

index.css

/*************** 日期：/07/09* 作者：强* 用途：大的结构* other：无* version ：1.0*/ .gird {height: 480px;}.girdCol1 {width: 190px;height: 100%;background-color: #6e6568;/*padding-top: 10px;*/color: #fff;/*不是给字的，给竖线的*/}.girdCol1 a {color: #fff;margin: 0 3px;font-size: 12px;/*是给链接文字的*/}.girdCol1 a:hover {color: #f10215;}.girdCol1 ul {padding: 10px 0;}.girdCol1 ul li {height: 26px;padding-left: 12px;/*这里只能用padding的原因是，li有一个点击底部变色的效果，如果用margin，就无法实现*/line-height: 26px;}.girdCol1 ul li:hover {background-color: #9c9698;}/*中间banner图*/.girdCol2 {width: 790px;height: 100%;margin: 0 10px;}.girdCol2t .banner {width: 790px;height: 340px;}.girdCol2b img {width: 390px;height: 130px;}.girdCol2b div {margin-top: 10px;float: left;}.girdCol2b div:nth-child(2) {margin-left: 10px;float: right;}.girdCol2t {position: relative;}.arrowL,.arrowR {position: absolute;width: 30px;height: 60px;background: rgba(0,0,0,0.3);top: 50%;transform: translateY(-30px);font-size: 30px;color: rgba(255,255,255,0.3);/*被初始化了，显示不出来*/text-align: center;line-height: 60px;}.arrowR {right: 0;}.circle {width: 167px;height: 20px;background: rgba(255,255,255,0.3);position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);border-radius: 10px;padding: 8px;}.circle li {width: 12px;height: 12px;border-radius: 50%;background-color: #fff;float: left;margin: 4px;cursor: pointer;}.circle .current {background-color: #f10215;}/*中间banner图结束*//*右边模块*/.girdCol3 {width: 190px;height: 100%;}.login {height: 85px;border-bottom: 1px solid #ccc;background-color: #fff;padding: 15px;}.loginT {width: 95px;height: 60px;line-height: 20px;white-space: nowrap;/*强制一行内显示*/overflow: hidden;/*溢出隐藏*/text-overflow: ellipsis;/*超出的部分隐藏*/font-size: 12px;color: #666;padding-left: 60px;/*这里给padding把文字挤过来*/} .loginB a {display: inline-block;/*反正需要固定宽高，所以用行内快比较方便*/width: 70px;height: 20px;line-height: 20px;border: 2px solid #f10215;margin-right: 4px;text-align: center;color: #f10215;}.loginB a:hover {background-color: #f10215;color: #fff;}.news {height: 154px;border-bottom: 1px solid #ccc;background-color: #fff;padding: 10px;/*整体内边距10px，寄文字*/box-sizing: border-box;}.newsT {height:19px;border-bottom: 1px solid #ccc;position: relative;}.newsT a {float: left;/*因为不需要固定宽高，主要是设定左右边距，所以需要用浮动就行*/}.newsT .cuxiao {width: 38px;border-right: 1px solid #ccc;}.newsT .gg {margin-left: 15px;}.newsT .more {float: right;}.newsT div {height: 2px;width: 28px;background-color: #f10215;position: absolute;bottom: -1px;left: 0;} .newsB ul {padding-top: 15px;}.newsB ul li {height: 23px;line-height: 23px;}.expand {height: 210px;background-color: #fff;overflow: hidden;/*ul的宽度大了，所以溢出的部分要隐藏*/}.expand ul {width: 195px;/*ul的父盒子继承了girdCol3的宽度，宽度装不下四个小li的宽度，所以让ul的宽度大一点*/}.expand li {width: 47px;height: 70px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;float: left;}.expand li a {display: block;padding-top: 15px;text-align: center;}.expand li i {background: url(../images/no_login.jpg) no-repeat;/*应该是精灵图的地址*/display: block;margin: 0 auto;margin-bottom: 6px;width: 18px;height: 23px;}/*水平拉出的效果可以设置2盒子，被拉出的盒子只有在鼠标悬停的时候，盒子宽度才为变为正常*//*47和69*//*newsT newsB*//*类名login 高115px news 高154px expand 高209px*//*分成三列类名gridCol*/

base.css

/*************** 日期：/06/30* 作者：强* 用途：大的结构* other：无* version ：1.0*//*公共样式*//* 公共版心*/body {background-color: #f0f3ef;}.w {width: 1190px;margin:0 auto;}@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?31z5pv');src: url('../fonts/icomoon.eot?31z5pv#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?31z5pv') format('truetype'),url('../fonts/icomoon.woff?31z5pv') format('woff'),url('../fonts/icomoon.svg?31z5pv#icomoon') format('svg');font-weight: normal;font-style: normal;}/*公共浮动*/.fl {float: left;}.fr {float: right;}.shortcut a {color: #999999;font-size: 12px;}.shortcut a:hover {color: #f10215;}/*header部分开始*/header {background-color: #000000;height: 80px;}/*header部分结束*//*快速导航栏开始*/.shortcut {height: 30px;background-color: #e3e4e5;line-height: 30px;border-bottom: 1px solid #dededf;}.city {margin-left: 210px;}.shortcut i {font-family: 'icomoon';}.shortcut li {float: left;}.space {width: 1px;height: 10px;background-color: #ccc;margin: 10px 12px 0;}.shortcut .f10 {color: #f10215;}.mobile {position: relative;}.mobile img {position: absolute;top: 23px;left: -3px;border: 1px solid #ccc;padding: 3px;}/*快速导航栏结束*//*中间部分开始*/.middle {height: 140px;position: relative;}.logo {position: absolute;top: -30px;left: 0;box-shadow: 0px -10px 10px rgba(0,0,0,0.3);}.logo a {display: block;width: 190px;height: 170px;background: #fff url(../images/logo.gif) no-repeat;}/*搜索框*/.form {width: 550px;height: 35px;background-color: pink;position: absolute;top: 25px;left: 320px;}.form input {width: 500px;height: 35px;border: none;float: left;}.form button {width: 50px;height: 35px;background-color: #f10215;border: none;float: left;}.form i {font-family: 'icomoon';color: #fff;line-height: 35px;}.shopCart {position: absolute;background-color: #fff;top: 25px;right: 95px;width: 190px;height: 35px;color: #f10215;line-height: 35px;text-align: center;}.shopCart i {font-family: 'icomoon';left: 54px;font-size: 16px;margin-right: 5px;}.shopCart span {position: absolute;width: 15px;height: 15px;background-color: #f10215;border-radius: 50%;color: #fff;top: 7px;right: 34px;line-height: 15px;text-align: center;}/*关键热词*/.hotWords {position: absolute;top: 65px;left: 320px;}.hotWords a {color: #999999;margin-right: 15px;}/*中间导航*/.navitems {width: 790px;height: 30px;position: absolute;bottom: 0;left: 225px;line-height: 30px;}.navitems li{float: left;margin-right: 30px;}.navitems li a {font-size: 14px;color: #333333;}.navitems a:hover {color: #f10215;}.navitems .space {/*margin-top: 9px;margin-left: -12px;margin-right: 12px;*/margin: 9px 15px 0 -15px;}/*中间部分结束*//*页面底部开始*/ .footer {height: 500px;margin-top: 35px;}.footer a {color: #666;}/*服务模块*/.service {border-bottom: 1px solid #DEDEDE;padding: 30px 0;/*测量得来,这样就可以水平居中*/overflow: hidden;/*清除浮动*/}.service li {width: 297.5px;height: 43px;float: left;line-height: 43px;position: relative;}.service li h5 {position: absolute;width: 36px;height: 46px;left: 38px;text-indent: -1120px;background: url(../images/sprite.footer.png) no-repeat 0 -192px;}.service li:nth-child(2) h5 {background-position: -42px -192px;}.service li:nth-child(3) h5 {background-position: -82px -192px;}.service li:nth-child(4) h5 {background-position: -123px -192px;}.service li p {font-weight: 700;font-size: 18px;margin-left: 82px;/*给p标签添加左边距，把多字排除在外*/}/*帮助模块*//*左侧*/.help {border-bottom: 1px solid #DEDEDE;height: 200px;padding-top: 25px;box-sizing: border-box;}.help dl {width: 192px;float: left;}.help dt {height: 30px;font-size: 14px;font-weight: bold;color: #666;}.help dd {height: 22px;}/*右侧*/.coverage {width: 200px;height: 150px;background: url(../images/sprite.footer.png) no-repeat;}.coverage h5 {font-size: 14px;font-weight: bold;color: #666;margin-left: 35px;margin-bottom: 15px;}.coverage p {line-height: 18px;color: #666;width: 180px;}.coverage a {display: block;text-align: right;margin-top: 5px;color: #666;}/*版权*/.copyright {padding-top: 20px;color: #666;font-size: 12px;text-align: center;}.copyright span {margin: 0 10px;}.copyright div {margin-top: 15px;}.copyright div p {line-height: 22px;}.footerIcon a {width: 103px;height: 32px;display: inline-block;background: url(../images/sprite.footer.png) no-repeat -206px 0;margin: 20px 4px 0;} /*行内块可以用text-align：center实现居中*/.footerIcon a:nth-child(2) {background-position: -206px -37px;} .footerIcon a:nth-child(3) {background-position: -206px -74px;} .footerIcon a:nth-child(4) {background-position: -206px -110px;} .footerIcon a:nth-child(5) {background-position: -206px -148px;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。