基本的图面设计

1.精品案例展示

页面代码

<div class="wrapper">
			<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="content">
				<ul>
					<li><a href="#"><img src="女靴.jpg" ></a></li>
					<li><a href="#"><img src="雪地靴.jpg" ></a></li>
					<li><a href="#"><img src="冬裙.jpg" ></a></li>
					<li><a href="#"><img src="呢大衣.jpg" ></a></li>
					<li><a href="#"><img src="毛衣.jpg" ></a></li>
					<li><a href="#"><img src="棉服.jpg" ></a></li>
					<li><a href="#"><img src="女裤.jpg" ></a></li>
					<li><a href="#"><img src="羽绒服.jpg" ></a></li>
					<li><a href="#"><img src="牛仔裤.jpg" ></a></li>
				</ul>
			</div>
		</div>

运行代码

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				font-size: 12px;
			}
			ul{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			
			.wrapper{
				width: 250px;
				height: 248px;
				margin: 20px auto 0;
				border: 1px solid pink;
				border-right: 0;
				overflow: hidden;/*超出范围的隐藏*/
			}
			#left{
				float: left;
			}
			#content{
				float: right;
			}
			#left ul li a{
				display: block;
				width: 48px;
				height: 27px;
				border-bottom: 1px solid pink;
				line-height: 27px;
				text-align: center;
				color: black;
				background-color: red;
			}
			#left li a:hover{
				background-color: bisque;
			}
			#content{
				border-left: 1px solid pink;
				border-right: 1px solid pink;
			}
		</style>

程序代码

<script src="../js/jquery.min.js"></script>
		<script>
			$(function(){
				$("#left>ul>li").mouseover(function(){
					//拿到当前鼠标放入列表项的索引
					var index=$(this).index();
					//根据索引找到右侧匹配的项进行显示，其他兄弟元素隐藏
					$("#content>ul>li:eq("+index+")").fadeIn().siblings().hide();
				})
			})
		</script>

效果图