唯品会导航栏简单制作

weipinhui.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>唯品会</title>
		<link href="css/weipinhui.css" rel="stylesheet" type="text/css"/>
	</head>
	<body>
		
		<div id="right">
			<div id="right1">账号</div>
			<div id="right2">购物袋</div>
		</div>
		
		<div id="div1">
			<div id="div1_content">
				<div>
					<a href="">我的订单</a>&nbsp;&nbsp;&nbsp;/
				</div>
				<div>
					<a href="">我的特卖</a>&nbsp;&nbsp;&nbsp;/
				</div>
				<div>
					<a href="">会员俱乐部</a>&nbsp;&nbsp;&nbsp;/
				</div>
				<div>
					<a href="">客户服务</a>&nbsp;&nbsp;&nbsp;/
				</div>
				<div>
					<img src="img/smartphonepng.png"/ id="img1"><a href="">手机版</a>&nbsp;&nbsp;&nbsp;/
				</div>
				<div>
					<a href="">更多</a>&nbsp;&nbsp;&nbsp;/
				</div>
			</div>
		</div>
		
		<div id="div2">
			<div id="div21">
				<img src="img/21.png"/>
			</div>
			<div id="div22">
				<div>100%正品</div>
				<div>88元包邮</div>
				<div>退换无忧</div>
			</div>
			<div id="div23">
				<div id="div231">
					<input type="text" />
				</div>
				<div id="div232">
				<img src="img/search.png" />
			    </div>
			</div>
			<div id="div24">
				购物袋
				<div id="div241">
					<div id="div2411"></div>
				</div>
			</div>
		</div>
		
		<div>
			<img src="img/01.jpg" />
		</div>
		<div>
			<img src="img/01.jpg" />
		</div>
		<div>
			<img src="img/01.jpg" />
		</div>
		<div>
			<img src="img/01.jpg" />
		</div>
		<div>
			<img src="img/01.jpg" />
		</div>
		<div>
			<img src="img/01.jpg" />
		</div>
		
	</body>
</html>

weipinhui.css

*{
	margin: 0px;
	padding: 0px;
}
body{
	min-width: 1200px;/*缩小窗口,出滚动条,内容不串行*/
}
#div1{
	width: 100%;
	height: 30px;
	background-color: #F5F5F5;
	/*padding-left: 580px;*//*推到右侧*/
	position: relative;
}
#div1_content{
	width: 530px;
	height: 30px;
	line-height: 30px;/*将字体往下移动*/
	display: flex; /*弹性盒子*/
	color: gray;
	position: absolute;
	left: 580px;
}
#div1_content div{
	flex: 1;/*每个占1份*/
	font-size: 13px;
}
#div1_content div a{
	text-decoration: none;/*去掉下划线*/
	color: gray;
}
#img1{
	vertical-align: middle;/*将手机图标移到中间*/
}
#div1_content div a:hover{
	color: #FA2A83;
}
#div2{
	width: 100%;
	height: 100px;
	position: relative;
}
#div21{
	position: absolute;
	left: 120px;
}
#div21 img{
	width: 160px;
	height: 100px;
}
#div22{
	position: absolute;
	left: 300px;
	display: flex;
	width: 300px;
	height: 100px;
	line-height: 100px;
}
#div22 div{
	flex: 1;
}
#div23{
	width: 420px;
	position: absolute;
	left: 660px;
	height: 100px;
	line-height: 100px;
}
#div231{
	position: absolute;
	left: 0px;
	top: 0px;
}
#div231 input{
	border: 2px solid #FA2A83;
	width: 340px;
	height: 34px;
	outline: none;
}
#div232{
	position: absolute;
	left: 340px;
	top: 32px;
	width: 50px;
	height: 38px;
	background-color: #FA2A83;
}
#div232 img{
	position: absolute;
	top: 5px;
	left: 10px;
}
#div24{
	border: 1px solid darkgray;
	background-color: #F6F7F9;
	height: 35px;
	line-height: 35px;
	width: 100px;
	position: absolute;
	left: 1100px;
	top: 32px;
	font-size: 13px;
	text-align: center;
}
#div241{
	position: absolute;
	left: 75px;
	top: 10px;
	width: 20px;
	height: 15px;
	background-color: #FA2A83;
	border-radius: 8px;/*加圆角*/
}
#div2411{
	position: absolute;
	left: 5px;
	top: 6px;
	width: 10px;
	height: 2px;
	background-color: white;
}
#right{
	width: 30px;
	height: 800px;
	background-color: black;
	position: fixed;
	right: 0px;
	top: 0px;
	z-index: 10;
}
#right1{
	 width: 30px;
	 height: 50px;
	 color: white;
	 position: relative;
	 top: 200px;
}

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页