html复习第六天京东首页布局(导航栏/左侧)

PS：为了2像素重改了半天~强迫症的痛~

项目文件：
index.html
images
|–reset.css
|–index.css

index.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><link rel="stylesheet" href="./images/index.css" /><title>jd</title>
</head>
<body><div id="top_bg"><div id="top"><p>您好，欢迎光临本店！&nbsp;&nbsp;<a href = "#">[登陆]</a><a href = "#">[免费注册]</a><span><a href = "#">查看购物车</a>| <a href = "#">选购中心</a>|<a href = "#">标签云</a>|          <a href = "#">报价单</a></span></p>                        </div>      </div><!-- 母体div --><div id="matrix"><!-- 头部 --><div id="header"><!-- logo区 --><div id="logo"></div><!-- 搜索区 --><div id="search" ><input type="text" name = "content" id = "content"/><input type="submit" name = "search" value = "搜索" id = "submit"/></div><!-- 搜索区 end--><!-- 导航区 -->    <div id = "shopcar">&nbsp;&nbsp;&nbsp;&nbsp;购物车&nbsp;0</div><div id = "nav"><ul><li><a href="#" class="navlink">首页</a></li><li><a href="#" class="navlink">时尚化妆品</a></li><li><a href="#" class="navlink">时尚手表</a></li><li><a href="#" class="navlink">精美包包</a></li><li><a href="#" class="navlink">团购商品</a></li><li><a href="#" class="navlink">优惠活动</a></li><li><a href="#" class="navlink">EC免费模板</a></li><li><a href="#" class="navlink">EC商业模板</a></li></ul></div><!-- 导航区 end--> </div><!-- 头部 end-->      <!-- 主体 --><div id="main"><!-- 左侧 --><div id = "left"><!-- 左侧区域1.1 --><div class="subtitle">所有分类</div><div class="left_part"><ul><h2><a href="#">精美包包</a></h2><li><a href="#" class="shoplist">双肩包</a></li><li><a href="#" class="shoplist">手提包</a></li><li><a href="#" class="shoplist">男包</a></li><li><a href="#" class="shoplist">女包</a></li></ul><div class="box"></div></div><!-- 左侧区域1.2 --><div class="left_part"><ul><h2><a href="#">时尚手表</a></h2><li><a href="#" class="shoplist">充电器</a></li><li><a href="#" class="shoplist">男表</a></li><li><a href="#" class="shoplist">女表</a></li><li><a href="#" class="shoplist">情侣表</a></li></ul><div class="box"></div></div><!-- 左侧区域1.3 --><div class="left_part"><ul><h2><a href="#">时尚化妆品</a></h2><li><a href="#" class="shoplist">润肤霜</a></li><li><a href="#" class="shoplist">面膜</a></li><li><a href="#" class="shoplist">彩妆用品</a></li></ul><div class="box"></div></div>  <!-- 左侧区域1.4 --><div class="left_part"><ul><h2><a href="#">潮流卫衣</a></h2><li><a href="#" class="shoplist">男士卫衣</a></li><li><a href="#" class="shoplist">女式卫衣</a></li><li><a href="#" class="shoplist">进口卫衣</a></li></ul><div class="box"></div></div>  <!-- 左侧区域1 end -->  <!-- 左侧区域2 --><div class="subtitle">销售排行</div><div class="left_part"><div class="toptitle"><a href = "#"><span>1.</span>芙丽芳丝时尚沐...<span class = "price">￥50元</span></a></div><div class="toptitle"><a href = "#"><span>2.</span>限量版休闲帆布...<span class = "price">￥100元</span></a></div><div class="toptitle"><a href = "#"><span>3.</span>天梭Tisso...<span class = "price">￥600元</span></a></div>                                      <div class="toptitle"><a href = "#"><span>4.</span>雅诗兰黛15色...<span class = "price">￥20元</span></a></div><div class="toptitle"><a href = "#"><span>5.</span>SUKI 蓝莓...<span class = "price">￥40元</span></a></div><div class="toptitle"><a href = "#"><span>6.</span>限量版休闲帆布...<span class = "price">￥100元</span></a></div>                                                      </div>  <!-- 左侧区域2 end --><!-- 左侧区域3 --><div class="subtitle">品牌特卖<a href="#"><span>全部品牌</span></a></div><div class="left_part"><div class="pinpai"><img src="./images/1.gif" alt="" /><img src="./images/2.gif" alt="" /><img src="./images/3.gif" alt="" /><img src="./images/4.gif" alt="" /><img src="./images/5.gif" alt="" /><img src="./images/6.gif" alt="" /></div></div>  <!-- 左侧区域3 end --><!-- 左侧区域4 -->              <div class = "leftpic"><img src = "./images/7.jpg"></div><!-- 左侧区域4 end --><!-- 左侧区域5 --><div class="subtitle">发货查询</div><div class="left_part"><div class="note"><span>订单号</span>2009061909851<br /><span>发货号</span>232421<br /></div><div class="note"><span>订单号</span>2009061909851<br /><span>发货号</span>1123344<br /></div>                  </div><!-- 左侧区域5 end-->   <!-- 左侧区域6 --><div class="subtitle">订单查询</div><div class="left_part"><div class="shopnum"><form action="action.php"><input type="text" name = "shopnum" method = "get"/><input type="submit" value = "查询该单号" class = "shopnumSub"/></form></div></div><!-- 左侧区域6 end-->   </div><!-- 左侧 end --><!-- 右侧 --><div id = "right"><!-- banner --><div id="banner">banner区域</div><!-- banner end--><!-- 右侧商品展示 --><div class="right_pic_box"><div class="right_pic_title">标题</div></div><div class="right_pic_box"><div class="right_pic_title">标题</div></div><div class="right_pic_box"><div class="right_pic_title">标题</div></div><div class="right_pic_box"><div class="right_pic_title">标题</div></div><div class="right_pic_box"><div class="right_pic_title">标题</div></div>                                                              <!-- 右侧商品展示 end --></div><!-- 右侧 end --></div><!-- 主体 end --><!-- 脚部 --><div id="footer">脚部区域</div><!-- 脚部 end-->      </div><!-- 母体div end -->
</body>
</html>

