您的位置：首页 > Web前端 > HTML

html学习第四天

2018-01-12 15:35 232 查看

今天是html学习的第四天

今天的主要学习内容依然是css声明

一、关于列表的css声明

1、列表符号

list-style-type:none（什么都不显示）/disc（实心圆）/circle（空心圆）/sequare（实心方块）

注意：li标签一般要使用list-style-type 来将列表的样式取消掉

2、使用图片作为列表符号

list-style-image:url(图片的路径);

注意:使用图片作为列表符号的话，图片和li标签之间的距离不能设置

3、列表符号的位置

list-style-position:inside(里面)/outside（外面）;

这个里面和外面是相当于li标签的

列表符号的缩写

list-style:属性值1 属性值2 属性值3;

二，关于背景的css声明

1、背景颜色

backgound-color:颜色;

2、背景图片

background-image:url(图片的路径);

3、背景图片的位置

backgorund-position:水平位置
竖直位置;

水平位置 :left/center/right

竖直位置:top/center/bottom

网页上有两种图片形式，插入图片，背景图片，插入图片为网页内容，背景图为网页的表现，即，插入图片是html中的，背景图是css中的

也可以写一个数值。比如 3px 5px; 表示水平位置向右挪3px，竖直位置向下挪5px；

4、背景图片的固定

background-attachment:scroll(滚动)/(fixed)

注意：当较大的图片做背景的话，最好给图片的位置设置为水平居中

如果要将背景图设置为固定。要将背景图加在<body></body>中，如果不加在body中，那么背景图会脱离流，和body对齐

5、背景的平铺设置

background-repeat:no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(竖直平铺)/repeat（平铺）

6、网页上常用的图片格式（压缩图片）

（1）jpg

有损失压缩格式：靠损失图片本身的质量来减小图片体积，适用于颜色丰富的图像

（2）png

有损失压缩格式：靠损失图片的色彩数量来减小图片体积。支持透明，是frameworks的源文件格式，适用于颜色数值少的图像（一般用于透明图像）

（3）gif

有损失压缩格式，靠损失图片的色彩数量来减小图片体积，支持透明，支持动画，适用于颜色数量少的图像

在IE浏览器中，img标签加了超链接之后，就会有一个边框，要想去掉边框，可设置 img{border:none;}

三、浮动属性

1）float: left/ight/none;

作用：浮动对象会向左或者向右浮动，直到遇到边框（border），padding，margin或者另一个块状元素为止

2）清除浮动

cear:both/none/left/right;

left：不允许左边有浮动对象

right：不允许右边有浮动对象

none：允许两边有浮动对象

both：不允许左边有浮动对象

清除浮动可以理解为让浮动的元素占上位置

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航