小さなテスト 1: 単純なナビゲーションバーを作成する page_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

小さなテスト 1: 単純なナビゲーションバーを作成する page_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

ページ効果のおおよその目標: http://www.daxues.cn/forum.php

1. レイアウト

ページの観点からは、次の 3 つの部分に分けることができます。最初の部分はナビゲーションバー、2 番目の部分は「大学生フォーラム」という文字が表示された青い部分、残りの部分が 3 番目の部分で、検索バーとメインコンテンツ領域の 2 つの部分に分けることもできます。メインコンテンツ領域は、ナビゲーションバー、本文、下部に分割できます。

 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=utf-8" /> 5 <title>大学生论坛</title> 6     <style type="text/css"> 7         *{margin:0;padding:0;} 8         body{ 9             margin:0;    10             width:100%;11             height:1000px;    12         }13         .header-nav{width:80%;margin:0 auto;height:50px;}14         .section{15             width:100%;16             height:100px;17             background-color:#726FEA;18         }19         .main{width:100%;height:850px;background-color:#D5F5FB;}20         .main-header{width:80%;height:100px;margin:0 auto;}21         .container{width:80%;height:750px;margin:0 auto;}22         .main-nav{height:100px;}23         .content{height:600px;}24         .footer{height:50px;}25     </style>26 </head>27 28 <body>29     <div class="header-nav"></div>30     <div class="section"></div>31     <div class="main">32         <div class="main-header"></div>33         <div class="container">34             <div class="main-nav"></div>35             <div class="content"></div>36             <div class="footer"></div>37         </div>38     </div>39 </body>40 </html>

ログイン後にコピー

おおよその効果は次のとおりです:

（ここには表示されていない下にもあります）

2番目、今から最初の部分と2番目の部分のデザインを開始します

最初の部分は主にナビゲーションなどです。 .、後半は写真とテキストです。 3 番目の部分はフォーム、ナビゲーションなどです。

  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=utf-8" />  5 <title>大学生论坛</title>  6     <style type="text/css">  7         *{margin:0;padding:0;}  8         body{  9             margin:0;     10             width:100%; 11             height:1000px;     12         } 13          14         /*header-nav部分*/ 15         .header-nav{width:80%;margin:0 auto;height:50px;} 16         h3{color:red;float:left;padding-right:25px;margin-top:5px;} 17         ul{list-style-type:none;margin-top:5px;} 18         li{display:inline;padding-right:10px;} 19         .header-nav a{text-decoration:none;color:#000;} 20         .header-nav a:hover,a:active{text-decoration:underline;color:red;} 21         #inset{margin-top:-15px;margin-left:400px;} 22         .righter a{float:right;border-right:#CCC solid thin;padding:0 5px;} 23         .righter{margin-top:-20px;} 24          25          26         /*section部分*/ 27         .section{ 28             width:100%; 29             height:100px; 30             background-color:#726FEA; 31         } 32         h1{color:#FFF;float:left;margin-top:20px;margin-left:130px;} 33         small{color:#FFF;float:left;margin-left:-150px;padding-top:40px;} 34          35          36         /*main部分*/ 37         .main{width:100%;height:850px;background-color:#D5F5FB;} 38          39         /*main-header部分*/ 40         .main-header{width:80%;height:100px;margin:0 auto;} 41         h2{color:red;} 42         h4{color:blue;} 43         .search{text-align:center;} 44          45          46          47         /*container部分*/ 48         .container{width:80%;height:750px;margin:0 auto;background-color:snow;border:1px #E8FDEF solid;} 49          50         /*main-nav部分*/ 51         .main-nav{height:100px;} 52         .main-nav ul{list-style-type:none;} 53         .main-nav li{display:inline;} 54         .main-nav a{ 55             text-decoration:none; 56             color:snow; 57             background-color:#FFB366; 58             float:left; 59             padding:10px 25px; 60         } 61         .main-nav a:hover,a:active{ 62             background-color:#C44000;     63         } 64          65          66          67         /*content部分*/ 68         .content{height:600px;} 69          70         /*footer部分*/ 71         .footer{height:50px;} 72          73          74          75     </style> 76 </head> 77  78 <body> 79     <div class="header-nav"> 80         <h3>大学生网</h3> 81         <ul> 82             <li><a href="#">社区</a></li>     83             <li><a href="#">新闻</a></li> 84             <li><a href="#">励志</a></li> 85             <li><a href="#">网校</a></li> 86             <li><a href="#">淘学生</a></li> 87             <li><a href="#">导航</a></li> 88         </ul> 89         <input id="inset" type="text" /> 90         <div class="righter"> 91             <a href="#">登录</a> 92             <a href="#">注册</a> 93         </div> 94     </div> 95     <div class="section"> 96         <h1>大学生论坛</h1><br /> 97         <small>daxues.cn/forum.php</small> 98     </div> 99     <div class="main">100         <div class="main-header">101             <h2>大学生网</h2>102             <h4>daxues.cn</h4>103             <div class="search">104                 <input type="text" id="inset2" />105                 <input type="button" value="搜索" />106             </div>107         </div>108         <div class="container">109             <div class="main-nav">110                 <ul>111                     <li><a href="#">论坛</a></li>112                     <li><a href="#">门户</a></li>113                     <li><a href="#">新闻</a></li>114                     <li><a href="#">家园</a></li>115                     <li><a href="#">励志</a></li>116                     <li><a href="#">网校</a></li>117                     <li><a href="#">书库</a></li>118                     <li><a href="#">淘学生</a></li>119                     <li><a href="#">签到</a></li>  120                     <li><a href="#">手机客户端下载</a></li> 121                 </ul>   122             </div><hr />123             <div class="content"></div><hr />124             <div class="footer">125             </div>126         </div>127     </div>128 </body>129 </html>

ログイン後にコピー

効果：

dieQu ようこそ >> 私のコンピュータに当てはまりますが、より大きなまたはより小さなコンピュータに変更すると、各パーツの順序が崩れる可能性があります。

(技術があまり良くなくて、大まかなテンプレートしか作ってない〜もっと良い提案があればどんどん提案してください！o(╯□╰)o)

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。