html通用导航条制作

第一步：先创建一个盒子，定义类为 nav，width 1000，height 40px，防京东的导航，与浏览器顶部100px，margin-top:100px,看的更直观

第二步：使用无序列表放置，导航条的内容，这个可以自己定，这里设定 ul 宽1000px;高 40px；因为ul是块状元素，出现下面的样子，可以思考块状元素在firefox中和 ie6下面有什么不同。

aaarticlea/png;base64,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" alt="" />

通常在写样式的时候，要初始化我们的css样式表，这里具体用到哪些，初始哪些，具体设置 list-style:none; margin:0;padding:0;

第三步：现在所有的栏目都是紧挨着，我们要给li设置宽度为100px，通过float:left 将他们分开，给li加一个 背景色blue，知道我们所处的位置，更好的去调节我们的页面aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfcAAABSCAIAAADGsQqZAAAEpElEQVR4nO3WbY7bOgxGYe3tAt3/Ku422n/FIPowlcyYMvscHBQex3ZMUnqb9hsAUJeW/QIAgB9EygNAZaQ8AFRGygNAZaQ8AFRGygNAZaQ8AFRGygNAZaQ8AFRGygNAZbZTvjWS/Of8/79fD/WTlG+TdszOs+/Mbg/bkR0+7X3Ot1LHtmp5o/BTepUe1ikpPxzAcCRB8ge5s/Je3nxRTusOLlfw5flz2hX8j6fG3NeFzKbfn39c1euG/Nz1BzUqPazvTPktTp/cu7buuM0veLkmGA2PaF3knZ9V0VbJu21pOw85092NHyf4LWm1p4d11m/5N5bsc9f3rIo2qmtYZn9y1o325eDEFT8pfPFKl5U+xchkZ8tjMdb0uj7pxhtzjzfwjaf9iOlhnZjy8b4fm1ZvONvG/Z8v5Qe71yYXHNKrl1ra/KN4pU8xUt1seSzWRnpdH7Zia+iXl524/tPD+v6UvyQ+8icu8b7Y9YqPb+91J9N79bXexejjb55e0RsdiJTfX/979OlDm/DTVawbmGN6WKek/NYKGE7u2xfHbc5W4fDK1t01S4f++cHzuR0Inp+RPs3PC5+N6e/x33+HE3xWExZTG67kCG80+W7Tw1rK3+xwG1+GV+vuvXz+ywOHGZHVgeCOLeYwktr8mtb9O7vmfBfzbbHLgsWe2JD0sE5J+TWX6+Doie6swuE2Xhd1WXL/nK3n39yBrdKe7jDQhyf7C2bjK9C0eAnBlN+Nlx83Paz9lr/Zfs3NtvEWfU9eDl6+5ZwOLHbgosbFXce6HtPsmja6fnb7sW4RaeBWt997wreZHtZS/mbX2/hyiV+W3O//4PNTOrD+KDL3EyraLXzx/vHlcc5Av6stw4/WLB41PM5pV3pYp6T81uT6ISXP7DPj2/jlrmHVw4XeJtcf0q6X91+83uWmPaeoeOFtdHJRTt+ur/N9UPmRAnfvXfeqP85pV3pYP+K3/CnT+g77xbcuarifZ3nxEpqz5+d2b7jPZ7VvHR9uP6/ZyfU1lx8d7rrkyI2zWxbsftd3mh7WD0r5txfHOS72cL9pW/fn1wuGydiv5jb/rvQmXA60L399fLjrAtc9mZX5oPIva9y68b3Cpfx9Kb9mOJvZ+YSZfeAscyPLd9iEWdMWG2nWzJubEBnobGFcLpgzDTKbWrCHD3K9EuJ88kV3mB7Wh/+Wv5zigxb6cKMOS5it+w+/6JCmrWcaiblF/J1sPI8iFz+o8BOqyGxXeljfn/Ik+Q+ZHtb3pXz6G5Mk40p5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqyslCfJykp5kqzsdsoDAB6ElAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKiMlAeAykh5AKjMHwf15Ac+KCduAAAAAElFTkSuQmCC" alt="" />，现在暂不去掉背景色，给 li 添加高度 height:40px;使用 line-height:40px; 垂直居中，text-align:center; 水平居中。 效果如右 aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd4AAABVCAIAAABo/BI7AAAEhElEQVR4nO3UW5KrOBBFUebWET3/UfQ0qn990YMUNuXDZe3YUUGBwMqUdLYfAEAY27cnAADYI5oBIA7RDABxiGYAiEM0A0AcohkA4hDNABCHaAaAOEQzAMQhmgEgDtEMAHGIZgCIQzQDQByiGQDiEM0AEIdoBoA4zkTztpHk4/zvn39/TdFMkiVFM0nGKZpJMk7RTJJximaSjFM0k2Scopkk4xTNJBmnaCbJOEUzScYpmkkyzidH87Z4/zm2HVjt1XarTt5lnjnesWNLcz5R4Id78uRo7naz298iV8/2XIG7GU6mvTUXh9vu8H5mW9qpHs7zXut+rpDRrmjv367qE3NeGv/5hjwwmpf4pWW4zK253sYDdmOK5/bWLarU8ndUujThUVu2lY98vcylA16n+CvvlvDAaJ5vxM8O/rrtuWr3VqXGUdXby8WF2/TK5rQtOuxk5X6slRUfbZvJcn+9rkrVJ9a33qgTX5spmutNvF307KprT1e3/G5Fh1uwuGVD3NW4jR/VO3AXK9WNts1kz3y9rmLJS4t7OOzC/f/YaD6kvn7J+7Itar5N62dv3rHYnrz2YbL09YpiK510oFJ+O/6n9zS/CZfOdt6ot3xyNK8+bZfh4yt9aZnzTfMaRtufN9uj236/eD/HSR8m/TlsSL6He3v37y5xuiub2YTJ6nR3coUTzTypaK4/He3FzH05mmclWbbm3cPv7z7YPcBR1o/fX2Y3X7bxmK35OxqT42Qdt9qwYlEXFv7kaJ5zuKi/sTyfKHN3vTtj88kfltZ+Z+n7IZ1ZKvnudlO4e7MdMFrWGzWtPtViNK/GSNUnR/Pq05tG826jjM7YEm3tu4vdrwRaP06T2idvxTpfvtGYrTd+9PrXXaLSqKWunvvCXtF8rtGj6zTnZ+xwXx6W1h7O4ve/bv1MVtY9udJRdZP517dN/kKPyu8+mjP5VPf6rbY8OZqXlqHt+GcW4GLrZ6xtzugLozZ2uxTrrq7JtA9PYH6xbTlb7+aknLZdr+seW/68kNV35z1pr99qy5Oj+f2nsTtysmPmk+8ettFh3iXa6PuZXeoe2lFPlq7DbddxdHM+5vBRiPPSKi+OXpmw+lsdRfPq09Mr/ftODlh7orbm39cB3dhqt+A2/q00R+dnUmbxOtx5gfOejMpMLv/0gX1/fUXzya7NGb3y4QW40lFQVvZct9hRcya7f9S0r/vak8NyuhvjcMNkWmS0msUeBjpf8Trv/NCCT47m+tPDJQncnd1T1J3qaLO++UPJzfk5WtNKNk0yK9l6uFQG36jw35ztB37osdFMkrmKZpKMUzSTZJyimSTjFM0kGadoJsk4RTNJximaSTJO0UyScYpmkoxTNJNknKKZJONMj2YAwKWIZgCIQzQDQByiGQDiEM0AEIdoBoA4RDMAxCGaASAO0QwAcYhmAIhDNANAHKIZAOIQzQAQh2gGgDhEMwDEIZoBIA7RDABxiGYAiEM0A0AcohkA4hDNABCHaAaAOEQzAMQhmgEgDtEMAHGIZgCIQzQDQByiGQDi+B+UMgiP3XRpkQAAAABJRU5ErkJggg==" alt="" />

