利用html和csss实现京东首页静态页面
来源：互联网 发布：java继承和多态的作用 编辑：程序博客网 时间：2024/05/16 16:07
京东首页静态页面的代码书写，熟悉html和css的使用和网页页面的实现。1.编码格式为UTF-8，由于页面代码冗长，选择外链式css文件来加入css代码。
2.京东首页整体分为页面头部导航，中部内容和页面底部服务栏，其中头部导航与底部服务在每个京东子页面里出现，可以将其css代码写入base.css中
3.编写html代码时重要的是进行结构分析，比如轮播图的设计，首先使用<div></div>标签构造一个大盒子，里面包裹分别用ul标签和ol标签包裹若干li标签，ol 里的 li 负责表现 ul 里的 li 的索引，在书写css代码时 ol 需要进行绝对定位，子绝父相，div 需要相对定位.ul 里的 li 需要左浮动，ul 需溢出隐藏。
4.html和css零碎知识多，结合W3C手册，书写web页面可以快速系统的练习和掌握。
上代码 html代码
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>不是所有的页面都叫京东</title> <link rel="stylesheet" href="css/base.css"/> <link rel="stylesheet" href="css/index.css"/> <link rel="shortcut icon" href="favicon.ico" /></head><body><!--京东的头部导航开始--><div class="shortcut"> <div class="w"> <div class="fl"> <div class="dt"> 送至：北京 <i><s>◇</s></i> </div> </div> <div class="fr"> <ul> <li> <a href="#">你好，请登录</a> <a href="#" class="col-red">免费注册</a> </li> <li class="line"></li> <li>我的订单</li> <li class="line"></li> <li class="fore">我的京东 <i><s>◇</s></i> </li> <li class="line"></li> <li>京东会员</li> <li class="line"></li> <li>企业采购</li> <li class="line"></li> <li class="fore tel-jd"> <em class="tel"></em> 手机京东 <i><s>◇</s></i> </li> <li class="line"></li> <li class="fore"> 关注京东 <i><s>◇</s></i> </li> <li class="line"></li> <li class="fore"> 客户服务 <i><s>◇</s></i> </li> <li class="line"></li> <li class="fore"> 网站导航 <i><s>◇</s></i> </li> </ul> </div> </div></div><!--京东头部导航结束--><!--京东的topbanner部分--><div class="topbanner"> <div class="w tp"> <img src="images/topbanner.jpg" alt=""/> <a href="javascript:;" class="close-banner"></a> </div></div><!--京东的topbanner部分 end--><div class="w clearfix"> <div class="logo"> <a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚">京东</a> <div class="db11"> <a href="#"><img src="images/dong.gif" alt=""/></a> </div> </div> <div class="search"> <input type="text" name="" id="" value="图书开抢"/> <button>搜索</button> </div> <div class="car"> <a href="#">俺的购物车</a> <span class="icon1"></span> <span class="icon2">></span> <span class="icon3">8</span> </div> <div class="hotwords"> <a href="#" class="col-red">11月11天</a> <a href="#">11.11秒杀</a> <a href="#">买2免1</a> <a href="#">Note5 黑</a> <a href="#">12期免息</a> <a href="#">智能科技</a> <a href="#">清仓</a> <a href="#">国际服饰</a> <a href="#">优惠券</a> </div></div><!--nav 部分开始--><div class="jd-nav"> <div class="w"> <div class="dropdown"> <div class="dt"> <a href="#">全部商品分类</a> </div> <div class="dd"> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>家用电器</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> <div class="items"> <h3>手机、数码、京东通信</h3> <span>></span> </div> </div> </div> <div class="navitems"> <ul> <li><a href="#">服装城</a></li> <li><a href="#">美妆馆</a></li> <li><a href="#">超市</a></li> <li><a href="#">全球购</a></li> <li><a href="#">闪购</a></li> <li class="new"><a href="#">团购</a></li> <li><a href="#">拍卖</a></li> <li><a href="#">金融</a></li> <li><a href="#">智能</a></li> </ul> </div> <div class="bike"> <a href="#"></a> </div> </div></div><!--大banner--><div class="banner604"> <a href="#"> </a></div><div class="w main clearfix"> <div class="slider"> <a href="#"><img src="images/slider1.jpg" alt=""/></a> <ul class="circle"> <!-- 小圆点--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li class="current">6</li> </ul> <div class="arrow"> <!--左右两个三角--> <a href="javascript:;" class="arrow-l"><</a> <a href="javascript:;" class="arrow-r">></a> </div> </div> <div class="news"> <div class="jd-news"> <div class="dt"> <h3>京东快报</h3> <a href="#">更多></a> </div> <div class="dd"> <ul> <li><a href="#"><span>[特惠]</span>1元秒杀</a></li> <li><a href="#"><span>[公告]</span>母婴类APP【京东宝宝】上线</a></li> <li><a href="#"><span>[特惠]</span>美的品牌日 APP嗨购大放“价”</a></li> <li><a href="#"><span>[公告]</span>京东深入蒙牛生产基地进行质检</a></li> <li><a href="#"><span>[特惠]</span>白条购家电 24期免息！</a></li> </ul> </div> </div> <div class="lifeservi"> <div class="dt"> <h3>生活服务</h3> </div> <div class="dd"> <ul> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon2"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#" class="song"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon1"> <a href="#"> <i></i> <span>话费</span> </a> </li> </ul> </div> </div> </div></div><!--双11 的某个活动--><div class="w todays clearfix"> <div class="night"> <div class="night-l fl"> <img src="images/night.jpg" alt=""/> </div> <div class="night-r"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""/></a></li> <li><a href="#"><img src="images/2.jpg" alt=""/></a></li> <li><a href="#"><img src="images/3.jpg" alt=""/></a></li> <li><a href="#"><img src="images/4.jpg" alt=""/></a></li> </ul> </div> </div></div><!--页面底部开始--><div class="jd-footer"> <div class="service"> <!--服务模块--> <div class="slogen"> <span class="item slogen1"> <img src="images/slogen1.png" alt=""/> </span> <span class="item slogen2"> <img src="images/slogen2.png" alt=""/> </span> <span class="item slogen3"> <img src="images/slogen3.png" alt=""/> </span> <span class="item slogen4"> <img src="images/slogen4.png" alt=""/> </span> </div> <div class="w shopping clearfix"> <dl> <dt><a href="#">购物指南</a></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><a href="#">购物指南</a></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><a href="#">购物指南</a></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><a href="#">购物指南</a></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><a href="#">购物指南</a></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 class="coverage"> <div class="dt">京东自营覆盖区县</div> <div class="dd"> <p> 京东已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p> <p class="looklook"><a href="#">查看详情 ></a></p> </div> </div> </div> </div> </div></body></html>index.css代码
@charset "UTF-8";.banner604 { position: relative;}.banner604 a { position: absolute; top: 0; left: 0; width: 100%; height: 604px; background: url(../images/banner.jpg) no-repeat top center;}.main { position: relative;}.slider { width: 730px; height: 453px; background-color: pink; margin: 12px 0 0 220px; float: left; position: relative;}.circle { position: absolute; bottom:8px; left: 50%; margin-left: -66px;}.circle li { width: 18px; height: 18px; border-radius: 50%; background-color: #3E3E3E; float: left; text-align: center; line-height: 18px; color: #fff; margin: 0 2px; cursor: pointer;}.circle li.current { background-color: #B61B1F;}.arrow-l, .arrow-r { position: absolute; width: 28px; height: 62px; top: 50%; margin-top: -31px; color: #fff; font: 500 18px/62px "宋体"; text-align: center; background: rgba(0,0,0,.2);}.arrow-l { left: 0;}.arrow-r { right: 0;}.arrow-l:hover,.arrow-r:hover { background: rgba(0,0,0,.4); color: #fff;}.news { width: 248px; height: 451px; border: 1px solid #E4E4E4; float: right; margin-top: 12px;}.jd-news { height: 200px; border-bottom: 1px dashed #E4E4E4; /*虚线*/}.jd-news .dt, .lifeservi .dt { height: 43px; border-bottom: 1px dotted #E8E8E7; /*点线*/ line-height: 43px;}.jd-news .dt h3 ,.lifeservi .dt h3{ float: left; font: 14px/43px "microsoft yahei"; color: #666; padding-left: 15px;}.jd-news .dt a{ float: right; font: 13px/43px "宋体"; margin-right:15px;}.jd-news .dd ul { padding: 8px 0 0 15px;}.jd-news .dd li { line-height: 28px;}.jd-news .dd li span { font-weight: 700; margin-right: 5px;}.lifeservi { height:251px; overflow: hidden; width: 248px;}.lifeservi ul { width: 252px;}.lifeservi ul li { width: 62px; height: 70px; border: 1px solid #e4e4e4; border-top: 0; float: left; margin-left: -1px;}.lifeservi li a{ display: block; height: 70px; text-align: center; padding-top: 44px; position: relative;}.lifeservi li i{ position: absolute; top:12px; left:18px; width: 25px; height: 25px; background: url(../images/icon_lifeserv.png) no-repeat right top;}.lifeservi-icon2 a i { background-position: right -25px;}.lifeservi .song { background: url(../images/song.png) no-repeat right top;}/*11 huodong*/.todays { position: relative;}.night { margin: 10px 0 28px 0;}.night-r { width:1000px; height: 160px; float: right;}.night-r ul {@charset "UTF-8";base.css代码/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0;}fieldset, img, input, button { border: none; padding: 0; margin: 0; outline-style: none;}ul, ol { list-style: none;}input { padding-top: 0; padding-bottom: 0; font-family: "SimSun", "宋体";}select, input { vertical-align: middle;}select, input, textarea { font-size: 12px; margin: 0;}textarea { resize: none;}/*防止拖动*/img { border: 0; vertical-align: middle;}/* 去掉图片低测默认的3像素空白缝隙*/table { border-collapse: collapse;}body { font: 12px/150% Arial, Verdana, "\5b8b\4f53"; color: #666; background: #fff}.clearfix:before, .clearfix:after { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1; /*IE/7/6*/}a { color: #666; text-decoration: none;}a:hover { color: #C81623;}h1, h2, h3, h4, h5, h6 { text-decoration: none; font-weight: normal; font-size: 100%;}s, i, em { font-style: normal; text-decoration: none;}.col-red { color: #C81623 !important;}/*公共类*/.w { /*版心 提取 */ width: 1210px; margin: 0 auto;}.fl { float: left}.fr { float: right}.al { text-align: left}.ac { text-align: center}.ar { text-align: right}.hide { display: none}/*头部导航开始*/.shortcut { height: 30px; line-height: 30px; background-color: #f1f1f1;}.shortcut .dt,.shortcut .fore { padding: 0 20px 0 10px; position: relative;}.shortcut .dt i,.fore i { font: 400 15px/15px "宋体"; position: absolute; top: 13px; right: 3px; height: 7px; overflow: hidden; width: 15px;}.shortcut .dt s,.fore s { position: absolute; top: -8px; left: 0;}.fr li { float: left; padding: 0 10px;}.fr .line { width: 1px; height: 12px; background-color: #ddd; margin-top: 9px; padding: 0;}.shortcut .tel-jd { padding: 0 20px 0 25px;}.tel { position: absolute; width: 15px; height: 20px; background: url(../images/sprite.png) no-repeat; left: 5px; top: 5px;}/*顶部end*//*topbanner start*/.topbanner { background-color: #8A25C6;}.close-banner { position: absolute; right: 0; top: 5px; width: 19px; height: 19px; background: url(../images/close.png) no-repeat;}.close-banner:hover { background-position: bottom;}.tp { position: relative;}/*topbanner end*/.logo { width: 360px; height: 75px; background-color: pink; float: left; padding-top: 25px; background: url(../images/logo.png) no-repeat 0 25px; position: relative;}.jd-a { display: block; width: 270px; height: 60px; text-indent: -2000em;}.db11 { position: absolute; width: 180px; height: 80px; background-color: pink; top: 10px; left: 168px;}.search { width: 538px; height: 35px; float: left; margin-top: 25px;}.search input { width: 450px; height: 32px; border: 2px solid #B61D1D; padding-left: 4px; color: #666; font: 14px/32px "microsoft yahei"; float: left;}.search button { width: 80px; height: 36px; background-color: #B61D1D; float: left; font: 16px/36px "microsoft yahei"; color: #fff; cursor: pointer; /* 鼠标变成小手*/}.car { width: 96px; padding-left: 43px; float: right; margin: 25px 65px 0 0; border: 1px solid #DFDFDF; line-height: 34px; position: relative;}.icon1 { position: absolute; top: 10px; left: 20px; width: 16px; height: 13px; background: url(../images/sprite.png) no-repeat -1px -59px;}.icon2 { font: 400 13px/13px simsun; position: absolute; top: 10px; right: 10px;}.icon3 { position: absolute; width: 16px; height: 14px; background-color: #C81623; font-size: 12px; line-height: 14px; text-align: center; color: #fff; top: -4px; border-radius: 7px 7px 7px 0;}.hotwords { width: 500px; padding: 7px 0; float: left;}.hotwords a { margin-right: 6px;}/*nav 部分*/.jd-nav { width: 100%; height: 44px; border-bottom: 2px solid #B1191A;}.dropdown { width: 210px; height: 44px; float: left; position: relative; z-index: 10; overflow: visible;}.dropdown .dt { height: 44px;}.dropdown .dt a { display: block; height: 44px; font: 400 15px/44px "microsoft yahei"; background-color: #B1191A; color: #fff; padding-left: 10px;}.dropdown .dd { height: 465px; background-color: #C81623; margin-top: 2px;}.dropdown .items { height: 31px; line-height: 31px; border-left: 1px solid #B61D1D; padding-left: 10px; color: #fff; font-size: 15px; font-family:"微软雅黑";}.dropdown .items h3 { float: left;}.dropdown .items span { float: right; margin-right: 15px; font-family: "宋体"; font-weight: 600;}.navitems { width: 680px; height: 44px; float: left;}.navitems li { float: left;}.navitems li.new { background: url(../images/new.jpg) no-repeat right top;}.navitems li a { display: block; color: #333; font:400 15px/44px "微软雅黑"; padding:0 20px;}.navitems li a:hover { color: #B1191A;}.bike { width: 140px; height: 44px; background:url(../images/bike.jpg) no-repeat; float: right;}.bike a { display: block; height: 44px;}/*头部分end*/.slogen { height: 54px; padding: 20px 0; background-color: #f5f5f5; position: relative; margin-bottom: 15px;}.item { width: 302px; position: absolute; top: 20px; left: 50%;}.slogen1 { margin-left: -608px;}.slogen2 { margin-left: -304px;}.slogen3 { margin-left: 2px;}.slogen4 { margin-left: 304px;}.shopping dl { width: 198px; float: left;}.shopping dt,.coverage .dt { font-size: 16px; height: 28px; font-family: "微软雅黑"; padding-top: 10px;}.shopping dd { height: 20px;}.coverage { float: right; width: 210px; height: 165px; background: url(../images/china.png) no-repeat left bottom;}.coverage .dd { margin-top: 10px;}.coverage p { line-height: 18px;}.looklook { text-align: right; margin-top: 5px;}.againw { border-top: 1px solid #E5E5E5; padding: 23px 0 30px 0; margin-top: 30px; text-align: center;}.links { height: 25px;}.links a { padding: 0 6px;}.copyright { line-height: 18px; margin-bottom: 10px;}/*底部 start*/
width: 500%; }.night-r li { float: left; margin-right: 1px;}
阅读全文
0 0
- 利用html和csss实现京东首页静态页面
- html静态页面传递参数-利用JavaScript方法实现静态
- 把网站首页生成静态html页面
- html+csss实现qq空间皮肤显示
- 利用JavaScript方法实现静态html页面参数传递
- 利用js方法实现html静态页面间参数传递
- 利用js方法实现html静态页面间参数传递
- 利用js方法实现html静态页面间参数…
- 利用页面输出生成HTML静态页面
- 仿新浪首页、主题、详情页，纯html静态页面
- 【转帖】利用Java生成静态HTML页面
- 利用Java生成静态HTML页面
- 利用freemarker、java生成html静态页面
- 利用intent-filter和html超链接实现页面跳转
- java实现生成首页、列表页的静态页面
- wordpress在IIS下无rewrite利用cos-html-cache实现静态页面
- wordpress在IIS下无rewrite利用cos-html-cache实现静态页面
- 利用img标签实现的静态的HTML页面访问次数的Servlet
- SVN地址变换记录
- API接口Comparable
- java中关于日期的操作
- java代码实用工具---lombok
- Javaweb session及session.isNew()的理解
- 利用html和csss实现京东首页静态页面
- 南阳oj119--士兵杀敌（三）（求最大值和最小值的差值）
- hdu 2612 Find a way bfs
- 【Java编程】Java复制文件夹及里面所有文件
- java基础——网络编程
- 第十三天总结
- 快速排序--递归算法
- 输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。
- DL里面关于epoch、 iteration和batchsize
