你的位置:首页 > 软件开发 > 网页设计 > 小试牛刀1:制作一个简单的导航栏页面

小试牛刀1:制作一个简单的导航栏页面

发布时间:2015-11-30 17:00:09
页面效果大概目标:http://www.daxues.cn/forum.php 一、布局  从页面来看,可以分为三个部分,第一部分是导航栏,第二部分是有“大学生论坛”字样的蓝色部分,余下的是第三部分也可以分为二部分:搜索栏和主要内容区域 ...

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

小试牛刀1:制作一个简单的导航栏页面

 

一、布局

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

 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:制作一个简单的导航栏页面

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录