背景属性
background-color 背景颜色 background-image背景图片 background-repeat背景重复(no-repeat不重复)
background-position:设置背景图像的坐标 background-size背景图片的大小 cover铺满全屏 contain 一边到头
列表属性
list-style-type列表的标志:(none去掉标志 square方块 circle空心圆 inside标志在<li> 里面 outside相反 list-style-image 将标志换成图象 list-style-position 改变标志的位置)
鼠标类型形状
cursor: 1.crosshair十字 2.pointer小手 3.move交叉箭头 4.text默认 5.wait加载 6.help问号 7.not-allowed 禁止
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.p1{
/*背景颜色*/
/*background-color: green;*/
/*background-color: rgba(100%,0%,0%,0.1);*/
/*background-color: rgb(255,0,0);*/
background-color: #00f;
/*背景图片*/
background-image: url(img/2.png);
/*背景重复*/
background-repeat: no-repeat;
/*背景图像的位置坐标*/
/*background-position:left,center;*/
/*background-position: left top;*/
/*background-position: 500px 50px;*/
background-position: 50% 100%;
/*背景图片的大小*/
/*background-size: cover;*/
/*background-size:2000px 300px;*/
/*background-size: 100% 100%;*/
/*background-size: contain;*/
background-attachment: fixed;
height: 300px;
/*cursor: crosshair;*/
}
ul{
background: lightblue;
}
ul li{
background: lightcoral;
/*list-style-position:outside;*/
/*list-style-type: square;*/
list-style-image: url(img/jd.jpg);
list-style-position: inside;
}
.p2{
height:100px;
width: 100px;
background-color: #ff0000;
cursor:not-allowed;
background-attachment: fixed;
overflow: scroll;
}
</style>
</head>
<body>
<p class="p1">我是p元素</p>
<ul>
<li>我是ul-li元素</li>
<li>我是ul-li元素</li>
<li>我是ul-li元素</li>
</ul>
<div class="p2">
我是div元素
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
</div>
</body>
</html>
运行效果如下: