nav部分 start
html部分
<!--此部分为通栏*/-->
<div class="jd-nav">
<!--通过分析nav有版心-->
<div class="w">
<div class="dropdown">
<div class="dt">
<a href="#">全部商品分类</a>
</div>
<!--dd等navitems写完再来补充-->
<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>
</div>
<div class="navitems">
<ul>
<li class="new"><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><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>css部分
.jd-nav{
/*宽度不写也可以*/
width: 100%;
height: 44px;
border-bottom: 2px solid #B1191A;
}
.dropdown {
width: 210px;
height: 44px;
float: left;
/*a 给了颜色，这个颜色就扔掉了
background-color: #B1191A;*/
position: relative;
z-index: 10;
/*优化，使大部分浏览器都能认出来*/
overflow: visible;
}
.dropdown .dt {
height: 44px;
}
.dropdown .dt a {
display: block;
height: 44px;
/*行高一定要在字号的后面，15px后面行高拆出来写，line-height只能写在font后面不可以写前面*/
font: 400 15px/44px "microsoft yahei";
background-color: #B1191A;
color: #fff;
/*a 没有宽不会撑开盒子*/
/*padding什么时候会撑开盒子就看有没有width，就算写了width:100%也会撑开*/
padding-left: 10px;
}
/*写完nav再写具体的dd部分*/
.dropdown .dd {
height: 465px;
background-color: #C81623;
/*如果不写，dd会盖到dt*/
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;
}
/*dd部分完成*/
.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 14px/44px "microsoft yahei";
padding: 0 20px;
}
.navitems li a:hover {
color: #B1191A;
}
.bike {
width: 140px;
height: 44px;
float: right;
background: url(../images/bike.jpg) no-repeat;
}
.bike a {
display: block;
/*宽度会继承，高度不继承*/
height: 44px;
}注：
1.浮动、绝对定位以及inline-block这三个如果不给宽度，则盒子和内容一样宽。
2.为什么slogen会压住dropdown的dd?
下面盒子有定位，就会脱标，最后压住正常流。
3.定位的盒子比别的级别要高，调盒子调父亲更好一些
————————–补充知识点————————
Z-index 层级
（层级即哪个盒子更靠上）
div属于层！！只有定位的盒子（除了static）,才有z-index！！
绝对定位不占位置（absolute）
相对定位占有位置，不影响其他盒子(relative)
如果都是定位，比如说都是绝对定位，他们默认的z-index 是0，最后的一个层级最高，靠上。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
.test {
width: 150px;
height: 300px;
border: 1px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -1px;
}
.test:hover {
border: 1px solid #f40;
position: relative;
} */
.test {
width: 150px;
height: 300px;
border: 1px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -1px;
position: relative;
}
.test:hover {
border: 1px solid #f40;
z-index: 1;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>如果都有标准流或者都有浮动，想把某一个盒子提升到最高，要加定位；如果已经有定位，则加层级。
base部分完成
base.css完整代码
@charset "UTF-8";
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; }
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;
width: 100%;
}
.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*/
/*search左侧*/
.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左侧结束*/
.search {
width: 538px;
height: 36px;
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: 13px;
right: 15px;
}
.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: 8px;
}
/*头部分 end*/
/*nav 部分 start*/
.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 14px/44px "microsoft yahei";
padding: 0 20px;
}
.navitems li a:hover {
color: #B1191A;
}
.bike {
width: 140px;
height: 44px;
float: right;
background: url(../images/bike.jpg) no-repeat;
}
.bike a {
display: block;
height: 44px;
}
/*底部 start*/
.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: -604px;
}
.slogen2 {
margin-left: -302px;
}
.slogen3 {
margin-left: 0;
}
.slogen4 {
margin-left: 302px;
}
.service dl {
width: 198px;
float:left;
}
.service dt,
.coverage .dt{
padding-top: 10px;
font-size: 16px;
height: 28px;
font-family:"微软雅黑"
}
.service dd {
height: 20px;
}
.coverage {
float: right;
width: 210px;
height: 165px;
background: url(../images/china.png) no-repeat left bottom;
}
.coverage p{
line-height: 18px;
}
.look {
text-align: right;
margin-top: 5px;
}
.coverage .dd {
margin-top: 10px;
}
.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;
}
扫一扫
4081
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
