ページ効果のおおよその目標: 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)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
