html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./a.css">
<title>我的简历</title>
</head>
<body>
<div class="topNavBar clearfix">
<a class="logo" href="#" alt="logo">
<span class="rs">RS</span><span class="card">card</span>
</a>
<nav>
<ul class="clearfix"> //在HTML加clearfix是为了消除下列a标签浮动带来的bug
<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>
<li><a href="">联系方式</a></li>
<li><a href="">其他</a></li>
</ul>
</nav>
</div>
</body>
</html>
css代码：
body{
background:black;//背景颜色是黑色
color:white; //字体是白色
margin:0;//body的margin样式是0
}
a{
color:inherit; //a标签的字体颜色继承与祖先
text-decoration: none; //a标签的下划线是无
}
.topNavBar{
padding:20px 16px 20px 16px;
}
.topNavBar .logo{
font-family:"Arial Black"; //字体是"Arial Black"字体
font-size:24px;//文字大小是24像素
padding-top: 3px;
padding-bottom: 4px;
}
.topNavBar .logo .rs{
color: #e6686a;
margin-right: 4px;
}
.topNavBar .logo .card{
color: #9A9DA2;
}
.topNavBar>a{
float: left; //topNavBar中所有的a标签在左边浮动
}
.topNavBar>nav{
float: right;
padding-top:7px;
}
.topNavBar>nav>ul{
list-style:none; //列表样式表示无
margin:0; //默认的margin样式为0
padding:0; //默认padding样式为0
}
.topNavBar>nav>ul>li{
float:left;
margin-left:17px;
margin-right: 17px;
}
.clearfix::after{ //搭配浮动使用消除bug，谨记这三句代码
content:"";
display: block;
clear: both;
}
.topNavBar>nav>ul>li>a{
font-size:12px;
color:#b7b7b7;
font-weight:bold;//字体的粗细设置成粗
text-decoration: none;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
display: block; //这句代码为了li标签能包住a标签
}
.topNavBar>nav>ul>li>a:hover{
border-bottom: 3px solid #e06567;
}
导航栏效果图
CSS知识点：
（1）四种引入 CSS 的方式：style 属性、style 标签、css link、css import
（2）list-style：none--列表样式设置成无
（3）background:black--背景颜色设置成黑色
（4）color:white--字体设置成白色
（5）color:inherit--字体颜色从祖先那里继承
（6）text-decoration: none--文字的下划线设置成无
（7）font-family:"宋体"--字体设置成宋体
（8）font-size:24px--文字大小设置成24像素
（9）font-weight:bold--字体的粗细设置成粗
（1）怎样把列表内容横起来，可以用float实现下面效果
关于
技能 ——>关于 技能 作品 （浮动之后效果）
作品
在需要浮动子标签中加上css样式float：left,然后在浮动子标签的爸爸身上即是在HTML中添加class="clearfix"，再在css中加上下面代码，就可以消除浮动带来的部分bug。
.clearfix::after{
content:"";
display: block;
clear: both;
}
（2）<span></span>和<span></span>标签中间可能存在空格，特别要留意，如果存在，那么页面的对应内容就会空出一部分空白内容。两个标签放在同一行上就能避免这种情况出现。
（3）移动鼠标到子元素上产生hover效果
.topNavBar>nav>ul>li>a:hover{
border-bottom: 3px solid #e06567;
}
hover前的效果
hover后效果
网友评论