凜冬之翼---css選擇器基礎
阿新 • • 發佈：2018-11-13
設計一個很簡單的導航欄，沒有想象得那麼難。總體上css和html寫程式碼沒有演算法那麼複雜和用腦但是還是要花很多時間去了解原理。
html程式碼：
<!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 css程式碼：
@charset "utf-8";
/* CSS Document */
.menu{
padding:0 0 0 32px;
margin:0;
list-style:none;
height:40px;
background:#fff url(button1a.gif)
repeat-x;
position:relative;
font-family:arial,verdana,sans-serif;
margin-top:50px;
}
.menu li.top{
float:left;
}
.menu li a.top_link{
display:block;
float:left;
height 40px;
line-height:33px;
color:#bbb;
text-decoration:none;
font-size:11px;
font-weight:blod;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span{
float:left;
font-weight:bold;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menu li a.top_link:hover{
color:#000;
background:url(button4.gif) no-repeat;
}
.menu li a.top_link:hover span{
background:url(button4.gif) no-repeat right top;
}
效果圖：
