实训小项目6：JD商城列表项

最新推荐文章于 2024-09-16 23:33:40 发布

DANEHONG

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量557

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/DANEHONG/article/details/135613176

版权

需要实现以下效果：

所需图片如下：

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JD</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#jd{
				width: 100%;
				height: 1200px;
				background-color: #f7f7f7;
			}
			#jd #list{
				width: 1200px;
				margin: 0 auto;
				display: flex;
				list-style-type: none;
				justify-content: space-around;
			}
			#list li{
				box-shadow: 5px 3px 4px lightgray;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 30px;
				transition: all 1s;
			}
			li p img{
				width: 100px;
			}
			li a {
				text-decoration: none;
			}
			a p:nth-child(1){
				font-size: 24px;
				color: black;
			}
			a p:nth-child(2){
				font-size: 16px;
				color: gray;
				margin: 10px 0 30px;
			}
			a p:nth-child(3){
				display: none;
			}
			#list .active{
				flex:1.8;
				background-image: url(img/jdbg.png);
			}
			.active a{
				display: block;
				width: 85%;
			}
			.active a p{
				color: white;
			}
			.active a p:nth-child(3){
				display: block;
				font-size: 20px;
				width: 80px;
				border: 2px solid white;
				border-radius: 20px;
				text-align: center;
			}
			.active a p:nth-child(4){
				position: relative;
			}
			.active a p img {
				width: 200px;
				position: absolute;
				right: -10px;
				bottom: -70px;
				transition: all 1s;
			}
		</style>
	</head>
	<body>
		<div id="jd">
			<ul id="list">
				<li>
					<a href="">
						<p>游戏手机</p>
						<p>白条24免息</p>
						<p>GO</p>
						<p><img src="img/m60.png" alt=""></p>
					</a>
				</li>
				<li>
					<a href="">
						<p>首发手机</p>
						<p>有新机更有范</p>
						<p>GO</p>
						<p><img src="img/m50.png" alt=""></p>
					</a>
				</li>
				<li>
					<a href="">
						<p>手机好点</p>
						<p>爆款现货抢购</p>
						<p>GO</p>
						<p><img src="img/op.png" alt=""></p>
					</a>
				</li>
				<li>
					<a href="">
						<p>爸妈新机</p>
						<p>让等待成为过去</p>
						<p>GO</p>
						<p><img src="img/iqz6.png" alt=""></p>
					</a>
				</li>
				<li>
					<a href="">
						<p>手机好点</p>
						<p>爆款现货抢购</p>
						<p>GO</p>
						<p><img src="img/op.png" alt=""></p>
					</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var lis=document.getElementsByTagName('li');
			for(i=0;i<lis.length;i++){
				
				lis[i].addEventListener('mouseenter',function(){
					this.classList.add('active');
				},false);
				lis[i].addEventListener('mouseleave',function(){
					this.classList.remove('active');
				},false)
			}
		</script>
	</body>
</html>