你的位置:首页 > 网页设计

[网页设计]小试牛刀1:制作一个简单的导航栏页面


页面效果大概目标:http://www.daxues.cn/forum.php

 

一、布局

  从页面来看,可以分为三个部分,第一部分是导航栏,第二部分是有“大学生论坛”字样的蓝色部分,余下的是第三部分也可以分为二部分:搜索栏和主要内容区域;而主要内容区域又可分为:导航栏、主体、底部。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="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>

  大概效果如下:

   (下面还有一个底部,这里没有显示出来)


二、现在开始设计第一、二两大部分

  第一部分主要是导航等,第二部分就是图片和文字。第三部分就是表单、导航等。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html ="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>

  效果:

    

      难点在于第一部分的所有内容要求在同一水平线上,实例中我是运用float、margin和padding来实现的,但是这种方法有一个弊端,它只适用于我的电脑,如果换一台比较大或者比较小的电脑,每个部分的排序可能会打乱。


  (技术不是很好,只做出了一个大概的模板~大家有更好的建议可以提出来!o(╯□╰)o)