ホームページ > ウェブフロントエンド > htmlチュートリアル > div+css を使用してシンプルなナビゲーションと注意すべき問題を作成する_html/css_WEB-ITnose

div+css を使用してシンプルなナビゲーションと注意すべき問題を作成する_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:26:58
オリジナル
945 人が閲覧しました

 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 までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート