用css配合HTML代码制作导航条下拉面板.docxVIP

首先我们来看看下拉面板的效果吧，这个事稍微复杂一点的下拉面板，我们会一步步为您讲解，如何制作出这样一个下拉面板，但前提是你需要了解CSS的定位知识和HTML代码，因此没有这些基础的同学要先学一下HTML代码和CSS（层叠样式表）的知识。下面我们先来制作一个简单的导航：css代码片段style type=text/css*{ margin:0; padding:0; border:0;background-repeat:no-repeat;font-size:14px;list-style-type:none;color:#F5F5F5;}a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:none;}a:active {text-decoration:none;}.navgation{width:100%; height:36px; line-height:36px; background:#000; margin:10px auto;}.nav{width:960px; height:36px; margin:0 auto;}.nav li{float:left; width:130px; border-right:#FFF solid 2px; text-align:center;}.nav .last{border-right:none;}/stylehtml代码片段div class=navgationul class=nav lia href=/首页/a/lilia href=/html/company/conpany-introduction.html关于建冶/a/lilia href=/html/news/news-center.html新闻资讯/a/lilia href=/html/products/product-center.html产品中心/a/lilia href=#工程应用/a/lilia href=#人力资源/a/lili class=lasta href=/html/contact/contact.html联系我们/a/li/ul/div接下来就着手下拉面板设计，首先我们来设计一个简单的，我们截取上一段代码中的lia href=/html/company/conpany-introduction.html关于建冶/a/li这一行，首先铺好结构：lia href=/html/company/conpany-introduction.html关于建冶/aullia href=#公司介绍/a/lilia href=#公司文化/a/lilia href=#企业实力/a/lilia href=#先进科技/a/li/ul/licss片段.nav a {display:block}.nav a:hover { display:block;background:#F00}/*下拉列表*/.nav ul{display:none;}.nav li:hover ul{display:block; position:absolute; width:130px; top:46px; background:#069;}.nav li:hover ul li{ border-bottom:#99C 1px solid; border-right:none;}复杂的导航面板其实也是也定位技术一步步掌握的，下面来个产品的面板：结构代码块儿li id=proa href=/html/products/product-center.html产品中心/aul id=menu li pa href=/html/products/high-efficiency-sand-making-machine.htmlspanstrong制砂专用设备/strong/span/a/p pa href=/html/products/high-efficiency-sand-making-machine.htmlJYS/T高效制砂机/a/p? pa href=/html/products/high-efficiency-sand-making-machine.html轮式洗砂机/a/p?pa href=/html/products/high-efficiency-sand-making-machine.html螺旋洗砂机/a/p? pa href=/html/products/high-efficiency-sand-making-machine.html冲击式制砂机/a/p? pa href=/html/products/high