小白web进阶（六）

最新推荐文章于 2022-07-31 07:36:45 发布

王子老师

最新推荐文章于 2022-07-31 07:36:45 发布

阅读量107

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_37304462/article/details/101023721

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>第三次作业</title>
	<link rel="stylesheet" type="text/css" href="第三次作业.css">
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1423581_lzhsh3ub2vo.css">
</head>
<body>
	<div class="header">
		<div class="content">
			<a href="javascript:void(0)">
				<div class="logo">
				</div>
			</a>

			<div class="menu">
				<ul>
					<li><a href="javascript:void(0)">首页</a></li>
					<li><a href="javascript:void(0)">在线课堂</a></li>
					<li><a href="javascript:void(0)">付费课堂</a></li>
					<li><a href="javascript:void(0)">搜索</a></li>					
				</ul>				
			</div> 
			<div class="login">
					<span class="iconfont icon-user"></span>
					<span> <a href="">注册/</a></span>
					<span><a href="">登录</a></span>
			</div>
		</div>
	</div>

</body>
</html>

css

.header{
	width: 100%;
	height: 69px;
	background-color: black;
}

.content{
	width: 1200px;
	height: 69px;
	background-color: black;
	margin: auto;
}

.logo{
	width: 235px;
	height: 64px;
	background-image: url(https://www.python.org/static/img/python-logo.png);
	float: left;
}

.menu li{
	list-style: none;
	float: left;
	padding:0 25px;
	line-height: 39px;

}
.menu{
	float: left;
	height: 10px;
}
.menu a{
	color: green;
	text-decoration: none;
}

.menu li:hover{
	border-bottom: 5px red solid;
	box-sizing: border-box;
}
.login {
	/*height: 69px;*/
	float: right;
	line-height: 69px;
}
.login a{
	text-decoration: none;
	color: pink;
}

.icon-user{
	color: white;
}

王子老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白web进阶（六）

<!DOCTYPE html><html><head> <title>第三次作业</title> <link rel="stylesheet" type="text/css" href="第三次作业.css"> <link rel="stylesheet" type="text/css" href="https...
复制链接

扫一扫