CSS实战(代码部分)
来源：互联网 发布：java计算n的阶乘 编辑：程序博客网 时间：2024/06/15 03:41
index.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> <!-- 引入base.css --> <link rel="stylesheet" href="css/base.css" /> <!-- 引入index.css --> <link rel="stylesheet" href="css/index.css" /> <!-- 引入favicon.ico--> <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><!-- 京东头部导航结束 --><!-- topbannner start--><div class="topbanner" id="top_banner"> <div class="w tp"> <img src="images/topbanner.jpg" alt=""> <!-- this is the close banner --> <a href="javascript:;" class="close-banner" id="jd_close"></a> </div></div><script> // 事件源是标签a // 事件 点击 // 事件处理程序 topbanner隐藏 var jd_close = document.getElementById("jd_close"); var topbanner =document.getElementById("top_banner"); // 事件源.事件 =function(){} jd_close.onclick = function(){ topbanner.style.display ="none"; }</script><!-- topbanner end --><!-- 搜索栏的开始 --><!-- 这里用到了clearfix的清楚浮动 --><div class="w clearfix"> <!-- 这个图标有两个内容即：一个背景图含有超级链接（京东的首页）+一个动图 --> <div class="logo"> <a href="http://www.jd.com" target="_blank" class="jd-a" title="jingdong">京东</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">6</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-icon3"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon4"> <a href="#" class="song"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon5"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon6"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon7"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon8"> <a href="#"> <i></i> <span>话费</span> </a></li> <li class="lifeservi-icon9"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon10"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon11"> <a href="#"> <i></i> <span>话费</span> </a> </li> <li class="lifeservi-icon12"> <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><!-- 页面的底部开始 9.13--><div class="footer"> <div class="service"><!-- 服务模块 --> <!-- 底部的标语部分开始 --> <div class="slogan"> <span class="item slogan1"> <img src="images/slogan1.png" alt=""> </span> <span class="item slogan2"> <img src="images/slogan2.png" alt=""> </span> <span class="item slogan3"> <img src="images/slogan3.png" alt=""> </span> <span class="item slogan4"> <img src="images/slogan4.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="#">211限时达</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="#">DIY装机</a></dd> <dd><a href="#">延保服务</a></dd> <dd><a href="#">京东E卡</a></dd> <dd><a href="#">京东通信</a></dd> <dd><a href="#">京东JD+</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 class="w againw"> <!-- 链接 --> <div class="links"> <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>| <a href="#">English Site</a> <a href="#">Contact Us</a> </div> <!-- 最后的尾部版权部分 --> <div class="copyright"> 北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号<br /> 音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br /> 网络文化经营许可证京网文[2014]2148-348号 违法和不良信息举报电话：4006561155 Copyright © 2004-2015 京东JD.com 版权所有<br /> 京东旗下网站：360TOP 拍拍网 网银在线 </div> <div class="message"> <a href="#"><img src="images/mess1.png" alt=""></a> <a href="#"><img src="images/mess2.png" alt=""></a> <a href="#"><img src="images/mess3.png" alt=""></a> <a href="#"><img src="images/mess4.png" alt=""></a> <a href="#"><img src="images/mess5.png" alt=""></a> </div> </div></div></body></html>base.css部分
@charset "UTF-8";/*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 "SimSun"; position: absolute; top: 13px; right: 3px; height: 7px; overflow: hidden; width: 15px;}.shortcut .dt s,.fore s{ position: absolute; bottom: 0px; left: 0px;}.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*//*topbannner start*//*设置顶部图的背景颜色*/.topbanner{ background-color: #8A25C6;}/*这里是关闭图标的属性值，通过绝对定位，因为关闭图标是通过定位到该位置的，可见他的父亲一定是相对定位*/.close-banner { position: absolute; right: 0; top:5px; width: 19px; height: 19px; background: url(../images/close.png) no-repeat;}/*关闭图标的hover属性值，是用背景定位：底部*/.close-banner:hover { background-position: bottom;}/*父亲的定位可知是相对定位*/.tp { position: relative;}/*topbannner 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: -1000em;}.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; /*这里是溢出的可视的作用，与overflow: hidden;作用相反*/}.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: "microsoft yahei";}.dropdown .items h3 { float: left;}.dropdown .items span { float: right; margin-right: 15px; font-family: "SimSun"; 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; /*这里a是行标签，不能设置宽高，所以要转成块标签*/ color: #333; font: 400 15px/44px "microsoft yahei"; padding: 0 20px;}.navitems li a:hover { color: #B1191A;}.bike { width: 140px; height: 40px; /*这里相比之前的版本少了高，因为太高会压到后面的边*/ background: url(../images/bike.jpg) no-repeat; float: right;}.bike a { display: block; height: 44px;}/*底部开始*/.slogan{ height: 54px; padding: 20px ; background-color: #f5f5f5; position: relative; margin-bottom: 15px;}.item{ width: 302px; position: absolute; top: 20px; left: 50%;/*这里为什么要用50%*/}.slogan1{ margin-left: -608px;}.slogan2{ margin-left: -304px;}.slogan3{ margin-left: 2px;}.slogan4{ margin-left: 304px;}/*这里是底部帮助链接的部分*/.shopping dl { width: 198px; float: left;}.shopping dt,.coverage .dt{ font-size: 16px; height: 28px; font-family: "microsoft yahei"; 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;}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 #E8E8E8; 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 "Simsun"; 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-icon3 a i { background-position: right -50px;}.lifeservi-icon4 a i { background-position: right -75px;}.lifeservi-icon5 a i { background-position: right -100px;}.lifeservi-icon6 a i { background-position: right -125px;}.lifeservi-icon7 a i { background-position: right -150px;}.lifeservi-icon8 a i { background-position: right -175px;}.lifeservi-icon9 a i { background-position: right -200px;}.lifeservi-icon10 a i { background-position: right -225px;}.lifeservi-icon11 a i { background-position: right -250px;}.lifeservi-icon12 a i { background-position: right -275px;}.lifeservi .song { background: url(../images/song.png) no-repeat right top;}/*双11活动*/.todays { position: relative;}.night { margin: 10px 0 28px 0;}.night-r { width: 1000px; height: 160px; float: right;}.night-r ul { width: 500%; _width:400%;}.night-r li { float: left; margin-right: 1px;}阅读全文
0 0
- CSS实战(代码部分)
- CSS标准化公共部分代码片段
- CSS超出部分显示省略号…代码
- CSS超出部分显示省略号…代码
- CSS部分
- CSS实战
- CSS实战
- CSS实战
- 解决 samrty部分css代码失效的问题
- 关于CSS hack的部分代码（IE）
- CSS基础-36双飞翼布局代码实战
- hadoop实战-初级部分
- Hadoop实战-中高级部分
- 《Netty实战》第一部分
- 代码 部分
- 部分代码
- 高并发之Memcached实战第10课-“Memcached Get获取数据”部分代码分享
- 高并发之Memcached实战第10课-“Memcached Get获取数据”部分代码分享2
- _mysql.c(42) : fatal error C1083: Cannot open include file: 'config-win.h':问题的解决
- 短信验证
- python 运行不了出错 invalid syntax
- C语言register关键字—最快的关键字
- 机器学习笔记（1）
- CSS实战(代码部分)
- 在Ubuntu 14 下安装Java
- 第二周项目3-体验复杂度（2）
- TypeError: slice indices must be integers or None or have an __index__ method
- 第二周 项目三 （2）汉诺塔
- 手风琴效果
- 回顾与展望
- POJ 3348 求凸包面积
- 备考pat
