图片样式设置

效果截图

代码

<body>
	<style>
		ul li{
			list-style-type: none;
			display: inline-block;/**/
			padding-left: 10px;
		}
		li img{
			border-radius: 10px;
		}
		li h4{
			color:blue;
		}
		li p{
			color:green;
		}
		li:hover{
			box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1),0 0 10px 0 rgba(0,0,0,0.2);
		}
	</style>
	
	<ul>
		<li>
			<img src="img/img1.png">
			<h4>武神赵子龙</h4>
			<p>怒，林更新不抱网红报女神</p>
			<p>点击率：1234564次</p>
		</li>
		<li>
			<img src="img/img2.png">
			<h4>武神赵子龙</h4>
			<p>怒，林更新不抱网红报女神</p>
			<p>点击率：1234564次</p>
		</li>
		<li>
			<img src="img/img3.png">
			<h4>武神赵子龙</h4>
			<p>怒，林更新不抱网红报女神</p>
			<p>点击率：1234564次</p>
		</li>
		<li>
			<img src="img/img4.png">
			<h4>武神赵子龙</h4>
			<p>怒，林更新不抱网红报女神</p>
			<p>点击率：1234564次</p>
		</li>		
	</ul>
</body>
posted @ 2020-12-18 23:31  heshuiqingan  阅读(43)  评论(0)    收藏  举报