商城左侧菜单栏网页模板

程序员文章站 2022-04-25 07:51:58

...

哈哈哈直接上代码趴！

商城左侧菜单栏网页模板编辑如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.wrapper{
				width: 1200px;
				height:500px;
				background-color: green;
				margin: 0 auto;  /* 居中 */
				position: relative;    /* 子绝父相 */
			}
			
			.rightbox{
				width: 1000px;
				height: 500px;
				background-color: slateblue;
				position: absolute;
				right: 0;
				top:0;
			}
			
			
			.leftbox{
				width: 200px;
				height: 500px;
				background-color: #eee;
			}
			
			
			.leftbox ul{
				list-style: none;
			}
			
			.leftbox ul li{
				height: 30px;
				line-height: 30px;
			}
			
			.leftbox a{
				text-decoration: none;
				color: #323232;
			}
			
			.leftbox{
				color:#323232;
			}
			
			.leftbox li p{
				width:180px;
				height: 30px;
				padding-left: 20px;
			}
			
			.leftbox li:hover p{
				width:180px;
				height: 30px;
				border: solid 1px blue;
				padding-left: 20px;
				border-right:0;
				position: relative;
				z-index: 2; /* 这个也就相当于是权重的意思 */
				background-color: #eee;
			}
			
			.submenu{
				width:998px;
				height:498px;
				background-color:#eee;
				border: solid 1px blue;
				position: absolute;
				top: 0;
				left: 200px;
				z-index: 1;
				display: none;
			}
			
			.leftbox li:hover div.submenu{
				display: block;  /* 块级元素 */
			}
			
		</style>
	</head>
	<body>
		
		<div class="wrapper">
			<div class="leftbox">
				<ul>
					<li>
						<p><a href="">周杰伦</a>/<a href="">昆凌</a> </p>
						<div class="submenu"><img src="img/J.jpg"/></div>
					</li>
					<li>
						<p><a href="">电子书</a>/<a href="">网络文学</a></p>
						<div class="submenu"><img src="img/p2.png"/></div>
					</li>
					<li>
						<p><a href=""></a>/<a href="">拍卖</a>/<a href="">电子书</a> </p>
						<div class="submenu">333</div>
					</li>
					<li>
						<p><a href="">服饰</a>/<a href="">内衣</a> </p>
						<div class="submenu">4444</div>
					</li>
					<li>
						<p><a href="">鞋靴</a>/<a href="">箱包</a> </p>
						<div class="submenu">5555</div>
					</li>
					<li>
						<p><a href="">运动</a>/<a href="">户外</a> </p>
						
						<div class="submenu">666</div>
					</li>
					<li>
						<p><a href="">孕</a>/<a href="">婴</a>/<a href="">童</a> </p>
						<div class="submenu">7777</div>
					</li>
					<li>
						<p><a href="">家居</a>/<a href="">家纺</a>/<a href="">汽车</a> </p>
						<div class="submenu">8888</div>
						
					</li>
				</ul>
				
				
			</div>
			<div class="rightbox"></div>
			
			
		</div>
		
		
	</body>
</html>