index.css代码:

@import url(reset.css);
#header{width:990px;height:105px;
}
#top{width:990px;height:25px;font-size:14px;line-height: 25px;border-bottom: 2px solid lightgrey;margin-bottom: 15px;font-family: "宋体";
}
#top_bg{background: url(./back_bg.gif);
}
#top span{float:right;
}
#top a{color:#22447b;
}
#logo{width:259px;height: 50px;background-image: url(./logo.gif);float:left;margin-bottom: 20px;
}
#search{margin-left:40px;height: 30px;width:500px;float:left;
}
#search #content{width:410px;height:28px;border:3px solid red;
}
#search #submit{width:70px;height:28px;background: orange;border:none;font-weight: bold;float:right;position:relative;right:88px;top: 2px;
}
#header #shopcar{width: 131px;height: 29px;float:right;background-image: url(./cartinfo.gif);font-size: 14px;text-align: center;line-height: 29px;
}
#nav{clear: both;width: 990px;height:38px;background: url(Nalist1.gif) repeat-x;
}#nav li .navlink{display: block;float:left;width:120px;height: 38px;line-height: 38px;color:white;text-align: center;
}
#nav li .navlink:hover{background: url(Nalist_hover.gif);
}#main{width:990px;height: 1744px;margin-top:20px;
}#left{width:200px;height:1744px;float:left;
}.subtitle{width:200px;height: 27px;background: red;float:left;background:url(category_tree_bg.gif);color:white;text-indent:1em;font-size: 14px;font-weight:bold;font-family: "宋体";line-height: 27px;
}
.subtitle span{float: right;color:white;font-size: 12px;margin-right: 15px;
}
.left_part{width:198px;height: auto;float:left; background-color: white;border: 1px solid #ccc;margin-bottom: 10px;
}
.left_part h2{padding: 8px 0 8px 10px;font-size: 12px;font-weight: bold;font-family: Arial;
}
.left_part h2 a{color:#424242;
}.left_part li{display: inline;width: 75px;height: 17px;float: left;margin:0 0 3px 10px;font-size: 14px;
}
.left_part .shoplist{background: url(bg.gif) no-repeat -287px -29px; display: block;width: 75px;height: 17px;padding: 0 0 0 6px;color: #424242;margin-left: 14px;font-family: Arial; font-size: 12px;
}
.left_part .toptitle{width:182px;height:26px;margin:0 0 3px 9px;font-size: 12px;line-height: 26px;border-bottom:1px solid #e2e2e2;
}
.left_part .toptitle span{font-weight: bold;color:#F00;padding: 0 7px 0 0;
}
.left_part .toptitle a{color:#464646;
}
.left_part .toptitle .price{display: inline;color: #ff6c02;font-weight: bold;float: right;
}
.left_part .pinpai{width: 180px;height:150px;padding: 10px 10px 0 10px;
}
.left_part img{display: inline;width: 78px;height:38px;border:1px solid #e6e6e6;padding: 2px;
}.leftpic img{width:200px;height: 350px;margin-bottom: 10px;
}.left_part .note{width:182px;height:42px;border-bottom: 1px dashed #ccc;margin:8px;font-size: 12px;color: grey;line-height: 150%;
}
.left_part .note span{color:#aeacac;padding: 7px;
}
.left_part .shopnum{width:182px;padding: 8px;
}.left_part .shopnum input{margin-bottom: 8px;}
.left_part .shopnum .shopnumSub{width:99px;height: 21px;background: url(bg.gif) no-repeat -151px -48px; border: none;
}#right{width:780px;height:1744px;background: grey;float:right;
}
#banner{width:780px;    height:327px;background: #a64d79;float: right;
}
/*.right_pic_box{width: 780px;height: 277px;margin-bottom: 8px;background: #FFE4C4;float:right;
}*/
.right_pic_title{width: 780px;height: 27px;background:#CAFF70;float: right;
}
#footer{clear: both;width:990px;height: 330px;background: blue;
}

