固定宽度布局解决方案

固定宽度的居中布局

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

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

我们在这探讨的布局方案借鉴与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. BZOJ 3223: Tyvj 1729 文艺平衡树-Splay树(区间翻转)模板题

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 6881  Solved: 4213[Submit][Sta ...

  2. HDU 变形课 1181【DFS/BFS】

    变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Submissi ...

  3. 训练指南 UVA - 11090（最短路BellmanFord+ 二分判负环）

    layout: post title: 训练指南 UVA - 11090(最短路BellmanFord+ 二分判负环) author: "luowentaoaa" catalog: ...

  4. 自定义编写jmeter的Java测试代码

    我们在做性能测试时,有时需要自己编写测试脚本,很多测试工具都支持自定义编写测试脚本,比如LoadRunner就有很多自定义脚本的协议,比如"C Vuser","JavaV ...

  5. English distilled

    [ Any question about the job]关于辞职原因 1. What are the main objectives and responsibilities of the posi ...

  6. iOS 修改APP工程名字

    我们在iOS开发中,难免会遇到项目做到一半要改名字的情况.如果项目名差的太大,工程名看起来总是不舒服的,就会想着为工程改个贴切的名字,那么你就为用到本文记录的内容. 如何修改工程名呢? 下面我就拿一个 ...

  7. Swift中获取相册图片与保存到相册

    关于这个网上目前位置记录的资料比较少,记录一下这个坑 获取相册图片 1: var iPC = UIImagePickerController() 2: iPC.sourceType = UIImage ...

  8. iOS使用CoreData实现收藏功能

    一般做收藏都是使用数据库或者归档,使用CoreData实现收藏功能就是没事时练一下,实现大概和数据库差不多. 首先创建一个工具类继承NSObject,在里面实现所需要的方法. 工具类的.h文件: ty ...

  9. Visual Studio 断点无法命中怎么办？

    经常远程调试服务器打断点是空心的,很抓狂,正确的方法应该是 #if DEBUG if (System.Diagnostics.Debugger.IsAttached) { System.Diagnos ...

  10. hdu 1233 还是畅通工程 最小生成树（prim算法 + kruskal算法）

    还是畅通工程                                                                            Time Limit: 4000/2 ...