網站頭部導航
阿新 • • 發佈：2018-05-27
TP -h -a ID :link splay 垂直 就會 代碼
為了實現上面這個效果，完整版代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
height: 50px;
border: 1px solid red;
margin: 100px auto;
}
.nav ul{
/*去掉小圓點*/
list-style: none;
}
.nav ul li{
float: left;
width: 120px;
height: 50px;
/*讓內容水平居中*/
text-align: center;
/*讓行高等於nav的高度，就可以保證內容垂直居中*/
line-height: 50px;
}
.nav ul li a{
display: block;
width: 120px;
height: 50px;
}
/*兩個偽類的屬性，可以用逗號隔開*/
.nav ul li a:link , .nav ul li a:visited{
text-decoration: none;
background-color: purple;
color:white;
}
.nav