背景 列表属性及鼠标类型

背景属性

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>

运行效果如下:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值