CSS背景与列表

  • CSS中背景的使用

  • CSS中列表的使用

15.1 CSS中背景的使用

        属性名称                             属性值                                 说明

background-attachment     scroll            设置背景图像会随视窗滚动

条的移动而移动。

fixed             设置背景图像不会随视窗滚动条

的移动而移动。

background-color        十六进制                 background-color:#ff0000;

英文名称              background-color:red;

三原色                 background-color:rgb(255,0,0)

transparent     background-color:transparent;透明

background-image         URL                background-image:url("bg.jpg")

背景图片

none                   不设置背景图片

background-position       top left           设置背景图案出现在上左方。

top center         设置背景图案出现在上方中间。

top right          设置背景图案出现在上右方。

center left        设置背景图案出现在中间左方。

center center      设置背景图案出现在IE中间。

center right       设置背景图案出现中间右方。

bottom left        设置背景图案出现在下左方。

bottom             设置背景图案出现在正下方。

bottom right       设置背景图案出现在下右方。

background-repeat        repeat            将背景图案填满整个背景。

repeat-x          将背景图案在水平方向添满。

repeat-y          将背景图案在垂直方向添满。

no-repeat         图案只出现一次。

背景图案简化方案:

background:颜色 背景图片 repeat attachment position

例:background:blue url("xxx.jpg") no-repeat fixed center center

15.2 CSS中列表的使用

属性名称            属性值            说明

list-style-type      none             无符号

disc              实体的小圆点。

circle            空心的小圆点。

square            实心的小方块。

decimal            1,2,3...

lower-roman        i,ii,iii...

upper-roman        I,II,III...

lower-alpha        a,b,c,d,e...

upper-alpha        A,B,C,D,E...

list-style-position inside            清单项目较往右移。

outside            清单项目正常显示。

list-style-image     URL             list-style-image:url(lmk.gif)

none            不会显示任何图象

清单的简化设置:

list-style:circle inside url("bullet.gif")

时间: 2024-12-24 08:57:35

CSS背景与列表的相关文章

CSS背景、列表、盒子模型

本章内容: CSS背景 CSS列表 一.CSS背景 A.背景颜色 background-color:颜色 | transparent(透明色) B.背景图片 background-image:url | none 注意:当同时设置了图片和背景颜色时,图片会覆盖颜色 background-repeat:repeat (重复/默认)| no-repeat(不重复) | repeat-x(s轴重复) | repeat-y(y轴重复) 当一张图片没有容器大时,图片默认复制自己填充容器: backgrou

css背景及css列表

CSS背景 background是一个综合属性,它分为以下几个属性. background-color 背景色 background-image 背景图片 background-repeat 设置背景图的平铺方式 属性值:no-repeat repeat-x repeat-y background-position 设置或检索对象的背景图像位置 background-size 设置背景图的尺寸 background-attachment 设置或检索背景图像是随对象内容滚动还是固定的 fixed 

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

html5晋级之路-css背景

css背景: css允许应用纯色作为背景,也允许使用图片来创建相当复杂的效果. background-attachment            背景图像书否固定或随页面的其余部分滚动 background-color                     设置元素的背景颜色 background-image                   把图片设置为被禁 background-position                设置背景图片的起始位置 background-repeat  

css 背景图片拉伸[转]

http://www.jeasyuicn.com/css-background-image-stretching.html background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; -moz-border-image: url(bg.png)

用 CSS 控制li列表的长度,让li里面的内容不换行显示,而且让多余li长度的内容用...表示

用 CSS 控制li列表的长度,让li里面的内容不换行显示,而且让多余li长度的内容用...表示,其实实现的方法很简单.我们只需要在对li的css样式进行控制就可以了,具体如下: 1 white-space:nowrap; /*不让文字内容换行*/ 2 overflow:hidden;/*文字溢出的部分隐藏起来*/ 3 text-overflow:ellipsis; /*用...替代溢出的部分*/

CSS背景图片定位

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

css背景-边框-文本

一.CSS3背景 属性列表 background background-color background-image background-repeat background-attatchment background-position background-origin background-clip background-size 1.CSS3背景原点属性 background-origin 设置或检索对象的背景图像计算background-position时的参考原点位置 IE8 Fir

css中的列表样式

在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表样式主要是对列表项目前列表符号的设置,其语法如下: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian