固定宽度布局解决方案

固定宽度的居中布局

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

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

我们在这探讨的布局方案借鉴与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

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

现代 CSS 解决方案：CSS 数学函数
在 CSS 中,其实存在各种各样的函数.具体分为: Transform functions Math functions Filter functions Color functions Image ...
笔试常考--浏览器兼容性问题及解决方案（CSS）
问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:css里加: ;;} 备注:这个是最常见的也 ...
day31—CSS Reset 与页面居中布局
转行学开发,代码100天——2018-04-16 报名的网易前端开发课程今天正式开课了,这也是毕业后首次付费进行的正式培训课程学习.以此,记录每天学习内容. 今天学了两个方面的知识: 1. CSS ...
CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
CSS：使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
用div和css样式控制页面布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
HTML CSS + DIV实现整体布局
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

随机推荐

python 连接ubuntu xampp mysql
>>> import MySQLdb >>> db=MySQLdb.connect(user="root",passwd="" ...
洛谷 P2689 东南西北【模拟/搜索】
题目描述给出起点和终点的坐标及接下来T个时刻的风向(东南西北),每次可以选择顺风偏移1个单位或者停在原地.求到达终点的最少时间. 如果无法偏移至终点,输出“-1”. 输入输出格式输入格式: 第一行 ...
Cocos2dx-Lua UIScrollView 和 UITableView 对比
为什么写这个上面这个问题的答案也是我写这篇文章的初衷,在最近给游戏添加一些列表的时候,对比着应用了一下他们两个,在它们两个之间的优劣势之间进行取舍,就有了这个问题的答案. 按照我一个iOS开发而言, ...
福州三中集训day4
第6天写第4天的博客….可以说是很弱了…… 讲了一天的高级数据结构,可以说很迷,先是并查集,然后是树状数组,线段树,MAP函数,KMP算法. 很难……确实不是很清楚…但是很重要,回去以后这应该说是优先 ...
Python3 字典(map)
ayout: post title: Python3 字典(map) author: "luowentaoaa" catalog: true tags: mathjax: true ...
Typora
Typora BB in front 如果你是一个佛(lan)系(duo),内心文艺的程序员,并且你对其他Markdown编辑器的使用效果感觉不是很好的话,可以来了解一下该软件Typora. What ...
java源码阅读Object
1 类注释 Class {@code Object} is the root of the class hierarchy. Every class has {@code Object} as a s ...
手动编译含package的java源程序(包含外部包中定义的类)
1)定义一个GSM类,如下: 包名是“SRC.GSM”,并且此程序引用了外部jar包.使用javac命令对GSM.java进行编译: GSM.java所在的文件夹如下所示: 切换到这个目录为当前工作目 ...
JQuery中的动画（ppt）
<!DOCTYPE html> <html> <head> <title>test1.html</title> <meta http- ...
Linux命令之 file命令
该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在路径:/us ...

css解决方案之css布局