web前端导航条的简单实现

镇长1998

已于 2023-05-18 14:46:18 修改

阅读量1.5w

点赞数 24

分类专栏： web前端文章标签：前端 css javascript

于 2019-04-06 20:43:08 首次发布

本文链接：https://blog.csdn.net/weixin_41514525/article/details/89059989

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
		<style>
	     *{
	     	margin: 0px;
	     	padding: 0px;
	     }
	     
	     .nav{
	     	list-style:none;    /* 去除无序列表的每条记录的标识 */
	     	
	     }
	       
	     ul{
	     	width: 1000px;
	     	height: 30px;
	     	background-color: #550;
	     	overflow: hidden;
	     	margin: 50px auto;   /* 元素水平居中 */
	     } 
	     
	     li{
	     	float: left;
	     	width: 250px;
	     }
	          
	     a{
	     	text-decoration: none;
	     	color: white;
	     	font-weight: bold;
	     	padding: 5px 0;   /* 增加内边距，将li元素的高度撑起来，li元素已经设置漂浮，其高度只能通过子元素来撑起来 */
	     	text-align: center;
	     	display: block;     /* 设置成块元素之后,可以设置宽高,将漂浮的块元素li撑起来*/
	     	width: 100%;
	     }
	     
	     .nav li a:hover{
	     	background-color: deepskyblue;  /*设置整个元素的背景 */
	     	color: darkred;  /*设置的是标签内容(这里是文字)的颜色 */
	     }
		</style>
	</head>
	<body>
		<div >
			<ul class="nav">
				<li><a href="#">首页</a></li>
				<li><a href="#">新闻</a></li>
				<li><a href="#">联系</a></li>
				<li><a href="#">关于</a></li>
			</ul>
		</div>
	</body>
</html>

今天，模仿做了一个导航条，还是很有成就感的：)，今天清明假的第二天。

稳定的Chat-GPT4 服务

- 官方chat-gpt4的服务对于中国区用户来说:

网络问题+充值美金+稳定性都是一个很大的问题，自己搜索教程构建个人gpt服务, 又过于麻烦，工具本就应该简单好用，帮助大家快速进步，而上述的问题却实际成为阻碍普通人使用先进工具的障碍。

- 推荐一个好用的国内gpt镜像服务

优点: 网络稳定(稳定)、方便(微信即可登录)、同时提供官方GPT3.5和GPT4服务

- 白嫖活动: 目前优惠力度比较大，注册可以得1元，再微信分享给好友家人，帮忙微信关注下公众号就能免费用9.9元的版本（2000 GPT4 + 5万 GPT3.5）

- 专属优惠链接: chat.openai

镇长1998

关注

24
点赞
踩
103

收藏

觉得还不错? 一键收藏
1
评论
web前端导航条的简单实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>test</title> <style> *{ margin: 0px; padding: 0px; } ...
复制链接

扫一扫