小试牛刀1：制作一个简单的导航栏页面_html/css

大学生网

大学生论坛

daxues.cn

首页

web前端

html教程

小试牛刀1：制作一个简单的导航栏页面_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

页面效果大概目标：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 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>

登录后复制

　　大概效果如下：

　　　（下面还有一个底部，这里没有显示出来）

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

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

  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 id="大学生网">大学生网</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 id="大学生论坛">大学生论坛</h1><br /> 97         <small>daxues.cn/forum.php</small> 98     </div> 99     <div class="main">100         <div class="main-header">101             <h2 id="大学生网">大学生网</h2>102             <h4 id="daxues-cn">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）

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn