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

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

    # celery task 前言 讨论一个定时任务,一般而言,需要的功能如下: 封装成对象,独立执行: 对象有一些接口,便于了解它的状态: 定时调用: 行为控制,包括重试,成功/失败回调等: 下面分别 ...

  2. 关于原生，webapp，hybird(混合)

    链接:https://www.jianshu.com/p/839748d571b2 链接2:https://www.jianshu.com/p/6d5f32aa5dda

  3. Java 中 CAS

    一.CAS 概念 CAS ,全称 Compare And Swap(比较与交换),解决多线程并行情况下使用锁造成性能损耗的一种机制. 实现思想 CAS(V.A.B) ,V为内存地址,A为预期原值,B ...

  4. 传奇gee引擎,智能假人,假人脚本,geeM2假人

    开新区注意事项: 1.新区无任何玩家数据下可以运行“MirServer\假人行会初始化”目录下的“点我初始化假人行会.Bat”程序 2.默认假人后台管理密码为:2139263   ;--------- ...

  5. MTSQL主主同步方案

    ** MySQL主主+Keepalived **MySQL+DRBD+Heartbeat 在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主主方案,一主多从,读写分离等,但是 ...

  6. 刷题15. 3Sum

    一.题目说明 题目非常简洁15. 3Sum,读懂题目后,理解不难. 但 实话说,我们提交代码后,Time Limit Exceeded,最主要的是给了非常长的测试用例,我本地运行后87秒,确实时间非常 ...

  7. Java JDBC 数据库链接小结随笔

    Java JDBC 数据库链接小结随笔 一.链接数据库的步骤 二.关于Statement  和  PrepareStatement 两者区别 用法 三.关于 ResultSet 的一些小结 四.自定义 ...

  8. Ubuntu18 mongodb 离线安装

    环境 Ubuntu 18 + mongodb 4.0.10 1.下载版本所需库 https://www.mongodb.com/download-center/community https://re ...

  9. 吴裕雄 python 神经网络——TensorFlow 数据集基本使用方法

    import tempfile import tensorflow as tf input_data = [1, 2, 3, 5, 8] dataset = tf.data.Dataset.from_ ...

  10. 【PAT甲级】1049 Counting Ones (30 分)（类似数位DP思想的模拟）

    题意: 输入一个正整数N(N<=2^30),输出从1到N共有多少个数字包括1. AAAAAccepted code: #define HAVE_STRUCT_TIMESPEC #include& ...