学院实验室建设网站的好处网站建设环保
效果图
学会淘宝商城的分类导航以后，会发现大多数的电商网站都是这样的效果，在做其他网站时具体分析即可。
首先我们要构思整个大框架的结构：左边是全部商品分类，在这个分类中主要是用了导航列表(ul li)， 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，把这个div分成左边小分类列表,右边图片广告)
这个分类导航其实比较简单，在我看来要重点理解相对定位，绝对定位，盒子模型，包括margin和padding的含义，以及对a标签的熟练使用。有一个小知识点就是显示与隐藏display：block；display：none；
但在具体做的时候就有很多细节需要注意，比如每个大分类后都有一个箭头，每一类都有一个斜杠，中间显示框有一个橙色的边框，以及中间字体颜色不一致，图片的大小等等,这些做起来还是很简单的，细心一点就好。
我使用的是内嵌样式，下面就是具体的代码实现（我只附了女装男装内衣的二级分类）
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>淘！你喜欢！</title><style>* {margin: 0;padding: 0;}.centerblock {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 1000px;height: 500px;border: 1px solid silver;}.centerblock_left {width: 199px;height: 500px;border-right: 1px solid orange;/*background-color: #36c3ff;*/float: left;}.centerblock_right {float: left;width: 800px;height: 500px;/*background-color:red;*/}.listmenu {/*border: 1px solid silver;*//*left: 20px;*/}.listmenu li {list-style: none;padding-left: 20px;height: 31.2px;line-height: 31.2px;font-size: 15px;}.listmenu li span {float: right;margin-right: 10px;}.listmenu li>a {text-decoration: none;color: #3a3a3a;}.listmenu li:hover {background-color: #ffd4cd;color: orange;}.listmenu li:hover > a {color: orange;}.listmenu > li > a:hover {text-decoration: underline;}.listmenu_child {position: absolute;left: 200px;/*margin-left: 180px;*/top: 0;background-color: white;border: 2px solid #ff951d;width: 800px;height: 500px;display: none;}.listmenu>li:hover .listmenu_child {display: block;}.listmenu_child_left {position: relative;float: left;padding-left: 20px;width: 530px;height: 500px;/*background-color: #36c3ff;*/}.listmenu_child_right {position: relative;float: left;width: 249px;height: 500px;border-left: 1px solid silver;/*background-color: #ffe706;*/}.listmenu_child_left_top_title {position: relative;width: 530px;height: 35px;/*background-color: #36c3ff;*/line-height: 35px;margin-top: 5px;color: black;}.span1 {position: absolute;bottom: 0;float: left;font-size: 18px;left: 0px;color: black;}.span2 {position: absolute;bottom: 0;float: right;font-size: 13px;right: 8px;color: black;}.listmenu_child_left_a {margin-right: 25px;/*background-color: #ffe706;*/line-height: 25px;}.listmenu_child_left_a > a {text-decoration: none;font-size: 14px;margin-right: 20px;}.colororg{color:orangered;}.colorgray{color:gray;}.listmenu_child_right_title {position: relative;text-align: center;font-size: 14px;color: black;top: 10px;}.imglist {position: relative;