www.baike369.com
百科369 > CSS教程 > CSS网页布局

CSS网页布局



CSS网页布局

学习DIV+CSS有什么好处?

业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。

学习DIV+CSS的步骤

不要一味使用视频教程、Dreamweaver等工具设计网页,来熟悉(X)HTML语言和css语言。

CSS网页布局中的文字排版技巧

在这篇CSS网页布局的文字排版技巧文章中,主要包括:设置文字字体、颜色和大小、中文段落排版、使用项目符号、首字下沉效果、文本缩进和固定宽度汉字截断等部分内容。


CSS页面框架

在使用CSS布局页面的时候,首先要建立页面的框架。虽然页面的显示效果千差万别,但是建立框架的原理并不复杂。通常使用浮动属性、清除浮动属性、定位属性等实现。

CSS页面框架

建立一个CSS页面框架,主要包括三部分内容:首先使用<div>元素,将页面划分为几个板块。


CSS页面板块位置的确定

CSS页面板块位置的确定

页面中各个板块位置的确定是通过定义相关的CSS属性来实现的。


CSS分栏布局的实现

分栏布局,是指在制作页面的过程中,将整个页面划分为横纵的几个栏目进行布局。由于元素在横、纵两个方向上的默认排列方式不同,所以在确定分栏布局的时候,使用的方法也不相同。

CSS横向分栏布局的实现原理、方法与实例

在横向分栏布局的网页中,块级元素默认以换行的方式显示,所以在定义横向分栏的时候,一般不需要定义任何定位或布局属性。

CSS纵向分栏布局的原理

由于在页面中块级元素的默认显示方式为换行显示,所以要实现元素的纵向分栏,就必须使用CSS中相应的属性。

CSS使用浮动属性纵向分栏布局的实现方法与实例

在使用浮动属性实现纵向分栏布局的时候,需要为每个浮动元素定义浮动属性值。

CSS使用绝对定位纵向分栏布局的实现方法与实例

在使用绝对定位实现纵向分栏布局的时候,需要为每个分栏的内容定义相应的边偏移属性,同时要注意元素之间不能够重叠。

CSS使用浮动属性和边距设计3行3列定宽的布局实例

下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面。


CSS布局水平自适应的问题

水平自适应,是指当浏览器的宽度发生变化或者屏幕的分辨率发生变化时,页面中的内容能够随着浏览器宽度的变化而变化。

CSS使用百分比值定义水平自适应布局的实例

在页面布局中,由于<body>元素的宽度可以随着浏览器的宽度的改变而改变,所以可以在<body>元素中,使用百分比值的方法。

CSS使用绝对定位定义水平自适应布局的实例

使用绝对定位可以将元素定位在相对于<body>元素的某个位置上。


CSS布局垂直自适应的问题

垂直自适应,是指当页面某一部分的内容发生变化时,其它相关内容的背景等也作出相应的变化。例如,当页面中元素的内容增加时,两侧的侧栏背景也跟随内容的增加而增加等。

CSS使用独立元素制作垂直自适应布局的实例

独立的块级元素,只要不定义元素的高度,即可解决不同浏览器中垂直自适应布局的问题。

Copyright© 2011-2016 www.baike369.com All Rights Reserved