reset.css代码:

/*css reset code *//****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:14px;
} /* for everything else *//*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;font-family: Arial;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}img {display:block;}
address,caption,cite,code,dfn,th,var {font-weight: normal;font-style: normal;}
ol,ul {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}a {
text-decoration:none;
}

附开发过程：

html复习第六天京东首页布局(导航栏/左侧)相关推荐

css+html模仿京东app底部导航栏
css+html模仿京东app底部导航栏完成效果如下: 上下滑动页面,底部导航栏一直存在,位置不变底部导航栏实现代码如下: 只需css写超简单代码重点是footer标签,其余标签是为和京东导航栏 ...
前端之路——第五篇：1:1还原知乎首页顶层导航栏！
今天!我们来1比1还原知乎首页的导航栏. 其实要我自己做,有点虚的.老师还是细心的做了一遍给我看. 废话不多说,看下图!你喜欢那个多点?猜下那个是正品,那个是A货! 很明显,都是好看的一个导航栏. 今 ...
php 京东首页分类导航,仿京东导航栏
摘要: 仿京东顶部导航栏仿京东顶部导航栏 *{ margin:0px; padding:0px; } .header{ width:100%; height:35px; background-co ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
bootstrap4 左侧导航栏优秀大气_制作动态效果的后台导航栏——左侧导航
怎么制作动态效果的后台导航栏呢,一起来文中看看~ 先上完成效果: 整体的制作过程 1. 制作菜单元件分别制作导航菜单中的每个元件,制作好一个以后,就可以复用了,制作步骤如下: 使用矩形,制作单个导航 ...
html复习第七天京东首页布局完成
简直神了..代码刚刚好一千行,一行不多,一行不少.写完之后才算得..千分之一的概率..这!也!太!巧!了! 项目文件: index.html 首页代码(529行) images |–index.css ...
模仿淘宝首页横向导航栏
@TOC在这里插入代码片 <nav class="w"><div class="nav-scroll"><!-- 列表信息 --& ...
php 京东首页分类导航,纯CSS京东商城分类导航菜单代码-懒人建站
h;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},Z=/^(?:checkbox|r ...

html复习第六天京东首页布局(导航栏/左侧)

html复习第六天京东首页布局(导航栏/左侧)相关推荐

最新文章

热门文章

html复习第六天 京东首页布局(导航栏/左侧)

html复习第六天 京东首页布局(导航栏/左侧)相关推荐

最新文章

热门文章

html复习第六天京东首页布局(导航栏/左侧)

html复习第六天京东首页布局(导航栏/左侧)相关推荐