網頁布局+純CSS縱向下拉式功能表 IE6/IE7相容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定義過渡型DOCTYPE--> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"><!--定義名字空間--> <head><!--網頁頭部開始--> <title>網頁布局+純CSS縱向下拉式功能表</title><!--標題列--> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--定義語言編碼--> <meta http-equiv="Content-Language" content="gb2312" /><!--針對老版瀏覽器定義語言編碼--> <meta content="all" name="robots" /><!--允許搜尋機器人--> <meta name="author" content="7273771@gmail.com,陽詭子,QQ:7273771" /><!--作者資訊--> <meta name="Copyright" content="blog.529600.com,共同探討,允許轉載" /><!--著作權資訊--> <meta name="description" content="下拉式功能表,CSS,布局" /><!--簡介--> <meta content="下拉,菜單,CSS,布局" name="keywords" /><!--關鍵詞--> <!--CSS樣式開始--> <style type=text/css> *{ margin:0; padding:0; border:0; } html{ background:#bfc4c7;/*背景顏色*/ } body{ font:12px/150% '宋體'; margin:0 auto; width:770px; text-align:center; } #menu,#nav,#footer{ clear:both; } #nav{ padding-left:20px; text-align:left; background:#a60; } #footer{ background:#a30; } #logo,#banner,#mail,#left,#middle,#right{ float:left; width:180px; background:#f00; } #logo,#banner,#mail{ height:60px; } #banner{ width:468px; background:#f60; } #mail{ width:122px; background:#f90; } #left,#right{ width:200px; } #left{ background:#093; } #middle{ width:370px; background:#063; } #right{ background:#033; } /*menu部分*/ #menu{ margin:0 auto; width:770px!important; clear:both } #menu ul{ list-style:none; } #menu li { float:left; position:relative; } #menu ul ul { visibility:hidden; position:absolute; left:0px; top:30px; } #menu table{ position:absolute; left:0; top:0; } #menu ul li:hover ul,#menu ul a:hover ul{ visibility:visible; } #menu a{ display:block; text-align:center; text-decoration:none; width:77px; height:30px; color:#000; line-height:30px; background:#c9c9a7; } #menu a:hover{ color:#fff; background:#b3ab79; } #menu ul ul li { clear:both; text-align:left; } #menu ul ul li a{ display:block; width:77px; height:30px; background:#faeec7; color:#000; } #menu ul ul li a:hover{ background:#dfc184; color:#000; } </style><!--CSS樣式結束--> </head><!--網頁頭部結束--> <body><!--網頁主體開始--> logo banner mail <ul> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> <li> 第一分類<!--[if IE 7]><!--><!--<![endif]--><!--[if lte IE 6]> <table> <tr> <td><![endif]--> <ul> <li>XHTML</li> <li>CSS</li> <li>PHP</li> <li>MySQL</li> <li>Fireworks</li> <li>Photoshop</li> <li>Flash</li> <li>Illustrator</li> </ul><!--[if lte IE 6]> </td> </tr> </table> <![endif]--> </li> </ul> 您的位置:網站首頁 left middle right footer </body><!--網頁主體結束--> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
