WEB2.0网页制作标准教程(8)CSS布局入门
作者:阿捷 来源:网页设计师 发布时间:2007-09-11 13:21:00
阅读上一篇教程:WEB2.0网页制作标准教程(7)CSS学习入门
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。
1.定义DIV
分析一个典型的定义div例子:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING-LEFT: 20px;
PADDING-TOP: 20px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 10px;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
说明如下:
层的名称为sample,在页面中用<div id="sample">就可以调用这个样式。
MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN: 10px;"。如果边距为零,要写成"MARGIN: 0px;"。注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。MARGIN是透明元素,不能定义颜色。
PADDING是指层的边框到层的内容之间的空白。"PADDING-LEFT"是指左边边框到内容的距离,以此类推。如果都一样,可以缩写成"PADDING:0px"。PADDING是透明元素,不能定义颜色。
BORDER是指层的边框,"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。
BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bg_logo.gif)"来指定背景图片路径;其次定义背景色"#FEFEFE"。"on-repeat"指背景图片不需要重复,如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
COLOR用于定义字体颜色,上一节已经介绍过。
TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。
LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。
WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。
下面是这个层的实际表现:
这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,
这里是演示内容,这里是演示内容,
这里是演示内容,这里是演示内容,
这里是演示内容...
我们可以看到边框是2px的灰色,背景图片在右下没有重复,内容距离上和左边框20px,内容居中,一切和预想的一样。hoho,虽然不好看,但它是最基本的,掌握了它,你就已经学会一半的CSS布局技术了。就是这样,不算难吧!(另一半是什么?另一半是层与层之间的定位。我会在后面逐步讲解。)
猜你喜欢
- 本文由伯乐在线 - 敏捷翻译的史莉萍翻译自《Creating an Effective Color-Scheme for Web Desig
- RNN(recurrent neural Network)循环神经网络主要用于自然语言处理(nature language processi
- 代码# -*- coding:utf-8 -*-import osimport timef
- 一、安装 → pyinstaller1.1 方式1:cmd1. 调出运行窗口:win + r, 并输入 cmd2. 切换到 pip.exe
- 首先这个是7米当时问我一个问题,不过可惜我不知道怎么解决,后来知道解决方法很简单,只是添加了一个margin-top:-1em就
- Nagios是一款开源的免费网络监视工具,能有效监控Windows、Linux和Unix的主机状态,交换机路由器等网络设置,打印机等。在系统
- gitignore是什么文件就是git软件要忽略的文件列表,如果要忽略某些文件,,在Git工作区的根目录下创建一个特殊的.gitignore
- <?php/*======================================事务处理==================
- slice 可以用来获取数组片段,它返回新数组,不会修改原数组。除了正常用法,slice 经常用来将 array-like 对象转换为 tr
- 前言在实际生产环境中,如果对mysql数据库的读和写都在一台数据库服务器中操作,无论是在安全性、高可用性,还是高并发等各个方面都是不能满足实
- 功能所在位置该功能运用了django.contrib.messages这个库,再django项目中srtting.py文件中的38行,APP
- 引言在前面的文章当中我们讨论的是 python3 当中早期的内嵌数据结构字典的实现,在本篇文章当中主要介绍在后续对于字典的内存优化。字典优化
- JavaScript 循环中,i++ 与 i– 那个比较快?相信有不少朋友看过相关的讨论文章,比如这篇。文章解释了开启优化选项后,i– 的
- 前言康威生命游戏设计并不难,我的思路就是借助pygame进行外观的展示,最近一段时间的游戏项目都是使用pygame进行的,做起来比较顺利。内
- urllib的基本用法urllib库的基本组成利用最简单的urlopen方法爬取网页html利用Request方法构建headers模拟浏览
- 本文实例讲述了python实现域名系统(DNS)正向查询的方法。分享给大家供大家参考,具体如下:域名系统(DNS)是一个分布式的数据库,主要
- 前言之前用vue+ant-design-vue写了一个动态路由的页面,更新看一下不能用了555~~~之前用的组件版本不知道了,回退也不知道哪
- 思路:利用time函数返回的时间字符串与指定时间字符串做比较,相等的时候执行对应的操作。不知道大家的思路是什么,感觉这样比较耗CPU。。。。
- 继续List: 删除元素: a =[1, 2, 3, 4] a[2:3] = [] #[1, 2, 4] del a[2] #[1, 2]
- 如果您刚刚开始学习PHP,可能有许多函数需要研究,今天我们就来学习一下PHP Header()的使用方法,更多的使用说明,请您参照PHP中文