固定宽度布局解决方案

固定宽度的居中布局

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

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

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

随机推荐

UVALive 3882.And Then There Was One-约瑟夫问题(递推)
And Then There Was One Time limit: 3.000 seconds Let’s play a stone removing game. Initially, n ston ...
POJ 3264.Balanced Lineup-结构体版线段树(区间查询最值)
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 53721 Accepted: 25244 ...
链表学习二：链表反转与查找倒数第K个
//单链表反转 ListNode* RevertList(ListNode* m_pHead){ ListNode* pCurrent = m_pHead; ListNode* pPrev=NULL; ...
Android 架构 4.总结
以下是Keegan小钢大神原创博客: Android项目重构之路:架构篇Android项目重构之路:界面篇Android项目重构之路:实现篇看了这几篇文章,以及下面的评论,总结一下,以便以后拓展: ...
水晶报表导出完美EXCEL表格
水晶报表自带的导出Excel不太完美(这一点与SQL的SSRS相比就差太远了),导出的文件没有网格线,而且非常容易出现跨行跨列的现象,要做一个符合要求的报表还真要花不少的时间与精力去调试. 下面我简单 ...
delphi执行cmd命令和bat文件
转载地址:http://blog.csdn.net/hutao1101175783/article/details/42807063 cmd:='echo d | Xcopy '+BasePath+' ...
Jenkins持续集成实战总结
原文:https://my.oschina.net/CandyDesire/blog/341331#comment-list 持续集成什么是持续集成随着软件开发复杂度的不断提高,团队开发成员间如何 ...
js基础的思维导图
纯粹转载下,我可画不出这么好看的思维导图,这得感谢@ChokCoco javascript变量 javascript运算符 javascript数组 javascript流程语句 javascript ...
小二助手（react应用框架）-概述
时间想学习一个前端框架,原因是这样的,我本身是做游戏的,但是自己对前端web比较感兴趣. 然后我就选择自己学哪个框架,Angular.react.vue 最后选择了react,选择的理由就不说了那做 ...
CSS实现四种loading动画效果
四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

css解决方案之css布局