固定宽度布局解决方案

固定宽度的居中布局

首先我们这里探讨的是我们常用的固定宽度的居中布局，这应该是目前实战中应用的最多的了。

然后从考虑是否应用大背景上我们分为两种，一种是允许整体有一个大背景，一种是头部，中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况，一种是有左或右边栏，一种是没有边栏，最后一种就是左右边栏都存在的情况。

我们在这探讨的布局方案借鉴与drupal的主题，所以如果是学过drupal这个cms的朋友应该会比较熟悉。

html结构详解

我们使用html5标签，所以有必要针对ie6-8导入html5.js。然后我们设置把所有的结构都包含在一个class为page的div里面，在这里div中我们还需要加上布局的class，aside-left,aside-right,two-sides,no-side分别对应左边栏，右边栏，左右两栏，没有边栏布局,这里我们以两栏布局为例，总共包括五个区域，分别为header，left，content，right，footer区域，每个区域里面我们增加了一层class为inner的div，这个inner主要是用来辅助我们布局，默认我们inner设置了margin左右的各位10px，可以根据实际需要来覆写。

为什么要使用inner

我们说了这个是用来辅助我们布局的，很多时候我们布局的时候不得不考虑border及左右的margin，padding等，现在我们完全把这些抛在脑后，交给我们的inner来完成。如整个宽度为1000px，左右边栏各为200px，而内容为600px。我们以前的思想应该是左右为200px，然后中间内容就是580px（margin为10px）或560px（margin为20px），这样我们如果需要改为980px，我们又得改好几个值，然后如果我们左右边栏要加个边框，又变成了202px，或者要设置左右宽度为198px，这是多么的纠结啊。现在引入inner，我们在布局的时候直接计算宽度不需要考虑border，margin，padding什么的，然后通过对各个区域里面的inner重新覆写，不就搞定了吗。这里贴出左右两栏的html代码供参考。具体的请看下面的demo

Html Code

<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>aside left & right demo</title>

	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

	<!--[if lt IE 9]>

	<script src="js/html5.js" type="text/javascript"></script>

	<![endif]-->

</head>

<body>

	<div class="page two-asides">

		<header id="header" class="clearfix">

			<div class="inner">

            </div>

		</header>

		<section id="container" class="clearfix">

			<aside id="aside_left" class="aside">

				<div class="inner">

				</div>

			</aside><!--aside_left-->

			<section id="main">

				<div class="inner">

				</div>

			</section><!--main-->

			<aside id="aside_right" class="aside">

				<div class="inner">

				</div>

			</aside><!--aside_right-->

		</section><!--container-->

		<footer id="footer" class="clearfix">

			<div class="inner">

			</div>

		</footer>

	</div>

</body>

</html>

如果需要为header，container及footer部分各设计一个全屏的背景，上面的这个肯定是不行的了，我们可以这三个div外面再加一层wrap，而这个wrap就是全屏的。

demo

wide demo

更多资料

原文地址：http://www.w3cplus.com/solution/layout/layout.html

css解决方案之css布局的更多相关文章

  1. 现代 CSS 解决方案：CSS 数学函数

    在 CSS 中,其实存在各种各样的函数.具体分为: Transform functions Math functions Filter functions Color functions Image ...

  2. 笔试常考--浏览器兼容性问题及解决方案（CSS）

    问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也 ...

  3. day31—CSS Reset 与页面居中布局

    转行学开发,代码100天——2018-04-16 报名的网易前端开发课程今天正式开课了,这也是毕业后首次付费进行的正式培训课程学习.以此,记录每天学习内容. 今天学了两个方面的知识: 1. CSS   ...

  4. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  5. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  6. CSS：使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  7. 用div和css样式控制页面布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  9. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

随机推荐

  1. HDU 2824.The Euler function-筛选法求欧拉函数

    欧拉函数: φ(n)=n*(1-1/p1)(1-1/p2)....(1-1/pk),其中p1.p2…pk为n的所有素因子.比如:φ(12)=12*(1-1/2)(1-1/3)=4.可以用类似求素数的筛 ...

  2. (2)Python 变量和运算符

    一.python变量特点 python是弱类型语言,无需声明变量可以直接使用并且变量的数据类型可以动态改变 二.变量命名规则 1.不能使用python关键字 2.不能数字开头 3.不能包含空格 4.不 ...

  3. HDU 2141 Can you find it?【二分查找是否存在ai+bj+ck=x】

    Give you three sequences of numbers A, B, C, then we give you a number X. Now you need to calculate ...

  4. Naming conventions of python

    1.package name 全部小写字母,中间可以由点分隔开,作为命名空间,包名应该具有唯一性,推荐采用公司或组织域名的倒置,如com.apple.quicktime.v2 2.module nam ...

  5. MySQL 8.0.13安装教程(windows 64位) （转）

    官先去网下载点击MySQL的下载 下载完成后解压 解压完是这个样子 配置初始化的my.ini的文件解压后的目录并没有my.ini文件,没关系可以自行创建.在安装根目录下添加my.ini(新建文本文件, ...

  6. 搭建基于Ant+Jmeter+jenkins的自动负载测试框架的若干问题记录及解决

    1.关于构建时使用的默认build.xml问题  如图,如果构建脚本build.xml不在workspace根目录.或者说构建脚本不叫build.xml.那么需要在高级里设置Build File选项的 ...

  7. HDU 1166 敌兵布阵 <线段树 单点修改 区间查询>

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  8. 计算最大公约数 Exercise05_14

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算最大公约数 * */ public class Exercise05_ ...

  9. 《你不知道的 CSS》之等比例缩放的盒子

    你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别 ...

  10. [转] matlab获取时间日期

    原文:EmanLee, Eman Lee's Space (blog, website) 在MATLAB中得到系统当前日期.时间也是经常用到的内容,由以下函数实现. 1.生成指定格式日期和时间 dat ...