CSS页面布局格式

页面布局

在前端开发中页面布局总是最开始的工作，就像盖楼时，先搭框架，然后再填砖，前端也是一样的，先做好页面的布局工作。

　　大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

　　div 元素是用于分组 HTML 元素的块级元素。

　　div默认就是垂直平铺（垂直排列）；水平的需要加style="float:left;"。

在学习了盒模型、块级元素和行内元素得到概念后，我们知道绝大多数的模具工作是由CSS+DIV来完成的，因为表格布局复杂页面时需要频繁的嵌套，代码比较复杂、难以维护，而使用CSS+DIV布局，内容和表现可以分离，代码干净整洁、可读性好、便于维护，并且样式代码可以复用，提高了开发效率，同时分离后美工和网站开发人员也可以协同合作，进一步提高了开发效率和整体网站的质量。

常规流式布局

元素按照自身的常规显示方式显示，有两个特点：

1.元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）

2.元素按照自身的常规显示特性显示

比如块级元素垂直排列，行级元素水平排列。

以前没学布局时，其实是用的就是常规流布局。

布局步骤

一、总体布局

扫描二维码关注公众号，回复： 7011965 查看本文章

先布局出我们想要的页面的具体显示的框架。比如我们先把一个网页看成一个大的div。

二、使用DIV进行分割

拿例来说我们网页整体分为上中下三部分，所以我们可以使用三个div来先大体分割一下该网页.

三、使用CSS来控制DIV布局

使用CSS样式来控制布局的具体宽、高，并使用显著的背景或border标注，在需要修改时可以清楚的看到该模块。

四、使用以上三步进行细分

在每一模块都要通过以上三步具体划分。

部分实例代码

html

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>山东理工大学</title>
 6 <link rel="stylesheet" href="css/index.css">
 7 <link rel="shortcut icon" href="img/favicon.ico">
 8 </head>
 9 <body>
10 <!--总体-->
11 <div id="contaion">
12 <!--头部-->
13     <div id="header">
14         <div id="head_top"></div>
15         <div id="head_bottom"></div>
16     </div>
17 <!--轮播-->
18 <div id="lunbo"></div>
19 <!--内容-->
20     <div id="content">
21 <!--    左边-->
22         <div class="content_in content_01">
23             <div class="content_first cot_in content_01_top"></div>
24             <div class="content_01_bot content_01_bot"></div>
25         </div>
26 <!--        中间-->
27         <div class="content_in content_02">
28             <div class="content_first cot_in content_02_top"></div>
29             <div class="content_01_bot content_02_bot"></div>
30         </div>
31 <!--        右边-->
32         <div class="content_in content_03">
33             <div class="content_first cot_in content_03_top"></div>
34             <div class="content_01_bot content_03_bot"></div>
35         </div>
36     </div>    
37 <!--头部标签-->
38     <div id="foot_nav"></div>
39 <!--头部标签-->
40     <div id="foot"></div>
41 </div>
42 </body>
43 </html>

css

 1 /* CSS Document */
 2 
 3 *{
 4     margin: 0px;
 5     padding: 0px;
 6 }
 7 /*总体*/
 8 #contaion{
 9     width: 100%;
10     height: 100%;
11     border: 1px solid;
12 }
13 /*头部*/
14 #header{
15     width: 72%;
16     height: 180px;
17     border: 1px solid;
18     margin: 0 auto;
19 }
20 #head_top{
21     width: 100%;
22     height: 130px;
23     border-bottom: 1px solid #ccc;
24 }
25 #head_bottom{
26     width: 100%;
27     height: 50px;
28 }
29 /*轮播*/
30 #lunbo{
31     width: 100%;
32     height: 285px;
33     border: 1px solid;
34 }
35 /*内容*/
36 #content{
37     width: 72%;
38     height: 600px;
39     border: 1px solid;
40     margin: 0 auto;
41 }

页面布局

常规流式布局

布局步骤

部分实例代码

html

css

代码执行显示的布局效果

猜你喜欢