第四步：为了体现这一步遇到的问题，我把最后一个栏目多加了几个字，aaarticlea/png;base64,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" alt="" /> 可以看出栏目之间的距离是不同的，为了寻找问题，我们给 li 设置一个宽度为 1px的 右外边距, margin-right:1px;aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcUAAABLCAIAAACObgvPAAAFj0lEQVR4nO2ZUW7kKhBF2dtIs/9VZBuZvygxUFzMhbIz5wi1+rlpuzgUVz0v5RMAAByU7AIAAH4J5CkAgAfyFADAA3kKAOCBPAUA8ECeAgB4IE8BADyQpwAAHshTAAAP5CkAgAfyFADAA3kKAOCBPAUA8ECeAgB4IE8BADyQpwAAHtQ8LeW/Hh9//qbXgAEMYCDdQDzIU9Vjeg0YwAAG0g2Qpx6P6TVgAAMYSDdAnno8pteAAQxgIN0AeerxmF4DBjCAgXQD5KnHY3oNGMAABtINkKcej+k1YAADGEg3QJ56PKbXgAEMYCDdAHnq8ZheAwYwgIF0A+Spx2N6DRjAAAbSDZCnHo/pNWAAAxhIN0Ceejym14ABDGAg3cDz87RMXs/xmPToWsKsrmKRedDAg/Y9ycBDpQkGpsq4UbP4lbLwiIGB5+dpc9lNESL+Ch1nqS4yqDxoiHt5Gkw4ZkC0pJR6dPc3G5jt6ub1jQufMTBbxtR8fXLzKK2bf3SeTmHZvPvDlKeX96U/4TJHMbPX0pE8VZZzYrFnDSg198yUmZvYDcweXh3xKT1Xej1zu/PkPL3XWPcm2ztpcXWltYTmiuqLQRt9vZltwTMGFD9iuw8l+MfZPA16o1Svn8aNXjDQ7Oobu6Oci8Cb+PUb5t+Up3oH+MNiODbnaa8Rm4satpfeT4cNBGZqOYEBRYJ/PDhP9SbZZ6C3g7MlBWsZNvaXjYAV8y/I0yH6xjz8LNXriluwnhPMnG2aFAM9J80llOpTZVEP74Gg5qGBev5n69ONHvoGthYQr72epvf/rPl35Onsp7Vf+xZex5F/73//tG6O3n7X9xevnzcgyhGvB2dgy3jq79Pm/m7x0DIQOG+2qMINP/pTVsyTp6axLU/jTvo+U7//5YalVUCKgbh45QBkjoN5Gp/8Ur325mw1EOxO0aaJdc6uJVC3aP4deRoz3K3b3ifGzt+npTVB2fvehNJ6yqqfh/0+TRin8rT0L9YTepu7xZtsQH+6MnM2IvT5s+bfkaezn/aMbDx7O///aX0kpqiXf3nT7JIUA7qc5gJ7GuPrj+qB3tqDTezNKa35va/vMDCFsvYpUcHFpk+LefLUNPb/Ph323HB1dUOI9z9mQJQTf6Ts/pZO2J+nwRL05vFs95qBeDdjgls13xf5zvVTZs2/I0+n/NYWmlKyOklsstJ57fkZ7vrFZNAuiQZ0OUHlPQmxHMPY//f93jIVD5fdP2kgrk1Zuzih+T44OD23982/Ik/XP93SPReP1pVeNrJZf/Ns9Dqg/Lxb7/73RR3/fVo61Q4P2NIyMww0D7ByyAM/hw3E1Spr730lIPii2PnT5n9xnt7ewjtj+SwFO1fvYqn+8/uEUt3t8mnzzeoxO5Wnw22tzcTvbePs3/fjK3FMnDdw+zCu71r96KArprqrceUVeRrT+8rQrHP48rT8fFX6qbnenp+gY3rezhhQ/Cjb2muPYdusjp15qtDbU1HjGQPxPuoo0moV9RebV8pkST8MPD9P9U+HrhM7aWoVwWavLKr3IIOfI3/fV9Y1+942Dv4+DeYMJ+86ArKBjQUsePPc4fl5+o6xOU1eMDCAAQyQpzaP6TVgAAMYSDdAnno8pteAAQxgIN0AeerxmF4DBjCAgXQD5KnHY3oNGMAABtINkKcej+k1YAADGEg3QJ56PKbXgAEMYCDdAHnq8ZheAwYwgIF0A+Spx2N6DRjAAAbSDZCnHo/pNWAAAxhIN0Ceejym14ABDGAg3QB56vGYXgMGMICBdAOePAUAgBjyFADAA3kKAOCBPAUA8ECeAgB4IE8BADyQpwAAHshTAAAP5CkAgAfyFADAA3kKAOCBPAUA8ECeAgB4IE8BADyQpwAAHshTAAAP5CkAgAfyFADAwz89F8nMZDuK2gAAAABJRU5ErkJggg==" alt="" />  这个时候就很清楚的发现问题了，由于给li设定了宽度，所以当文字多了以后，不能够自动伸缩适应，这时候就要去掉宽度。aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAABOCAIAAABnm95xAAAEhklEQVR4nO2YbW7cMAxEdbcAuf8p9hrtnyKxxQ9xbCeStu+BKLxeWRSHHDjb9gcAyrTZBwDYCQwDIIBhAAQwDIAAhgEQwDAAAhgGQADDAAhgGAABDAMggGEABDAMgACGARDAMAACGAZAAMMACGAYAAEMAyCAYQAEMAyAAIYBEMAwAAIYBkDgGcO09rPx+vj86RQLHuk9UqwWr4/PO4Fh1j3Se6RYLTDMNN1JsWNgmGm6k2LHwDDTdCfFjoFhpulOih0Dw0zTnRQ7BoaZpjspdgwMM013UuwYGGaa7qTYMTDMNN1JsWOsZpgWHDS6/zt9tdnVc7bu2/hItyp9tOrxqR6q4kLJxUfajRShqksZxq3NrbZI11f7rf/ISO5rhvm+CEat91W8W1bvOYUgVCBReKTnbC+try92u3l3llYwjIQs4tkw+XS6H7/+HR6pejxv1Cr7CFkOhrk8WC3P+JAnK48U9ZdsUFT7tGYRw2gGUBffMEx0M2lSpVvWMPYwSVHD7N00D3eIZEnK6YTNa7nW3EprkgKLj2sSrWmYoqBuI08dNX2NJiNps5W+0rxBt8xfie5KN3V1dJ4zTFj+pfdksbmJ5gNtD8dOGB7JX7OUYYbcHB2bYthguyZZKbTk9fF5PkNS8ni3tOpiCrfkQfnBe7Jy1AuRH9IuK4qmSbSaYYp6JSImo5OI7u5spY/UrHfLHbXkDMnZBod56A3jVmSrsFK4Sg7PHwlbLKSeRd35u2QMk/epm6E82uHiuGHrFhjDVPqqRWyYfGKa+TeU9/yeHHYnKUfSthhJjcOdQ4lWM0zOsCW+BIU3THMf1Htm9/H3v/eGKUVgmBbfrMviVnHn/JWV6njU1wsSrWYYVdOo7NPiwm8YOxkSNm930ffg6hsmydvf9wxjjxdJ17z1/eOHN0yRO4apT8JgHmorfYn+Q8MkkzHs6LCvVm5//9obJmxb5doYJhmguizNSyG17OurHLXRrbyzzSJItJphJBGjueyrvW0YV1x3fbEZiWGiXMW5sdPslpZ/dI90rKtLUdkkj+HKYeFJ7yr9rUq0mmEua5oJVzBMtH8/Iqm+7bxbtH+rjVp0nur11d8w+Xg1L8VgyAqRd+EoryVvX2V/QaL3MMygT4XRsRo187HT3Z4naU+fJTDMoBDvSOF1UHXlTj5eNkW1EbUO1p/KUyf6SDr3JS9lmBxXpuj+98fgr/nm7ZCMiCtidD+ZhmZGrcWp3TmweZ37h6orVGa3P2f8GyavqI67eZ7IfdC908QjrWiYoTS5Lv7617//zHG/rYg7PFt+TmeBMUyyf7t2Hb9hkhTDxacF6Y/+umI3Qyrw7g5LGeanIu3rnPiFI71HitUCw0zTnRQ7BoaZpjspdgwMM013UuwYGGaa7qTYMTDMNN1JsWNgmGm6k2LHwDDTdCfFjoFhpulOih0Dw0zTnRQ7BoaZpjspdgwMM013UuwYGGaa7qTYMZYwDMB/AoYBEMAwAAIYBkAAwwAIYBgAAQwDIIBhAAQwDIAAhgEQwDAAAhgGQADDAAhgGACBv2iy+GpTmv+fAAAAAElFTkSuQmCC" alt="" /> 这个时候，宽度能够伸缩适应了，但是文字的空间太少，影响视觉，解决办法，添加所有内边距10px，给li 样式添加 padding:0 10px; 现在效果好多了aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXQAAAA9CAIAAAAyIQUUAAAFEklEQVR4nO2Ya44bIRCEuVuk3P8Ue43k38Yx9BsWD3ylljUZM1BV3VPypv0BAIAFaLsJAADOBOECAFgCwgUAsASECwBgCQgXAMASEC4AgCUgXAAAS0C4AACWgHABACyBGC6tfW59/fq9ncM9cqB3Un39+v1jRbjsrw+XA72TinCxDdrO4R450DupCBfboO0c7pEDvZOKcLEN2s7hHjnQO6kIF9ug7RzukQO9k4pwsQ3azuEeOdA7qQgX26DtHO6RA72TinCxDdrO4R450DupCBfboO0c7pEDvZOKcLEN2s7hHjnQO6meFS4teH+OQSsb0DOPamwhB7JyFjr8g25XFf2Iewlizkda4YhMPStchr4MnXLCZZCb2NvOynFKm3Ph4p2Y1OvhzK+SzxF60eYO7wdY1dxLnBVa7188nMC6vZpdnx8uIUzpbmKe+s41ecHbGo+cOdLir4eHwzSG7nBJ026RTdL0QoPqh/OUHKu0vZpdnx8upXkNLs7N059Re/pp8HBThsMzJbPkSEKUI0zms9z2OCm1Q7FxFj3Tw5w/nnFSzHE+nrBXs+tx4eIf1vxL+GpQnFU/x0PaQybm0GTanJLTK1Joe5jPohed/iZ8hkku+N3nNEchbM7Dt2QFFXs1u54SLib8nZs+7j09c7D6NcrK6ChU5LzyV6z2M5nutpPe0Gq/7ZVh0Js+pXSB/TL/2ETt1ex6ULhEv+0bEO7xvD+LXr/tWy510T8l018Phb+iyxRSp2f2WmnH0Pzp7imqh531IGGC/5SKvZpdhMuseXq7NufjdaV//7cN24hAXc6QvyJkTmXDRX9DWvcpranTU/xpvmVOMtEuKP4U7dXselC46DDbmWlM+ZdLGy1IzEq/T2j/qBxlw+hYByoVLk2+6W/HdPcqvnlWRl8H//qovZpdDwqX6LeSZYHXI/hL+LVV0jSH0HN+uxj2vi5H52lq1+8X6em2SGvaaL30eJpeCB6BITeUm0PTptir2UW4FOdJ2n8409KDJqW+zc79c3I8nEM+e8cxQkzZ39+OgIHLfrmYULYaXjf3zv0pUXs1ux4ULqEG9DYNXZs1T30n+k9JlNnLN/nKEMyS0/NRjpOY64rS9IaWmtPfy3n1cyI9D4Hos1HDlXmTDCzaO7brQeFS/zbwHn4bFKf31p7hocOxlvra/t9N2t9WV349JC2h6yK94aB7XgaF/ER6OofQg9IjCpQHnQOTsFe06/hwSffYP09KP/retO6fb/3uGSpjIZ1SkSOdJRnYy9Gv57rtuaO/TnPpmRxCD8bGVT5a6UuovzG7HhQuOqRHkpMUmae32f3+9EzJkKQkSpkDSWxCTq/FpDFshNmgtNseSC45NRbd8zvpR+Kg4YPDOy1IyWXXg8LF/62pf+I89UcrLcwzkQ8KbBUMF2XDVrgu0vO/Zp7Ffv8r/6EbOKVWIXMW7fDPrqeEy54qzNMn1ofLgd5JRbjYBm3ncI8c6J1UhItt0HYO98iB3klFuNgGbedwjxzonVSEi23Qdg73yIHeSUW42AZt53CPHOidVISLbdB2DvfIgd5JRbjYBm3ncI8c6J1UhItt0HYO98iB3klFuNgGbedwjxzonVSEi23Qdg73yIHeSUW42AZt53CPHOidVISLbdB2DvfIgd5J9RHhAgAAFRAuAIAlIFwAAEtAuAAAloBwAQAsAeECAFgCwgUAsASECwBgCQgXAMASEC4AgCUgXAAAS/AXzE1sj1aLOHAAAAAASUVORK5CYII=" alt="" />，然后把 margin-right:1px 去掉aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU4AAAA7CAIAAACbqfT4AAAD50lEQVR4nO2cUY4cMQhEuVuk3P8Ue43kJxrNtAGDjbs3yyuVWh2PbaCgMpOfyB8AQAPI0wkAAO4AVgegBbA6AC2A1QFoAawOQAtgdQBaAKsD0AKK1UUghD+BX79+v4jVIfyxxOoQtiBWh7AFsTqELYjVIWxBrA5hC2J1CFsQq0PYglgdwhbE6hC2YJXVJbn+zTmmnS1Qzpf/n2r7eDmpQAtZBY/IRogVFn6rB+0RRGFfL9c6sRz116x+rpHBv0puUHihp+r6IaHiLSvZH9+sDt6+tiY3rZ5Cie47fRUtovrH13NayyN1RRK4M73IbVbOkrlkLbfUcMYRjLKW1bK2Jsv/rR6Keri7VgjRgqo5jItOzyLNK68oOA3TtMtFthatRjgCFmboqLemTGSKHGWCxxe0NVlr9Xh77nHFJaVxttSc1TSmvVxRP1/LWI6TcyTtcpGtRasRThdOCJjKOV5vfAxe9TrY0dZkidWniGta3uAxE7/f4x5nZ7ZDm1X4Ur9vu1nnYG6qyHHBS5I8FMKvbtwWn5astiarrJ79dJTmhgb7usjbR/K5OIobb15tRU7yTlHTKk5kZQlyaYQqe61uTr1qQyNYUCAeZUdbkz2t7rftfWf8/suFoiVQUk5kPm7mGN0fWRme1p4SuaY5+wKmxmBNsVR0X1uT3+EHfHmD/UCXCfMjTvMZ70ndv1NOutnHqE6eM46RRpyuKH5/ZGfWAvH9WW1NdvhWvyhoTVgKY8KXF7Ul5eWoKVmF++ubWTmCWHtE228dL5drKqCaeUoKZ1FVrERbkx2sfnlX58w6OM1nVD94/345/kcRhavSU0dwmo8l1CHpUkr6cK5S3yV88xglq63Jx3/Ai11PeUfFeFoVTSW+1O705lA5Tiwrbb+cnaz8+ZtmeFGyVj0/evZsVmpnzCz1NrVV+NS3elyOTY7S+xHVUbPkls/brPsLS1NH1iok9V6YVXw6nczL52HFHp87rSMOnIPBOVnQVuezVl9Wf6e74/O9YZamMtzmd8uKUlXRVLqxFv+9UOfIij/ftaIFFYscXMtqDO10JNXZRFYP/oC31k90Vz6fkeapGVoVOe2xKt2pKCKd1YJpa9ayisDSJ1jgPRrGsRBIPaiuSDKleeH3f6tPM6tq8xjXUXYnDStQeUVT9WTjvVBqf890c6FcD4ZYUObQDf/If00BYQtidQhbEKtD2IJYHcIWxOoQtiBWh7AFsTqELYjVIWxBrA5hC2J1CFsQq0PYglgdwhbE6hC24MTqAICfB6wOQAtgdQBaAKsD0AJYHYAWwOoAtABWB6AFsDoALYDVAWgBrA5AC2B1AFrgL9fmTsdH+qjKAAAAAElFTkSuQmCC" alt="" />

