我的CSDN第一天，也是我的javaweb第一天

小白第一天新手报到，作图真的很辛苦。写了一个前端页面。对div更深的应用

图片效果在这里插入图片描述
动态效果

其中body的外边距默认为8
ul{
list-style: none; /无序列表清除圆点/
margin: 0;
padding: 0
}*
.wrap li{
position: relative;/监管绝对定位/
width: 180px;
height: 105px;
background-color: rgba(0,0,0,0.3); /0.3透明度/
float: left;/向左浮动/
margin: 30px 5px;
}
万能居中
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
.wrap img:hover{/当鼠标放到img标签，执行{}里面的代码/
transform: rotate(360deg) scale(1.3);
}
图片中的545排列< li style=“margin-left: 100px” >< /li >

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<meta name="Keywords" content="关键字">
    <meta name="Description" content=" ">

    <style>
		body{
			margin: 8;
			background: url("images/bodyBg.jpg");
		}
		.wrap{
			width: 950px;
			height: 500px;
			/* background-color: #E8F6FF; */
			margin: 100px auto ;
		}

		ul{
			list-style: none;
			margin: 0;
			padding: 0
		}

		.wrap li{
			position: relative;
			width: 180px;
			height: 105px;
			background-color: rgba(0,0,0,0.3); 
			float: left;
			margin: 30px 5px; 
		}
		
		.wrap li:before{/*伪元素*/
			content: " ";
			width: 180px;
			height: 105px;
			background-color: rgba(0,0,0,0.3);
			position: absolute;
			left: 0;
			top: 0;
			transform: rotate(60deg);
		}

		.wrap li:after{
			content: " ";/*content激活伪元素的必要元素*/
			width: 180px;
			height: 105px;
			background-color: rgba(0,0,0,0.3);
			position: absolute;
			left: 0;
			top: 0;
			transform: rotate(-60deg);
		}

		.wrap img{
			position: absolute;
			z-index: 1;/*控制层级。默认为0*/
			/* 
			margin: 13px 50px; 
			*/
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;/*万能居中*/
			transition: 1s;/*css3动画过渡效果*/
		}

		.wrap img:hover{/*当鼠标放到img标签，执行{}里面的代码*/
			transform: rotate(360deg) scale(1.3);
		}



		/*
		 .left{
			width: 180px;
			height: 105px;
			background-color: rgba(0,0,0,0.3);
			position: absolute;
			left: 0;
			top: 0;
			transform: rotate(60deg);/*css3变换属性 旋转 角度*
		}
		*/
		/*
		.right{
			width: 180px;
			height: 105px;
			background-color: rgba(0,0,0,0.3);
			position: absolute;
			left: 0;
			top: 0;
			transform: rotate(-60deg);
		}
		*/
	</style>

</head>

<body>
	<div class="wrap">
		<ul>
			<li><img src="images/1.png"></li>
			<li><img src="images/2.png"></li>
			<li><img src="images/3.png"></li>
			<li><img src="images/4.png"></li>
			<li><img src="images/5.png"></li>
			<li style="margin-left: 100px"><img src="images/6.png"></li>
			<li><img src="images/7.png"></li>
			<li><img src="images/8.png"></li>
			<li><img src="images/9.png"></li>
			<li><img src="images/10.png"></li>
			<li><img src="images/11.png"></li>
			<li><img src="images/12.png"></li>
			<li><img src="images/13.png"></li>
			<li><img src="images/14.png"></li>
		</ul>
	</div>

</body>
</html>

我的CSDN第一天，也是我的javaweb第一天

猜你喜欢