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

“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为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. [Bug合集] java.lang.IllegalStateException: Could not find method onClickcrea(View) in a parent

    出现场景: 在一个Button中定义了onclick属性,值为startChat. 在Activity中定义一个方法. public void startChat(View view){} 运行时,点 ...

  2. 11: Django + gunicorn + Nginx 的生产环境部署

    1.1 gunicorn介绍   1.Gunicorn 1. Gunicorn是使用Python实现的WSGI服务器, 直接提供了http服务, 并且在woker上提供了多种选择, gevent, e ...

  3. Jmeter_正则表达式提取器_提取数组 & For Each 控制器

    1.举例: https://demodaojia.ecjia.com/ 提取黄色标注的这些内容 2. 3. 匹配数字:-1 表示匹配全部,0表示随机一个 4. 5.我们获取了10组数据,通过正则提取器 ...

  4. Activiti工作流学习之概述（一）

    一.工作流介绍 我第一次听到这个词,是蒙逼的,再看百度百度,更傻眼了,完全说的不像人话啊,举几个生活中的例子,就明白多了比如:请假.报销等等,如果文字太过抽象,请看图: 二.工作流引擎 Process ...

  5. 批量给文件加一个后缀 .bak , 一条命令去掉文件的后缀 linux

    给当前文件夹下面的所有文件加上一个后缀 == 一条命令解决 ll | awk '{print $9}' | grep -v '^[ ]*$' |sed -r 's#(.*)#mv \1 \1.bak# ...

  6. Hibernate学习（四）

    一对多测试案例 1.类图 2.创建表 drop table if exists t_student ; drop table if exists t_class ; create table t_cl ...

  7. mcast_set_if函数

    #include <errno.h> #include <string.h> #include <net/if.h> #include <sys/ioctl. ...

  8. Vulnhub_DC1 记录

    目录 Vulnhub_DC1 记录 经验 & 总结 步骤流水 1. 建立立足点 2. 提权 3. 主机信息搜集 4. 继续提权 5. 消失的flag Vulnhub_DC1 记录 参考walk ...

  9. 金币(0)<P2015_1>

    金币 (coin.cpp/c/pas) [问题描述]  国王将金币作为工资,发放给忠诚的骑士.第一天,骑士收到一枚金币:之后两天(第二天和第三天),每天收到两枚金币:之后三天(第四.五.六天),每天收 ...

  10. vb.net与vb的区别

    本文链接:https://blog.csdn.net/dfshsdr/article/details/63255645最近接触了vb.net,它增加了vb的很多特性,而且演化成为完全面向对象的编程语言 ...