第五步： 因为导航是需要点击的，我们需要放置 超链接（a标签），放在哪里呢，放在li标签内，操作如下，给li添加a标签，设置文字大小12px，规定鼠标移上去和移出的效果。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUwAAABaCAIAAABc9Pg6AAAD1UlEQVR4nO3VUY7bMAxF0eytQNc1q+022r9BEcm0Yothyp6Lh2ImzVgyxSs+fgNozaN6AwByITnQHJIDzSE50BySA80hOdAckgPNITnQHJIDzSE50BySA80hOdAckgPNITnQHJIDzSE50BySA80hOdAckgPNeUHyx0NEovz68fMDQ3KRbSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3+R2Sfz2+gk++Hl9x3nAM36s8bez0Rb4/3L7P4IF5Vbp2FqlndPrwldXXHzI99Jv9We7zmyZ5LE92xzwdyfSQRldfknz7hoMnL27s8rrxwY3Vq5U8LtSKlrHAKzWJU+5zruSv3oJJ7bJucrzPv39InaVHvx5V6c2Sj59srMNKzyz21cqlPBb8Qk3ilPv8pkkeV2T9FrjZu7Hk8Xkf3e55et9pxDuFimfa079jlbbs5Oi8VlaZXspHhT1637FngprEKfc5XfIVgQP5d/XKtFlXxlTcPRs3GZTrwncurz4uNC3RU7ni4Xm5Dke/Xnido1vp9DRXahKn3Od3SL54AOt/e/mwTyfD9Nqefm063zZudXsRXl396NbLljzw8GnAXh4e0xXjSR7XJE65zx83yTOG5KLDp+tOL4vtkseFevp87zyPpT1664wjWzyR0/O6037rNYlT7vPHTfIkyY9m71SV00t9/Nst+4ybbPrz3nLFz4wl33XZLZ5FXLRXqxqstVKTOOU+/6eTPGjKoFmDa2JXXm21DMnH942rN+5z45Edvdr6jXxat7iAKzWJU+7zR0zy8QC2mzM94PWe/vt/nzaZ19zjPt8s+cregv1klCL4ZnAvBFdVnJdqcpRynz9ikj8Gwaaf3G+XeBaN7XJ6tW+/lY5ulmkxp5/cXP206cdNHhVnYxZNC2oVqHt6ma7UJEi5z/WTPK7Uxun0JMb0+ad3zcrPN3d7NCSnK+7dw6sDc5RhSxHGgkwP5bJ40044ep3F+yVIuc/pkov85yn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3meQiuSn3+a7kAP5FSA40h+RAc0gONIfkQHNIDjSH5EBzSA40h+RAc0gONIfkQHNIDjSH5EBzSA40h+RAc0gONIfkQHNIDjSH5EBzSA40h+RAc0gONIfkQHNIDjSH5EBzSA40h+RAc0gONIfkQHNIDjTnD0/OSgxq/nGRAAAAAElFTkSuQmCC" alt="" />

