html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./a.css">
<title>我的簡(jiǎn)歷</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標(biāo)簽浮動(dòng)帶來的bug
<li><a href="">關(guān)于</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="">聯(lián)系方式</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標(biāo)簽的字體顏色繼承與祖先
text-decoration: none; //a標(biāo)簽的下劃線是無
}
.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標(biāo)簽在左邊浮動(dòng)
}
.topNavBar>nav{
float: right;
padding-top:7px;
}
.topNavBar>nav>ul{
list-style:none; //列表樣式表示無
margin:0; //默認(rèn)的margin樣式為0
padding:0; //默認(rèn)padding樣式為0
}
.topNavBar>nav>ul>li{
float:left;
margin-left:17px;
margin-right: 17px;
}
.clearfix::after{ //搭配浮動(dòng)使用消除bug逗载，謹(jǐn)記這三句代碼
content:"";
display: block;
clear: both;
}
.topNavBar>nav>ul>li>a{
font-size:12px;
color:#b7b7b7;
font-weight:bold;//字體的粗細(xì)設(shè)置成粗
text-decoration: none;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
display: block; //這句代碼為了li標(biāo)簽?zāi)馨標(biāo)簽
}
.topNavBar>nav>ul>li>a:hover{
border-bottom: 3px solid #e06567;
}
CSS知識(shí)點(diǎn)：
（1）四種引入 CSS 的方式：style 屬性哆窿、style 標(biāo)簽、css link厉斟、css import
（2）list-style：none--列表樣式設(shè)置成無
（3）background:black--背景顏色設(shè)置成黑色
（4）color:white--字體設(shè)置成白色
（5）color:inherit--字體顏色從祖先那里繼承
（6）text-decoration: none--文字的下劃線設(shè)置成無
（7）font-family:"宋體"--字體設(shè)置成宋體
（8）font-size:24px--文字大小設(shè)置成24像素
（9）font-weight:bold--字體的粗細(xì)設(shè)置成粗
（1）怎樣把列表內(nèi)容橫起來挚躯，可以用float實(shí)現(xiàn)下面效果
關(guān)于
技能 ——>關(guān)于 技能 作品 （浮動(dòng)之后效果）
作品
在需要浮動(dòng)子標(biāo)簽中加上css樣式float：left,然后在浮動(dòng)子標(biāo)簽的爸爸身上即是在HTML中添加class="clearfix"，再在css中加上下面代碼擦秽，就可以消除浮動(dòng)帶來的部分bug码荔。
.clearfix::after{
content:"";
display: block;
clear: both;
}
（2）<span></span>和<span></span>標(biāo)簽中間可能存在空格，特別要留意号涯，如果存在目胡，那么頁(yè)面的對(duì)應(yīng)內(nèi)容就會(huì)空出一部分空白內(nèi)容。兩個(gè)標(biāo)簽放在同一行上就能避免這種情況出現(xiàn)链快。
（3）移動(dòng)鼠標(biāo)到子元素上產(chǎn)生hover效果
.topNavBar>nav>ul>li>a:hover{
border-bottom: 3px solid #e06567;
}
