Heim >Web-Frontend >HTML-Tutorial >使用div+css制作简单导航 以及要注意问题_html/css_WEB-ITnose
使用div+css制作简单导航 以及要注意问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:26:58958Durchsuche
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要设置其高度
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：div+css滚动条属性及样式设置_html/css_WEB-ITnoseNächster Artikel：css定义div圆角阴影边框_html/css_WEB-ITnose