第六步：如果希望鼠标移动上去显示 黑红色，给a 链接添加一个背景，以便看书a链接的区域。这里给a链接添加 黑色；aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABDCAIAAACpyq8ZAAADUklEQVR4nO2WS46cQBAFuZsl3/8UXnIFezMLqPwVTRavkSP0NOqhGUiyMorZ/gKAlE1dAMD/DhICiEFCADFICCAGCQHEICGAGCQEEIOEAGKQEEAMEgKIQUIAMUgIIKaQ8M+v34SQpUFCQsRBQkLEQUJCxEFCQsRBQkLEQUJCxEFCQsRBQkLEQUJCxEFCQsRBQkLEQUJCxEFCQsRBQkLEQUJCxLkl4fbDvo3s5895tlsPMMVuPpRlDwfb63TvlXTsh3s11GuRdq+lhvk+TJ5w6SLuoi+cz8ckHJ4t74jz7e1FHcbIHazd3P2ShC11DtecHfpWCZN7Rd3TSpicM7mV5JtO3ZMvl/Dqzup3s0PC4/UT0/I69/S0luHbTXkzXXpYQnuksQ8zMzM5V8WmGTT8QrdfIWH5PMdGhN18SsJ8PaLdsVGAzwrrrSFaji34abv0wH8E0SAN37o2lpuIa3LWk++XsNyukp42SugO08w2n6/u6XPH8OWNqs/pkHC4kduioV2nD319iCqZJPKtPC361i3sHRJONig8p0PC4wVLu8rNwn8/NA1f0qiaPgmjXWm1hIknu7cEH2zu9uLlmzDrySskvNQs5/MCCZP3TLJ4rsztEuaNGo6PR5okLEfQVbGxD5Mrkn+bzN7M+A1Hwp68QsKycQ9I6L+7glEuN0X7ty11uu3Km9MrgH/N4KnDn7drmJTHLdKl7Gpyr7onr5Dw462oUcLjBaPm2nPsV9kVmiS8NAorJLTPm3dvrLOpD3ZRbG0zO2bZt+QubiWvlNAleeBxw1sj4VR/zye7L8B1w2frfFjCgWisx3o6+lDezr/1xJ+720f5Jsxu/QoJyzfhlh9ZI2FhVLwA7or2SmjNP/46jMjpyG0Jy6G0RY7NaZIw6nnybdKrRK1ysyt68goJy8YlLW7c3YfBte12i7EahJ+bJIxeMu7de2u4+sKxw7o19WG4rLsok/u7+yB2EqLHqXvy/RI20LqoC/mGOqnheb5aQkLI/SAhIeIgISHiICEh4iAhIeIgISHiICEh4iAhIeIgISHiICEh4iAhIeIUEgLAapAQQAwSAohBQgAxSAggBgkBxCAhgBgkBBCDhABikBBADBICiEFCADFICCAGCQHE/ANiIMYjOuHbCgAAAABJRU5ErkJggg==" alt="" />，然后你发现，当你的鼠标移动到a标签后会出现小手的状态，为了用户体验，我们可以给 a 标签设置一个高度，让我们鼠标刚 接触li 标签就出现小手，添加height后，不管怎么刷新都不会出现，还是原来的样子，引发思考。因为 a 标签 是 内链元素，内链元素是无法设置宽度和高度的，我们需要使用 display:block; 将内链元素转换为块元素。这个时候会出现两种情况aaarticlea/png;base64,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" alt="" />

