使用CSS布局非常简单,如果你习惯使用tables布局,可能开始时有点困难,但其实很容易,事实上只是观念的不同。
你需要把网页的每个部分看成独立的块,你可以绝对或相对定位块。
Positioning 定位
positon属性可以指定元素为absolute,relative,static或是fixed。
static是元素默认属性,按HTML出现的先后顺序。
relative比较像static,但元素可以使用top,right,bottom和left设定初始属性。
absolute把元素从HTML里面拉出,一切由它自己决定,在这里,绝对定位元素可以使用top,right,bottom,left定位在任何地方。
fixed行为像absolute,但它绝对定位的元素参照浏览器窗口与网页没有关系。所以,理论上,fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的?因为IE7以下的浏览器不支持。
使用绝对定位布局
可以使用绝对定位创建传统的两列布局,如下:
Example Source Code [www.52css.com]
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
上面加上CSS:
Example Source Code [www.52css.com]
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面导航条设定在左边,宽度是10em。因为导航条是绝对定位,所以流动的页面上什么也不动,需要设定内容的左边margin等于导航条的宽度。
真是简单。你没有限制这两列的距离,使用聪明的布局,你可以随心所欲安排许多块。如果你想添加第三列,比如:
Example Source Code [www.52css.com]
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
最后阶段去绝对定位元素,因为它们独立存在,无法正确了解它们哪里结束。如果你使用上面的例子,所有的页面有小的导航条和大的内容区域到可以,但是,特别是宽度和大小使用相对值,你必须经常放弃定位的希望,比如位于元素最下面的底部布局。如果你想定位底部,采用浮动模式比绝对定位好。
Floating 浮动
浮动元素可以在一条线上移动。
浮动一般使用在定位页面里的小型元素,但也可使用在大块里,比如导航。
上面的HTML例子使用下面CSS:
Example Source Code [www.52css.com]
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望接下来的元素包围浮动对象,可以使用clear属性。clear:left清除浮动在左边的元素,clear:right清除浮动在右边的元素,clear:both清除所有。如果你想添加底部footer,可以像下面:
Example Source Code [www.52css.com]
#footer {
clear: both;
}
footer将在所有列下面,不管它们的长度如何。
这篇介绍了定位和浮动的基本情况,强调页面的大块,但记住,上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border,你可以表现出任何网页设计,table布局能做的CSS没有什么不能做。
使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性,而且体积上只有使用table布局的部分大小。
你需要把网页的每个部分看成独立的块,你可以绝对或相对定位块。
Positioning 定位
positon属性可以指定元素为absolute,relative,static或是fixed。
static是元素默认属性,按HTML出现的先后顺序。
relative比较像static,但元素可以使用top,right,bottom和left设定初始属性。
absolute把元素从HTML里面拉出,一切由它自己决定,在这里,绝对定位元素可以使用top,right,bottom,left定位在任何地方。
fixed行为像absolute,但它绝对定位的元素参照浏览器窗口与网页没有关系。所以,理论上,fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的?因为IE7以下的浏览器不支持。
使用绝对定位布局
可以使用绝对定位创建传统的两列布局,如下:
Example Source Code [www.52css.com]
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
上面加上CSS:
Example Source Code [www.52css.com]
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面导航条设定在左边,宽度是10em。因为导航条是绝对定位,所以流动的页面上什么也不动,需要设定内容的左边margin等于导航条的宽度。
真是简单。你没有限制这两列的距离,使用聪明的布局,你可以随心所欲安排许多块。如果你想添加第三列,比如:
Example Source Code [www.52css.com]
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
最后阶段去绝对定位元素,因为它们独立存在,无法正确了解它们哪里结束。如果你使用上面的例子,所有的页面有小的导航条和大的内容区域到可以,但是,特别是宽度和大小使用相对值,你必须经常放弃定位的希望,比如位于元素最下面的底部布局。如果你想定位底部,采用浮动模式比绝对定位好。
Floating 浮动
浮动元素可以在一条线上移动。
浮动一般使用在定位页面里的小型元素,但也可使用在大块里,比如导航。
上面的HTML例子使用下面CSS:
Example Source Code [www.52css.com]
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望接下来的元素包围浮动对象,可以使用clear属性。clear:left清除浮动在左边的元素,clear:right清除浮动在右边的元素,clear:both清除所有。如果你想添加底部footer,可以像下面:
Example Source Code [www.52css.com]
#footer {
clear: both;
}
footer将在所有列下面,不管它们的长度如何。
这篇介绍了定位和浮动的基本情况,强调页面的大块,但记住,上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border,你可以表现出任何网页设计,table布局能做的CSS没有什么不能做。
使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性,而且体积上只有使用table布局的部分大小。
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 699如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 658伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 693At-rules分装不同的CSS规 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 730操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 916背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 632一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 588请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 427Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 634前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 688如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 591CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 593margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 686有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1052css可以处理16,777,216颜色,可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 700HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 653CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
关于CSS40个布局实列CSS布局大全:40多个教程,提示,例子和最佳实践 CSS布局教程 1-Three column fixed layout structure using CSS- 这篇文章解释了如何显示... 2-Design page layout using CSS- 如何设计页面布局教程。
CSS Pro布局 CSS库,用于构建响应式和可自定义的页面布局 文献资料 有关完整文档,请访问 入门 您可以使用NPM或Yarn安装CSS专业版 NPM npm install css-pro-layout 纱 yarn add css-pro-layout 将css-pro-layout....
With the introduction of the CSS Grid Layout spec, you will not need to include a separate stylesheet just to use the grid system. Another advantage is that you will not have to rely on properties ...
Page Flip Layout - 基于CSS网格的模板,拥有杂志式布局和平面翻页动画
The CSS Quick Syntax Reference is a 150-page syntax reference to the Cascading Style Sheet specification and style sheet language. It presents the essentials of CSS in a well-organized format that can...
CSS3 The Missing Manual - CSS3 秘籍 - 第3版 Cascading Style Sheets—CSS for short—give you creative control over the layout and design of your web pages. Using CSS, you can dress up your site’s text...
Work with web typography and page layout Create effects for images and other page elements Learn techniques for configuring lists, forms, and tables Design effective web navigation and create custom ...
Layout designers rejoice: now you can greatly simplify the task of laying out your web page or application with Flexbox, the CSS Flexible Box Module. In this concise guide, author Estelle Weyl shows ...
If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a ...
the language that in the hands of a skilled designer turns the ugly duckling of unadorned ... In one sense, they’re right. Instead of one massive speci cation, CSS3 has been broken up into more than 40 ...
css-Layout-page2
The book’s layout, with a pattern’s example on the left page and its explanation on the right, makes it easy to find a pattern and study it without having to flip between pages. The book is also ...
heightmax-heightmin-heightwidthmax-widthmin-width 布局 Layout clearfloatclipoverflowoverflow-xoverflow-ydisplayvisibility 外补丁 Margins marginmargin-topmargin-rightmargin-bottommargin-left ...
If you’re a web designer or app developer interested in sophisticated page styling, improved accessibility, and saving time and effort, this book is for you. This revised edition provides a ...
CSS is a powerful styling and layout language that greatly simplifies the selection of page elements and their visual display, layout, and animation. Additionally, Windows 8 apps appear on a large ...
Step out in (CSS) style — use Cascading Style Sheets to control layout and enhance the look and feel of your pages Go mobile — ensure that your pages play well with mobile devices Open the book and ...
Whether you handcraft individual pages or build templates, HTML & CSS: The Good Parts will help you get the most out of these tools in all aspects of web page design-from layout to typography and to ...
1.3-CSS:页面布局-讲习班练习1至练习12 每个练习文件夹都包含一个带有练习参数的自述文件。练习13至练习18(可选) 以下链接中的练习将帮助您使用CSS选择器,CSS Grid和Flexbox进行更多练习。 当前,没有为这些练习...