Rumah > hujung hadapan web > html tutorial > 使用div+css制作简单导航 以及要注意问题_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 12:26:58
asal
941 orang telah melayarinya

 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>
Salin selepas log masuk

 注意:

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan