简洁的导航栏

最新推荐文章于 2024-03-18 18:05:55 发布

时夜

最新推荐文章于 2024-03-18 18:05:55 发布

阅读量398

点赞数 2

分类专栏： html+css+js

本文链接：https://blog.csdn.net/qq_37174835/article/details/100039215

版权

html+css+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

导航栏-html+css
学了一丢丢html+css后就自己做了个导航栏，记录一下下
＠(￣-￣)＠
看起来简洁，但代码好像很啰嗦emm
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>start_html</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/*导航栏*/
			.div1{
				height: 50px;
				/*--background-image: url("63190571_we0.png");*/
				background-color: #333;
				position: fixed;
				width: 100%;
			}
			/*头像框*/
			.tx{
				background-image: url("tx.jpg");
				background-size: 100%,100%;
				float: left;
				height: 50px;
				width: 50px;
				border-radius: 50px;
				margin-left: 20px;
			}
			.name{
				font-size: 25px;
				font-family: "微软雅黑";
				font-weight: bold;
				color: #66CCFF;
				text-align: center;
				line-height: 50px;
				float: left;
				width: 80px;
				
			}
			.ui1{
				text-align: center;
				padding-right: 80px;
			}
			li{
				float: right;
				list-style: none;
				display: inline-block;
				height: 50px;
				padding-right: 35px;
			}
			a{
				text-decoration: none;
				font-family: "微软雅黑";
				font-weight: bold;
				line-height: 50px;
				color: #fff;
			}
			.aa{
				color: #66CCFF;
			}
		</style>
	</head>
	<body>
		<div id="" class="div1">
			<div class="tx">
			</div>
			<div class="name">
				时 夜
				<!--名字-->
			</div>
			<ul class = "ui1">
				<li><a href="#">关于</a></li>
				<li><a href="#">友链</a></li>
				<li><a href="#">博客</a></li>
				<li><a href="#" class="aa">首页</a></li>
			</ul>
		</div>
		
	</body>
</html>

时夜

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
简洁的导航栏

导航栏-html+css学了一丢丢html+css后就自己做了个导航栏，记录一下下＠(￣-￣)＠看起来简洁，但代码好像很啰嗦emm代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>start_html</title> <...
复制链接

扫一扫

专栏目录