aaarticlea/png;base64,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" alt="" />，实际效果总是与期望效果不同，这个需要常年累积和对不同浏览器支持的了解。IE6 下面，认为a 标签既然转换为块元素，就要有块元素的特性，独占一行，再加上也没有对a标签的宽度设定，为什么firefox中没有这样呢，那时因为firefox 认为a标签即便是 块元素，也要受到它外面的li标签的影响。如何解决呢，因为现在a标签是块状元素了，所以给a标签添加 float:left; 即可。 现在两个浏览器显示的内容一样了

第七步：当我们鼠标移动到栏目上时，就会变成小手的形状，因为小手的形状是因为有a标签，但是我们发现a标签的宽度有点小，所以这里需要加宽a标签，这里使用 padding:0 10px; 因为之前有给 li 添加padding:0 10px; 为了能够更清晰的控制导航栏目的宽度，这里我们使用a标签来控制，去掉li 的padding。最后去掉a标签的背景，导航栏完成，兼容IE 以及常用浏览器哦。。。

最后的结果 aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbQAAAB0CAIAAABiyVARAAAFTElEQVR4nO3YYW7jNhSF0eytwKy0a8s2OD8CGI74SD5RCul4zsFFkDqOpMrOB7cfBYDKx+4LAHhF4ggQEEeAgDgCBMQRICCOAAFxBAiII0BAHAEC4ggQEEeAgDgCBMQRICCOAAFxBAiII0BAHAEC4ggQEEeAgDgCBMQRICCOAAFxBAiII0BAHAEC4ggQEEeAgDgCBMQRICCOAAFxBAiII0Dg1eP4+d+f7fv/4+Of2vYbbvYKE8fxttdKHM3WTxzH214rcTRbP3Ecb3utxNFs/cRxvO21Ekez9RPH8bbXShzN1k8cx9teK3E0Wz9xHG97rcTRbP3EcbzttRJHs/UTx/G210oczdZPHMfbXitxNFs/cRxve63E0Wz9xHG87bUSR7P1e4c41k97fuT6Ka7nppRy+ObwfeuRx4OHH4UPDg/1E3Hs3MDpFzRz0onX9K6zzx08c/b8QcL3/MX3uR32DnH8rGqYfGZymfY9HP6xfM9imY1jppitHNcXc1ccv25m65bWj0/c/IkjP67q8Ea66+zT76vOjcq8+ft/Jpl7Yqf2u+N49teHBwx39oNhaRewdZ39oj0/p/+0ic7OxfFwe5N3e+7+h2fvPFKqWJRGLi9ew/C9l3lO67YcHqxv+MQ9sVP73XEcvj8ej185/l1x/DrjsJv5D5j1ETofFevjzMXxcN9KO5H17T37gvZf6NYLGn4tVWtu/CsqVY4zZylVHDs3tvM2zt8TO7VfH8fM77aOkzn+59R/VrdSWD8yrF6JGposcnjAGz859l+suRc0efb6RIef1l/Db65fyeHUE0cOLz68n523buae2Km9QxyHj2ee09mVT46tJzwLn/b4UevrqcjWz7kex7mbecvqF7f1SPmxOIbvz1KlLfPeTl5M/ziZe2Kn9g5xHP5u5vvOJuL4rPP8TGTL6INh/wm1BZ8c68fPvqzDs7e++WzHceKln76wUz9tv4WPd7VzqMw9sVN7hzgOH89831kmjg+ttPX1q1caHxXL9yyG/7jlk2P9/cRtH549c8b+14vXcPatOzzp8K52zpW5J3Zq7xDH4e9mvu9s4pNj+IEuTFgd2eQROjWsfzE83U98ciyNP9GJ294/e30x4RkPXw/XeX31lZx9f/bfnOF1Zh7s/AlYcu8Qx/zjpf1/uzubi2OdpK/ztir5+Onja2kksnWW+jlrPjmW6u+8/mn4/On1j9A/V309N15M5sJKu6et+5b5M8nfE0vuHeKY+d3MI61d/+T4da5hPVuNe/x6Mnyl0dPb41ieali+/2EfXoizL+v0i/58/NKuxvVr6NyW4U8796q+b51fTx7nlnv+D+4d4th/vH+czCnyZSxVy0oVsv4jE9/XB+y39a441reuNP5ow0eurH+E/hmT76uJS6qPfPHt/XjO4cnhv07mntip/fo4Llg+K++x7Tfc7BUmjuNtr5U4mq2fOI63vVbiaLZ+4jje9lqJo9n6ieN422sljmbrJ47jba+VOJqtnziOt71W4mi2fuI43vZaiaPZ+onjeNtrJY5m6yeO422vlTiarZ84jre9VuJotn7iON72Womj2fqJ43jbayWOZusnjuNtr5U4mq2fOI63vVbiaLZ+rx5HgC3EESAgjgABcQQIiCNAQBwBAuIIEBBHgIA4AgTEESAgjgABcQQIiCNAQBwBAuIIEBBHgIA4AgTEESAgjgABcQQIiCNAQBwBAuIIEBBHgIA4AgTEESAgjgABcQQIiCNAQBwBAuIIEBBHgIA4AgTEESAgjgABcQQIiCNAQBwBAuIIEBBHgIA4AgTEESAgjgCBv/OWhrxIMonjAAAAAElFTkSuQmCC" alt="" />

这个导航可以延伸到不同的导航中，基本都差不多。重要的是，了解到一些元素在火狐和ie中的区别，更好的避免所谓的兼容性

最后 去除外面的div 后， 还是可以兼容浏览器的，很爽啊，上代码

<style type="text/css">
	body,div,ul,li{padding:0px;margin:0px;}
	ul{list-style:none;}
	ul{width:1000px;margin:0 auto;background: #e64346;height:40px;margin-top: 100px;}
	ul li{float:left;height: 40px;line-height: 40px;text-align: center;}
	ul li a{font-size: 12px;text-decoration: none;height:40px;display: block;float: left;padding:0 10px;text-decoration: none;color:#fff;}
	ul li a:hover{background:  #a40000;}
	</style>

<body>
		<ul>
			<li><a href="http://www.baidu.com">首页</a></li>
			<li><a href="http://www.baidu.com">服装城你好</a></li>
			<li><a href="http://www.baidu.com">食品</a></li>
			<li><a href="http://www.baidu.com">团购</a></li>
			<li><a href="http://www.baidu.com">夺宝岛集团</a></li>
		</ul>
</body>