您现在的位置是：首页 > 前端学习 > Web前端Web前端

制作主流网站界面（第十九章）(图文)

第十三双眼睛2020-03-17【Web前端】人已围观

简介本章中，将综合一些基本的知识技能，详细介绍一下一个页面是如何从构思到计划，最终展示在互联网上的，本章的知识点如下：
1构思页面的布局
2制作页面的顺序
3理解制作页面的基本思路

构思基础的布局
从前面的知识中，已经了解到设计一个页面。首先设计师心中需要明确摆放哪些内容的时候，接着就是去构思如何去布局这样的页面。可以把页面分成4部分，页面的顶部，底部，中间部分。中间部分又可以分成侧边栏和主要部分。所以在写代码的时候，它的结构看上去应该是这样的。如下：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>页面布局</title>
       <style type="text/css">
           body{
               padding: 0;
               margin: 0;
           }
           #container{
               width: 100%;
               height: 700px;
               background-color: red;
           }
           #header{
               width: 100%;
               height: 120px;
               background-color: blue;
           }
           #aside{
               width: 20%;
               height: 500px;
               background-color: green;
           }
           #footer{
               width: 100%;
               height: 80px;
               background-color: #f90;
           }
       </style>
   </head>
   <body>
       <div id="container">
           <div id="header"></div>
           <div id="main">
               <div id="aside"></div>
           </div>
           <div id="footer"></div>
       </div>
   </body>
</html>
完善网站的子模块
接下来的工作，基于已经创建好的页面结构，之后的任务就是一点一点的细化完成各个部分，如头部，底部，侧栏和页面主题部分。只要按部就班，这些都不难。
导航栏
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>导航栏</title>
       <style type="text/css">
           li{
               float: left;
               display: inline-block;
               width: 100px;
               border: 1px solid red;
               margin: 0 50px;
               text-align: center;
               background-color: #ccc;
           }
           a{
               text-decoration: none;
           }
       </style>
   </head>
   <body>
       <div id="tabs">
           <ul>
               <li><a href="#">菜单1</a></li>
               <li><a href="#">菜单2</a></li>
               <li><a href="#">菜单3</a></li>
               <li><a href="#">菜单4</a></li>
               <li><a href="#">菜单5</a></li>
           </ul>
       </div>
   </body>
</html>

页面的侧边栏
页面的侧边栏是一个浮动层，它的中间可以放入任何页面对象，通常，一些简单的条目适合放在这里，作为目录使用，而页面中的主题部分，放入一些具体对象的问题本描述，最好再添加一些图像，这样页面就会更加生动，
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>aside</title>
       <style type="text/css">
           #container{
               width: 100%;
               height: 600px;
               background-color: red;
           }
           #aside{
               width: 20%;
               height: 400px;
               background-color: green;
           }
       </style>
   </head>
   <body>
       <div id="container">
           <aside id="aside"></aside>
       </div>
   </body>
</html>