顶部导航栏吸顶效果_outli-程序员宅基地

技术标签: css  html  

参考 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>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yihjh/article/details/120745693

智能推荐

【一】微服务技术栈导学-程序员宅基地

文章浏览阅读952次。微服务是什么。微服务技术栈组成。_微服务技术栈

Java网络编程——NIO的阻塞IO模式、非阻塞IO模式、IO多路复用模式的使用_nio io模式-程序员宅基地

文章浏览阅读1k次,点赞3次,收藏6次。NIO虽然称为Non-Blocking IO(非阻塞IO),但它支持阻塞IO、非阻塞IO和IO多路复用模式这几种方式的使用。_nio io模式

整数规划蒙特卡洛模拟(Matlab实现)(1)-程序员宅基地

文章浏览阅读283次,点赞3次,收藏3次。matlab生成的随机数是伪随机数,因此可生成时间相关的随机数,总之和当前时间相关。%产生一行三列的区间在【0,99】上的随机整数。%设置该命令是因为每次产生随机数的时候,随机数生成器触发器的状态都会翻转一次。if p0

Python:求最大公约数与最小公倍数(辗转相除与递归两种方法)_python求最大公约数和最小公倍数-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏50次。导读 最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]欧几里得算法 _python求最大公约数和最小公倍数

AndroidStudio插件 GsonFormatPlus使用_android studio gsonformatplus怎么用-程序员宅基地

文章浏览阅读8.9k次,点赞4次,收藏24次。How to use lombok plugin in Android Studio?https://stackoverflow.com/questions/37991892/how-to-use-lombok-plugin-in-android-studio_android studio gsonformatplus怎么用

安装pyaudio的正确方法_pyaudio 安装-程序员宅基地

文章浏览阅读975次。安装pyaudio的正确方法_pyaudio 安装

随便推点

Windows下 VSCode配置cuda编译环境_code runner cuda编程 windows-程序员宅基地

文章浏览阅读1.6w次,点赞16次,收藏51次。Windows系统下,在Visual Studio 里配置CUDA环境网上已经有很多资料了,而在轻量级IDE VScode上编译CUDA的材料不是很多,本篇博文将简要介绍在Windows 系统下配置CUDA环境的方法。一、VScode插件 code-runner法在VScode里安装插件——coder-runner,在settings.json里添加(win10下的)"code-runner.executorMap": { "cu": "cd $dir; nvcc $fileN_code runner cuda编程 windows

iOS常见问题之苹果证书无法导出p12格式的文件_development 证书 无法选择 p12-程序员宅基地

文章浏览阅读1.4w次。本文介绍了苹果证书无法导出p12格式的文件的解决方法.一.打开钥匙串导出证书的默认界面,发现p12选项为灰色,无法选择.说明: 我对这种情况的证书进行测试,将直接导出.cer的证书,拷贝到其他电脑上并安装,打包项目时,提示:No valid signing identities matching the team ID "xxx" were found.在项目中,快捷键 command + ,选择_development 证书 无法选择 p12

[精品毕设]Python考务监考管理系统-程序员宅基地

文章浏览阅读19次。该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功!

UE4-(蓝图)第三十课使用动画蒙太奇_蓝图蒙太奇动画资源打点-程序员宅基地

文章浏览阅读5.6k次,点赞4次,收藏15次。一、创建蒙太奇动画1.在文件夹空白处右键创建Animation下的动画蒙太奇2.选择动画蒙太奇基于的骨骼,创建完成后命名为FppRifleFire_Montage二、编辑动画蒙太奇1.双击打开刚创建的动画蒙太奇,在编辑窗口右下角有个资源管理器,其中为所有动画,选择一个动画后拖拽到Montage栏下方空白处。(也可以放置多个片段,自己排序组合)2.设置游戏开始时 使用..._蓝图蒙太奇动画资源打点

iOS 使用AVAudio播放音乐中断处理-程序员宅基地

文章浏览阅读832次。在使用AVFoundation框架中的AVAudioPlayer播放音乐时,会出现中断的情况,比如接听电话,或者接听FaceTime,这就要通过注册通知来处理,[NSNotificationCenter defaultCenter] addobserver:self selector:@selector(handleInterruption:) name :AVAudioSess..._avaudiosession 打开其他音频不回停止播放

SSD的基础知识介绍_ssd硬件基础知识-程序员宅基地

文章浏览阅读721次。SSD测试服务器_ssd硬件基础知识

推荐文章

热门文章

相关标签