使用Jquery实现简单的页面布局

最新推荐文章于 2024-10-01 09:19:23 发布

YYGC.

最新推荐文章于 2024-10-01 09:19:23 发布

阅读量908

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/AMYCX/article/details/127275220

版权

一.创建div布局

div id="qwe">
			<div id="left">
				<ul>
					<li><a href="#">冬裙</a></li>
					<li><a href="#">毛衣</a></li>
					<li><a href="#">棉服</a></li>
					<li><a href="#">呢大衣</a></li>
					<li><a href="#">牛仔裤</a></li>
					<li><a href="#">女裤</a></li>
					<li><a href="#">女靴</a></li>
					<li><a href="#">雪地靴</a></li>
					<li><a href="#">羽绒服</a></li>
				</ul>
			</div>
			<div id="right">
				<ul>
					<li><img src="img/冬裙.jpg"></li>
					<li><img src="img/毛衣.jpg"></li>
					<li><img src="img/棉服.jpg"></li>
					<li><img src="img/呢大衣.jpg"></li>
					<li><img src="img/牛仔裤.jpg"></li>
					<li><img src="img/女裤.jpg"></li>
					<li><img src="img/女靴.jpg"></li>
					<li><img src="img/雪地靴.jpg"></li>
					<li><img src="img/羽绒服.jpg"></li>
				</ul>
			</div>
		</div>

二.给布局设置样式

<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			a{
				text-decoration: none;
			}
			ul li{
				list-style: none;
			}
			#qwe{
				width: 320px;
				height: 250px;
				border: 1px pink solid;
				margin: 10px auto;
				overflow: hidden;
				
			}
			#left{
				width: 90px;
				float: left;
			}
			#right{
				width: 230px;
				float: right;
			}
			#left ul li a{
				display: inline-block;
				width: 80px;
				height: 26px;
				border: 1px pink solid;
				background-color: pink;
				font-family: "楷体";
				font-size: 15px;
				text-align: center;
				line-height: 26px;
			}
		</style>

三.给页面设置实现方法

<script src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#left>ul li").mouseover(function(){
					var index=$(this).index()
					$("#right>ul li:eq("+index+")").fadeIn().siblings().hide()
				})
			})
		</script>

四.最终布局显示