ul横向排列css_CSS

CSS背景

CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果： ​ 1.background-color 属性定义了元素的背景颜色。 ​ 2.background-image 属性描述了元素的背景图像. ​ 3.background-repeat 背景图像 - 水平或垂直平铺，no repeat ，没有平铺 ​ 4.background-position 属性改变图像在背景中的位置 ​ 为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。 ​ 图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。如果只有一个关键字，则会默认另一个关键字为 center。 ​ 百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置： ​ background-position:50% 50%; ​ 长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。 ​ 5.background-size 属性设置图片的大小 ​ background-size: cover; 图片等比例缩放，会铺满整个元素 ​ background-size: contain; 图片等比例缩放，不会铺满整个元素 ​ -webkit-background-size: 400px 200px; ​ background-size: 400px 200px; 设置宽高 ​
​ 6.background-attachment: fixed; 设置背景图片固定定位，参照的是浏览器窗口，背景图片会铺满整个浏览器窗口 ​
背景- 简写属性 body {background:#ffffff url('img_tree.png') no-repeat right top;} 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.背景颜色的简写属性为 "background" 属性值的顺序为：background-color; background-image; background-repeat; background-attachment; background-position

注意：如果元素没有设置高度（height），那么元素的高度由内容来撑开 想要实现body的高度和浏览器的窗口一样高，如下： body,html { height: 100%; }

CSS精灵图

把网站或网页所需要的小图标放在一张大图片上面，这个大图片就是精灵图 下图为百度首页的一张精灵图：

作用：避免加载图片时都需要进行网络请求，减轻了服务器的压力 方法： ​ 1.使用一个无语义化的行内元素作为背景图片的载体 ​ 2.选中元素，然后添加背景相关的样式 ​ a)设置元素的宽高 ​ b)设置背景图片 ​ c)设置背景图片不允许平铺 ​ d)设置背景图片的位置 ​ 3.现实开发中，精灵图已经被字体图标替代了，字体图标占用字节少，类似矢量图，还可以当初文本设置图标颜色 ​ 4.字体图标库推荐：阿里巴巴矢量图标库

CSS 文本属性

1.color文本的颜色 可使用颜色名称、RGB、十六进制数来指定颜色。 2.opacity用来设置透明度，默认值为1，1为不透明，0为完全透明。 p{ opacity: 0;} 隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。 3.font字体设置 属性名|说明|参数说明 ---|:--:|---: font-family|字体名称|例如：Arial，"微软雅黑"，"宋体" font-size|字体大小|例如：18px，2em font-style|字体风格|normal(缺省)，italic, oblique font-weight|字体粗细|normal(缺省)，bold或数值。 4.text-align文本对齐属性规定元素中的文本的水平对齐方式，只能设置块级元素内文本的水平对齐方式。 属性值|描述| ---|:--:| left|把文本排列到左边。默认值：由浏览器决定。| right|把文本排列到右边。| center|把文本排列到中间。| justify|实现两端对齐文本效果。| 5.text-decoration字体装饰

6.line-height行高 line-height 属性设置行间的距离（行高），属性值可以为数值也可以为百分比。line-height妙用：设置文字居上下中展示

CSS列表属性

列表属性主要针对的是ul和ol类型的列表。 1 list-style-type list-style-type 列表样式，类型属性值可以为： disc (缺省值，黑圆点)；circle (空心圆点) ；square (小黑方块)；none (无列表项标记，针对无序列表)