百度首页顶部栏

最新推荐文章于 2020-04-02 22:55:42 发布

镇长1998

最新推荐文章于 2020-04-02 22:55:42 发布

阅读量443

点赞数

分类专栏： web前端

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

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度一下，你就知道</title>
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">  
		<style type="text/css">   /*  link标签的作用是引入font-aewsome图标库 */
			*{
				margin: 0px;
				padding: 0px;
				color: rgb(85,85,85);
			}
			
			.nav{
				height:35px;
				background-color:white;
				font:12px/35px "微软雅黑" ;
				border-bottom: 1px rgb(235,235,235)  solid;
			}
			
			.nav *{
				display: inline-block;
			}
			
			.snav{
				float: right;
			}
			
			.snav a{
				padding-right:20px ;

			}
			
			.snav .bold {
				font-weight: bold;
				
			}
			
			.next2 a{
				padding-left: 8px;
			}
			
			.atom a{
				padding-left: 10px;
				text-decoration: none;
			}
			
			.cao {
				font-weight: bold;    /* 字体加粗 */  
				color: rgb(85,85,85);
				padding-left: 5px;
			}
			
			.atom p{
				font-weight: bold;    /* 字体加粗 */
				color: greenyellow;
				padding:0px  5px;
			}
		</style>
	</head>
	<body>
		
		<div class="nav">
			<div class="atom">
				<a href='#'>徐州：12    °C <i class="fa fa-sun-o"></i> <p>轻度</p>104 </a> /*这里导入图标*/  
			</div>
			
			<p class='cao'>|</p>
			
			<div class="next1">
				<a href="#">换肤 </a>
			</div>
			<div class="next2">
				<a href="#"> 消息</a>
			</div>
			<div class="snav">
				<a href="#" class='bold'>新闻</a>
				<a href="#" class='bold'>hao123</a>
				<a href="#" class='bold'>视频</a>
				<a href="#" class='bold'>地图</a>
				<a href="#" class='bold'>学术</a>
				<a href="#" class='bold'>贴吧</a>
				<a href="#">181******36</a>
				<a href="#">设置</a>
				<img src="img/HBuilder.png"  height="20px" />
			</div>
		</div>
		
	</body>
</html>

镇长1998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度首页顶部栏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"&g...
复制链接

扫一扫

专栏目录