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

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为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. 原生js登录创建cookie

    原生js创建cookie,功能:点击登录按钮时,将用户名.密码存为cookie:页面再次加载时,自动读取cookie中的用户名.密码. <html><head><titl ...

  2. HDU 1016 素数环（dfs + 回溯）

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1016 一道很典型的dfs+回溯: 根据题意首先进行初始化,即第一个位置为1,然后进行dfs, ...

  3. 传奇身上装备升级系列脚本，以及UPGRADEITEMEX 脚本的详细参数解释

    UPGRADEITEMEX 脚本的详细参数解释如下: UPGRADEITEMEX 物品位置(0-12) 属性位置(0-14) 成功机率(0-100) 点数机率(0-255) 是否破碎(0,1) 物品位 ...

  4. next_permutation的使用-Hdu1027

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  5. Java入门笔记 05-多线程

    介绍:Java提供了非常优秀的多线程支持,程序可以通过非常简单的方式来启动多线程.本章主要内容为:多线程的创建.启动.控制以及同步操作,并介绍JDK 5新增的线程创建方式. 一.线程的创建与使用: 1 ...

  6. 01 认识python

    python介绍 python的创始⼈为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决⼼ 开发⼀个新的脚本解释程序,作为ABC语 ...

  7. MySQL - Schema和Database的区别

    问题来源 在pycharm发现Create new schema的效果和新建数据库一样,所以产生这个问题 参考 https://stackoverflow.com/questions/11618277 ...

  8. javascript的正则匹配

    前段时间需要用到比较多的js代码,当时有点搞不清test和match方法的区别,向百度求助,找到了这边关于正则匹配的博文,感谢作者分享. 原文地址[http://blog.sina.com.cn/s/ ...

  9. pl/sql修改data

    1,对于语句要包含rowid!

  10. security.web.firewall.RequestRejectedException: The request was rejected because the URL contained a potentially malicious String ";"

    今天有个接口打算使用矩阵变量来绑定参数,即使用@MatrixVariable注解来接收参数 调用接口后项目报了如下错误 org.springframework.security.web.firewal ...