浮动案例:头部通栏小练习
注:
1、宽为通栏,不需要设置
2、高为50px,背景颜色深灰色
3、字体大小14px,字体颜色:白色(#fff),字体间距适量调整
4、鼠标悬停颜色:粉色(pink)
代码步骤1:
在head插入css外链样式表:
<link rel="stylesheet" href="./浮动小练习.css">
body写好文本样式
<body>
<div class="header">
<div class="w">
<!-- ul>li*5>a[href=#] -->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">用户</a></li>
<li><a href="#">官网</a></li>
<li><a href="#">联系电话</a></li>
<li><a href="#">帮助</a></li>
</ul>
</div>
</div>
</body>
代码步骤2:
css外链样式表:写好css初始化样式表
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
a:hover {
color: pink;
}
.w {
width: 1200px;
margin: 0 auto;
}
代码步骤3:
head写入样式:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./浮动小练习.css">
<style>
.header {
height: 50px;
background-color: rgb(23, 23, 23);
}
.header ul {
float: right;
}
.header li {
float: left;
line-height: 50px;
padding-left: 30px;
}
</style>
</head>