Skip to content

Commit

Permalink
CSS网站元素设计 -- 横向导航的实现
Browse files Browse the repository at this point in the history
  • Loading branch information
shuailong committed Aug 22, 2016
1 parent 92d92d3 commit 71d2fdc
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 0 deletions.
32 changes: 32 additions & 0 deletions css/fourth.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@charset "utf-8";
/* CSS Document */

/* 横向导航 */
#nav{
height:26px;
border-bottom:2px solid #2788da;
}
#nav li{
list-style-type:none;
float:left;
font-weight:bold;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#ececec;
margin-left:2px;
}
#nav li a:hover{
background-color:#bbbbbb;
color:#ffffff;
}
#nav li a#current{
background-color:#2788da;
color:#ffffff;
}
19 changes: 19 additions & 0 deletions fourth.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rev="stylesheet" rel="stylesheet" href="css/fourth.css" type="text/css" />
<title>CSS网站元素设计</title>
</head>

<body>
<ul id="nav">
<li><a href="#" id="current">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">参 考</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">联 系</a></li>
</ul>
</body>
</html>

0 comments on commit 71d2fdc

Please sign in to comment.