精通样式表技术笔记(六)
来源:互联网 发布:淘宝黑莓客户端 编辑:程序博客网 时间:2024/05/22 15:33
你可以设定将背景插在什么位置显示。
P { background-position: center bottom; background-image: url (background.gif) }
当上述CSS规则应用于本段文字时,背景图象将在本段的中下部开始显示并向右平铺。
如果你看不到上述的显示效果,则说明你所使用的浏览器是Communicator,它不支持背景定位。
设定位置的3种方法:
关键字参数(Keyword values)
关键字设定方法简便易用:
top将背景图象同前景要素的顶部对齐。
bottom将其同前景要素的底部对齐。
left将其同左边对齐。
right将其同右边对齐。
center将其水平居中(如果使用在另一关键字前面)或垂直居中(如果用在另一关键字后面)。
长度参数
长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点,例:
P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url
(background.gif) }
本段显示了上述规则的执行效果。IE支持这种属性,将GIF图象设置在从左上角起水平70象素,垂直10象素的位置。
由于我设置了 background-repeat: repeat-y,GIF图象将在文字后垂直平铺。
你可以使用我们以前学过的任何一种长度单位,例如pixels, points, inches, ems等。
(IE 3不支持长度单位显示这种效果)
比例值(Percentage values)
你还可以使用比例值设定背景图象的位置,例:
P { background-position: 75% 50%; background-image: url (background.gif) }
当这条CSS规则应用于本段时,背景图象从水平距离段落右端70%,垂直距离段落顶部50%的位置显示。
如果你重新调整浏览器窗口的尺寸,使得段落的显示尺寸变化,背景图象的位置也相应发生变化。
在本段上不会发生这样的变化,因为本段的尺寸是固定的,不会随着窗口尺寸的调整而变化。
27、背景(background)
利用背景属性,你可以设定背景颜色、图象、平铺方法、固定及滚动显示及定位。例:
P{background:url(background.gif) #CCFFCC repeat-y top right}
28、定位(左边和顶部)
定位属性将是网虫们打开幸福之门的钥匙:
绝对定位
H4 { position: absolute; left: 100px; top: 43px }
相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例:
I { position: relative; left: 40px; top: 10px }
29、定位宽度
定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制,即设定要素的宽度。
DIV { position: absolute; left:
200px; top: 40px; width: 150px }
宽度属性只适用于绝对定位的要素。
30、定位高度
理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上:
DIV{position:absolute;left:200px;top:40px;height:150px}
- 精通样式表技术笔记(六)
- 精通样式表技术笔记(一)
- 精通样式表技术笔记(二)
- 精通样式表技术笔记(三)
- 精通样式表技术笔记(四)
- 精通样式表技术笔记(五)
- 精通样式表技术笔记(七)
- 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素
- 读书笔记--精通CSS高级Web标准解决方案(六)---无序列表样式
- css样式学习笔记六
- java从入门到精通学习笔记(六)——网络编程
- 5日精通样式表一
- Android学习笔记(六) —— 样式化的定型对象 — Style样式的定义
- JSP技术(六)
- css3学习笔记(六)----Media Queries(媒体样式) 与Responsive(响应式)
- 对表单和数据表格应用样式--Css学习笔记(六)
- 《CSS+DIV网页样式与布局从入门到精通》第九章学习笔记(一)盒模型
- 精通CSS-链接样式
- Windows XP Embedded 入门
- 精通样式表技术笔记(五)
- 解决关于"因为配置类型不正确,系统无法开始服务器进程..."的错误
- 实现弹出"提示对话框"之后再进行"页面的转向"
- Struts-config.xml配置文件讲解(一)
- 精通样式表技术笔记(六)
- compile,build和execute的区别
- Jsp 应用之自定义标签库(taglib)及配置
- 精通样式表技术笔记(七)
- Struts-config.xml配置文件讲解(二)
- "lsass.exe-系统错误,终结点格式无效"问题
- Dot NET操作Excel COM对象
- Loki库里的Acyclic Visitor
- 关于C# MessageBox的使用