固定宽度布局解决方案

固定宽度的居中布局

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

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

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

随机推荐

[linux]压缩、解压命令
.tar.gz 和 .tgz 解压:tar zxvf FileName.tar.gz 压缩:tar zcvf FileName.tar.gz DirName tar 解包:tar xvf FileNa ...
Android学习--还有一些小技巧
这些小技巧通过上面的这些文章,就把简单的安卓项目总结了一遍,当然你说懂这些就可以做Android开发的话还是不行的,欠缺的还有很多,但欠缺的这些我们有只能在工作中去总结以及不断的提高,这篇文章我们还 ...
10、Django实战第10天：找回密码
今天完成的功能是:用户忘记密码后,通过注册邮箱重置密码... 首先还是把前端页面准备好,把forgetpwd.html复制到templates目录下编辑users.views.py,创建一个忘记密码 ...
[Lydsy1805月赛] 对称数
挺不错的一道数据结构题QWQ. 一开始发现这个题如果不看数据范围的话,妥妥的树上莫队啊23333,然鹅10组数据是不可能让你舒舒服服的树上莫队卡过的23333 于是想了想,这个题的模型就是,把u到v链 ...
杂谈PID控制算法——第二篇：调·三个量
上面一篇文章讲了一下PID算法中的三个常量大致的在PID算法中起的一个作用,但在实际的使用中,究竟应该如何调节(或者用更加专业的话说是整定)PID控制算法的三个.首先可以将KP,KI,KD三个常量全部 ...
修改 CentOS 6.3 时区和时间
1.查看当前时区和时间 date -R 2.CentOS中时区是以文件形式存在,当前时区文件位于 /etc/localtime 其他时区文件位于 /usr/share/zoneinfo下,其中中国时区 ...
LLBLGen Pro ORM 生成器
LLBLGen Pro ORM 生成器: http://www.llblgen.com/default.aspx 支持多种框架,多种数据库.
python函数getopt用法
python内建模块,用来处理命令行参数格式:getopt(args, shortopts, longopts = []) 参数args一般是sys.argv[1:]sys.argv[0]表示执行文 ...
sqlserver用于统计表索引情况
/*eg: --调用该过程实例 --1 创建临时表 IF OBJECT_ID('tempdb..#index_sql_text') IS NOT NULL DROP TABLE #index_sql_ ...
PHP正则表达式之快速学习法
1.入门简介简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.我们可以在几乎所有的基于UNIX系统的工具中找到正则表达式的身影,例如,vi编辑器,Perl或PHP脚本语言,以及awk或 ...

css解决方案之css布局