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

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

    " 目录 #. 概述 1. 什么是数据(Data) 2. 什么是数据库(DataBase, 简称DB) 3. 什么是数据库管理系统(DataBase Management System) 4 ...

  2. 传奇衣服、翅膀、武器、怪物、NPC等外观代码计算方法与公式

    详细介绍humX.wil  weaponX.wil itemsX.wil dnitemsX.wil stateitemX.wil monX.wil代码计算方法   以下计算方法适用于HERO引擎和3K ...

  3. 使用js制作 下拉选择日期列表 (即日期选择器)

    上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  4. Linux虚拟机(CentOS)安装gcc， g++

    1.    确保自己的虚拟机联网 点击那个三角形可以选择连接网络 如果还是连不了网,参考https://www.cnblogs.com/xingbo/p/6100554.html 2.联网后,使用命令 ...

  5. Git基础及进阶-系统总结

    Git基础及进阶-系统总结 by 小强 2019-07-01 考虑到入职后不仅需要熟练掌握git的基本使用,在企业实际操作中还涉及一些进阶指令.作为一个程序员,熟练使用工具是一项基本技能,也是程序员的 ...

  6. Java常用API——Arrays工具类

    介绍:Arrays工具类提供了一些可以直接操作数组的方法,以下是一些常用方法: int binarySearch(type[] a, type key):要求数组a元素升序排列,使用二分法搜索key的 ...

  7. 解决IDEA快捷键 Alt+Insert 失效的问题

    现象 IDEA快捷键 Alt+Inser 失效,单击右键也不出现[Generate]. 这个问题经常出现在重新安装IDEA后. 原因 缺少2个插件 解决办法 在setting中启用这2个插件即可.这2 ...

  8. 根据权限显示accordion

    前端界面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.asp ...

  9. PyQt5剪切板操作

    1.使用剪切板import sys,mathfrom PyQt5.QtWidgets import *from PyQt5.QtGui import *from PyQt5.QtCore import ...

  10. Kubernetes的控制器之Deployment的定义

    Deploy 的控制器定义参数介绍 [root@master manifests]# kubectl explain deploy KIND: Deployment VERSION: extensio ...