7.练习-制作一个固定定位的导航栏

最新推荐文章于 2022-05-20 18:12:43 发布

二十二644

最新推荐文章于 2022-05-20 18:12:43 发布

阅读量107

点赞数

文章标签： css html elementui

本文链接：https://blog.csdn.net/qq_61783164/article/details/121926178

版权

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#mydiv01{
				width: 65px;
				height: 60px;
				background: url(img/小喇叭.png) no-repeat 4px 10px;
				background-color: #EFEFEF;/* 先写背景图，再写背景色 */
				/* 设置div中文字效果 */
				font-size: 19px;/* 字体大小 */
				font-family: "微软雅黑";/* 字体类型 */
				color: #666666;/* 字体颜色 */
				padding-top: 50px;/* 盒子模型设置内边距 */
				text-align: center;/* 设置水平居中 */
				/* 设置固定定位 */
				position: fixed;
				right: 0px;
				top: 200px;
			}
			#mydiv02{
				width: 65px;
				height: 60px;
				background:url(img/电话.png) no-repeat 12px 10px;
				background-color: #EFEFEF;
				font-size: 19px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 50px;
				text-align: center;
				position: fixed;
				right: 0px;
				top: 330px;
			}
			#mydiv03{
				width: 65px;
				height: 60px;
				background: url(img/二维码.png)no-repeat 9px 10px ;
				background-color: #EFEFEF;
				font-size: 19px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 50px;
				text-align: center;
				position: fixed;
				right: 0px;
				top: 460px;
				
			}
			#mydiv04{
				width: 65px;
				height: 120px;
				background: url(img/爱心.png)no-repeat 9px 10px;
				background-color: #EFEFEF;
				font-size: 19px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 50px;
				text-align: center;
				position: fixed;
				right: 0px;
				top: 590px;
			}
			a:hover{
				
				color: blue;
				text-decoration: none;/* 去掉下划线 */
			}
			li{
				float: left;
				margin-left: 30px;
				text-decoration: none;/* 去掉下划线 */
			}
			ul{
				list-style-type: none;/* 将无序列表前面的图标取消 */
			}
		</style>
	</head>
	<body>

		<div id="mydiv01">
			最新<br />发布
		</div>
		<div id="mydiv02">
			联系<br />客服
		</div>
		<div id="mydiv03">
			APP<br />下载
		</div>
		<div id="mydiv04">
			旅客<br />出行<br />温馨<br />提示
		</div>
		
		<ul >
			<li>
				<a href="https://www.ctrip.com/">首页</a>
			</li>
			<li>
				<a href="https://trains.ctrip.com/">火车票</a>
			</li>
			<li>
				<a href="https://g.ctrip.com/">全球购</a>
			</li>
			<li>
				<a href="https://you.ctrip.com/">攻略</a>
			</li>
		</ul>
		<br />
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
	</body>
</html>

效果展示：

二十二644

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.练习-制作一个固定定位的导航栏

代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #mydiv01{ width: 65px;
复制链接

扫一扫