Maison > interface Web > tutoriel HTML > 使用div+css制作简单导航 以及要注意问题_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 12:26:58
original
944 Les gens l'ont consulté

 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>
Copier après la connexion

 注意:

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal