一、为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

1、确定页面的版心（可视区）。例如mi.com的 .container

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

二、 一列固定宽度且居中

最普通的，最常用

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	.box {

                /* 版心为900px */

		width: 900px;

		background-color: #eee;

		border: 1px dashed #ccc;

		margin: 0 auto;

	}

	.top {

		height: 80px;

	}

	.banner {

		height: 120px;

		/*margin: 0 auto;*/

		margin: 5px auto;

	}

	.main {

		height: 500px;

	}

	.footer {

		height: 100px;

		/*margin: 0 auto;

		margin-top:5px;*/

		margin: 5px auto 0;

	}

	</style>

</head>

<body>

	<div class="top box">top</div>

	<div class="banner box">banner</div>

	<div class="main box"></div>

	<div class="footer box"></div>

</body>

</html>

三、 两列左窄右宽型

通过float解决div.main里的div.left和div.right的布局

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	.top {

		width: 900px;

		height: 80px;

		background-color: pink;

		margin: 0 auto;

	}

	.banner {

		width: 900px;

		height: 150px;

		background-color: purple;

		margin: 0 auto;

	}

	.main {

		width: 900px;

		height: 500px;

		background-color: skyblue;

		margin: 0 auto;

	}

	.left {

		width: 288px;

		height: 500px;

		background-color: yellow;

		float: left;

		border: 1px solid red;

	}

	.right {

		width: 600px;

		height: 500px;

		background-color: deeppink;

		float: right;

	}

	.footer {

		width: 900px;

		height: 120px;

		background-color: black;

		margin: 0 auto;

	}

	</style>

</head>

<body>

	<div class="top"></div>

	<div class="banner"></div>

	<div class="main">

		<div class="left">left</div>

		<div class="right">right</div>

	</div>

	<div class="footer"></div>

</body>

</html>

四、 通栏(Banner)平均分布型

例如锤子官网

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

	* {

		margin: 0;

		padding: 0;

	}

	.top {

		height: 80px;

		background-color: pink;

	}

	.top-inner {

		width: 900px;

		height: 80px;

		/*background-color: #ababab;*/

		margin: 0 auto;

	}

	.banner {

		width: 900px;

		height: 150px;

		/*background-color: purple;*/

		margin: 0 auto;

	}

	.banner li {

		float: left;

		width: 217px;

		height: 150px;

		margin-right: 10px;

	}

	.one {

		background-color: purple;

	}

	.two {

		background-color: indianred;

	}

	.three {

		background-color: darkgoldenrod;

	}

/*        只写.four的话优先级不够，magrin-right:0不生效*/

	.banner .four {

		background-color: green;

		margin-right: 0;

		float: right;

	}

	.main {

		width: 900px;

		height: 500px;

		background-color: skyblue;

		margin: 0 auto;

	}

	.left {

		width: 288px;

		height: 500px;

		background-color: yellow;

		float: left;

		border: 1px solid red;

	}

	.right {

		width: 600px;

		height: 500px;

		background-color: deeppink;

		float: right;

	}

	.footer {

		width: 900px;

		height: 120px;

		background-color: black;

		margin: 0 auto;

	}

	</style>

</head>

<body>

	<div class="top">

		<div class="top-inner">123</div>

	</div>

	<div class="banner">

		<ul>

			<li class="one">1</li>

			<li class="two">2</li>

			<li class="three">3</li>

			<li class="four">4</li>

		</ul>

	</div>

	<div class="main">

		<div class="left">left</div>

		<div class="right">right</div>

	</div>

	<div class="footer"></div>

</body>

</html>

CSS - 布局流程的更多相关文章

  1. CSS布局总结及实际应用中产生的问题

    布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...

  2. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  3. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  6. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  7. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  8. CSS篇之DIV+CSS布局

    <div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...

  9. CSS 布局口诀

    body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...

随机推荐

  1. html学习-第一集（基本标签）

    什么是HTML html是一套规则,浏览器认识的规则 开发者怎么使用html 学习HTML语言 开发后台程序 写HTML文件 从数据库获取数据,然后替换到html中对应的位子(web框架) HTML文 ...

  2. 安装pyhanlp

    安装pyhanlp pyhanlp是java写的,外层封装了python. 对于新手,在使用的时候稍有难度. 1. 下载源码 https://github.com/hankcs/pyhanlp git ...

  3. 对图书管理系统5W1H的分析

    5W1H 对图书管理系统的分析 1.Who 学生.老师和图书馆管理员 2.When 借还书的时候使用,还有用户流量的统计在每天晚上都会看一下有多少人哪些人看了的,基本绝大多数时间都可以看 3.Wher ...

  4. 7 scrapy 初识

    scrapy框架 框架介绍: Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架就是一个已经被集成了各种功能(高性能异步下载,队列,分布式,解析,持久化 ...

  5. 使用SSH客户端远程登录Linux主机

    使用SSH客户端远程登录Linux主机(可替代samba.ftp服务) . Linux系统起初就是为多用户而产生的,可以允许多个用户同时登录linux主机各自进行操作,如图1所示: 图1 SSH(Se ...

  6. python __双划线 参数

    ''' >>> Class1.__doc__ # 类型帮助信息 'Class1 Doc.' >>> Class1.__name__ # 类型名称 'Class1' ...

  7. windows下的环境搭建配置redis

    http://blog.csdn.net/spring21st/article/details/11176723

  8. Live2d技术

    保存一些关于Live2d技术的博文或模型资源,有空研究研究. 什么是 live2d?:https://baike.baidu.com/item/Live2D/8496493 1.https://www ...

  9. Centos7618安装Docker

    本文基于Centos7.6.18进行安装与测试 移除旧的版本: $ sudo yum remove docker \ docker-client \ docker-client-latest \ do ...

  10. Linux--如何通过图形界面选项快速更改ubuntu的窗口、图标、分辨率大小，超详细超实用~（适合所有人群）

    这是默认ubuntu给出的分辨率大小:800*600,说实话有点小不适合操作. (分辨率800*600) 这是调整后的分辨率大小. (分辨率1400*900) 操作方法: 首先点击选项框中的设置图标- ...