第一次写静态页面
html段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bilibili</title>
<link rel="stylesheet" href="css\bilibili.css"> <!--新建css文件 添加样式-->
</head>
<body>
<div class="top">
<div class="a">
<div class="b">
<a href="#" style="float: left"><img src="images\1.jpg" alt="null" style="width: 45px; height: 38px;"></a>
<ul style="margin: 0px; padding: 0px;">
<li><a href="#">主站</a></li>
<li><a href="#">音频</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">会员</a></li>
</ul>
<ul style="margin: 0px; float: right">
<li><a href="#">消息</a></li>
<li><a href="#">动态</a></li>
<li class="tou"><a href="#" style="color: azure">投稿</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css段
html,body{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 180px;
background: url(../images/2.jpg); /*引用背景图片*/
}
.top .a{
width: 100%;
height: 38px;
background-color: rgba(255,255,255,0.5);
}
.top .a .b{
width: 1000px;
height: 38px;
background-color: rgba(255,255,255,0.5);
margin: 0 auto; /*auto 可自动调整*/
}
.top .a .b ul li{
width: 50px;
height: 38px;
float: left;
line-height: 38px; /*让表头上下居中*/
text-align: center; /*左右居中*/
list-style: none; /* 取消列表前原点 */
font-size: 13px; /*字体大小*/
font-family: 微软雅黑;
font-weight: 500; /*字体粗细*/
}
.top .a .b ul li:hover{
background-color:rgba(0,0,0,0.25);
} /*伪类 鼠标放上后发生的变化*/
.top .a .b ul li a{
text-decoration: none; /*设置下划线 none 取消*/
width: 50px; /*设置a标签大小*/
height: 38px;
display: block; /*将a转化为块级元素*/
color: #000;
}
/*a为行间元素,无高度和宽度,大小取决于行内文字大小
div为块级元素,有高度和宽度*/
.top .a .b ul li.tou{
height: 55px;
background-color: #fb7299;
border-radius: 0 0 15px 15px;
}
.top .a .b ul li.tou a{
height: 55px;
width: 50px;
display: block;
}