顶部导航栏吸顶效果

最新推荐文章于 2022-11-05 10:21:28 发布

欢欢**

最新推荐文章于 2022-11-05 10:21:28 发布

阅读量530

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/yihjh/article/details/120745693

版权

参考 https://gs.amazon.cn/home.html 重点完成功能： 1、顶部导航栏的吸顶效果 2、鼠标悬浮，有下拉菜单效果 3、反馈按钮，不随滚动条移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>亚马逊</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#out{
				width: 100%;
				overflow: hidden;
				position: fixed;
				top: 0px;
				left: 0px;
				background: #fff;
				padding-left:200px ;
			}
			#out li{
				float: left;
				list-style: none;
				line-height: 80px;
				/*border: 1px solid red;*/
				width: 150px;
				text-align: center;
			}
			#out li a{
				color: #000;
				font-weight: bold;
				text-decoration: none;
				font-size: 20px;
			}
			#out li a div{
				z-index: 100;
				border: 1px solid gainsboro;
				background: #fff;
				line-height: 40px;
				color: gray;
				font-weight: normal;
				display: none;
				width: 150px;
			}
			#out li a:hover div{
				display: block;
			}
			#out li:first-child{
				position: relative;
			}
			#out li:first-child img{
				position: absolute;
				top: 12px;
				left: 0px;
			}
			#out li:first-child+li:nth-child(2){
				margin-left: 200px;
			}
			#out li:last-child img{
				position: absolute;
				top: 12px;
				left: 1600px;
			}
			section{
				margin-top: 80px;
			}
			
			#fk input{
				color: #fff;
				background-color: #0079AF;
				font-size: 16px;
				font-weight: bold;
				width: 60px;
				line-height: 30px;
				border-radius: 20px;
				position: fixed;
				right: 15px;
				bottom: 5px;
				text-align: center;
				border: 1px solid #0079AF;
			}
		</style>
	</head>
	<body>
		<header>
			<ul id="out">
				<li><img src="img/亚马逊全球开店.png"/></li>
				<li>
					<a href="#">
						站点介绍v
						<div>
							<p>北美站</p>
							<p>欧洲站</p>
							<p>日本站</p>
							<p>澳洲站</p>
							<p>印度站</p>
							<p>中东站</p>
							<p>新加坡站</p>
						</div>
					</a>
				</li>
				
				<li>
					<a href="#">
						我要开店v
						<div>
							<p>开店前准备</p>
							<p>账户注册</p>
							<p>业务增长</p>
						</div>
					</a>
				</li>
				
				<li>
					<a href="#">
						资源与服务v
						<div>
							<p>物流仓储服务</p>
							<p>营销推广服务</p>
							<p>品牌成长计划</p>
							<p>亚马逊企业购</p>
							<p>业务拓展方案</p>
						</div>
					</a>
				</li>
				
				<li>
					<a href="#">
						最新咨询v
						<div>
							<p>政策规则</p>
							<p>官方咨询</p>
							<p>服务动态</p>
						</div>
					</a>
				</li>
				
				<li>
					<a href="#">
						官方培训v
						<div>
							<p>未开店企业</p>
							<p>注册中卖家</p>
							<p>以开店卖家</p>
						</div>
					</a>
				</li>
				
				<li>
					<a href="#">
						立即注册v
						<div>
							<p>北美注册</p>
							<p>欧洲注册</p>
							<p>日本注册</p>
							<p>澳洲注册</p>
							<p>新加坡注册</p>
							<p>阿联酋注册</p>
							<p>沙特注册</p>
							<p>印度注册</p>
						</div>
					</a>
				</li>
				
				<li>
					<a href="#">
						登录v
						<div>
							<p>北美卖家平台</p>
							<p>欧洲卖家平台</p>
							<p>日本卖家平台</p>
							<p>澳洲卖家平台</p>
							<p>新加坡卖家平台</p>
							<p>阿联酋卖家平台</p>
							<p>沙特卖家平台</p>
						</div>
					</a>
				</li>
				<li><img src="img/搜索.png"/></li>
			</ul>
		</header>
		<section>
			<img src="img/页面.png" />
		</section>
		
		<nav>
			<div id="fk">
				<input type = "text" name="but" value="反馈" />
			</div>
		</nav>
	</body>
</html>