首頁 > web前端 > html教學 > 使用div+css制作简单导航 以及要注意问题_html/css_WEB-ITnose

使用div+css制作简单导航 以及要注意问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:26:58
原創
940 人瀏覽過

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5  6 <style type="text/css"> 7  8  9 #headNav {10     width:960px;11     height:30px;12     line-height:30px;13     background-color: lightblue;14     margin:0 auto;15 }16 17 #headNav ul {18     list-style:none;19 }20 21 #headNav ul li {22     float:left;23     height: 30px;24     line-height: 30px; 25     padding:0 10px;26 }27 28 #headNav ul li:hover {29     background-color: white;30 }31 32 a {33     color:red;34     text-decoration:none;35 }36 37 a:hover {38     39 }40 </style>41 42 </head>43 <body>44 <div id="headNav">45     <ul>46         <li><a href="#">首页</a></li>47         <li><a href="#">网页版式布局</a></li>48         <li><a href="#">div+css教程</a></li>49         <li><a href="#">div+css实例</a></li>50         <li><a href="#">常用代码</a></li>51     </ul>52 </div>53 </body>54 </html>
登入後複製

 注意:

①第12行即导航的div要设置其高度

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板