css做导航
? css3
1.css用在導航的制作上:
? ?
? <style>
? *{margin:0px; padding:0px;}? //最低級別的修飾
? #heater{width:980px; height:100px; color:#099; margin:0px auto;?? background-? color:#0CF; margin-bottom:15px;} //頭部居中 下方留縫隙15個像素。
? #nav{margin:0 auto; width:980px; font-size:14px; font-? weight:bold;}? //導航條 ?
? #nav li{list-style:none; float:left; width:77px; height:30px;?? text-? align:center; margin-right:5px; line-height:30px;}? //文字兩個方向居中
? #nav li a{background:url(images/bg1.gif) no-repeat 0 -50px;?? display:block;?? text-decoration:none;} ?
? #nav li a:hover{ background:url(images/bg1.gif) no-repeat -200px -50px;?? color:#0F0;}
? </style>
? </head>
? <body>
? <div id="heater">top</div>
? <div id="nav">
? <ul>
????? <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>
????? <li><a href="#">兒童圖書</a></li>
? </ul>
? </div>
? </body>
2.超鏈接：
?? 超鏈接的四種狀態：? 可以改變的屬性（顏色，大小，下劃線等）
?? 這四個稱為偽類類型.
??? a：link未訪問狀態
??? a:visited已訪問狀態
??? a:hover鼠標移上狀態
??? a;active激活選定狀態
??? 順序不能亂? 中間任意一個或兩個不寫
3.樣式優先級（從低到高）
?? 各類樣式有繼承
各類樣式的優先級
?
?瀏覽器默認設置?? 外部樣式表文件
? ?
內部樣式表
?
?行內樣式表
?
?標簽選擇器?? 類選擇器
?
?? ID選擇器
4css符號總結
-------------------------------------------------------------------------------------------------------------------------------------
???? ?? | 符號??????? 中文????????????????? 示例????????????????????????????????????? 含義????????????????????????????????????????????? |????????? ------|-------------------------------------------------------------------------------------------------------------------------------|
? 基 ? |???????????? 空格????????????????? div ul{list-style：none;}????????????? <div>內的<ul>元素樣式??????????????????????????????? |
???? ?? |??????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? ? ? ? ?? ? |
? 本? |? ，???????? 逗號????????????????? div，ul{text-align：center;}?????????? <div>和<ul>元素采用相同的樣式??????????????????????? |
???? ? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
? 符? |? #????????? id標示符????????????? #nav{width：100%;}???????????????????? id為“nav”的樣式??????????????????????????????????? |
?????? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
? 號? |? .????????? 類標示符????????????? .p{ color:#33f;}?????????????????????? 類名為p的元素樣式??????????????????????????????????? |
?????? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
?????? |? :????????? 冒號????????????????? a:link{#ff0;}????????????????????????? <a>標簽的link偽類樣式??????????????????????????????? |
?????? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
? ____|_______________________________________________________________________________________________________________________________|
? 組? |? li.??????? 標簽+類??????????????? li.pic{width:29px;}?????????????????? 類名為pic的<li>標簽樣式????????????????????????????? |
????? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
????? |? div#?????? 標簽+id??????????????? div#nav{text-align：center;}????????? id為“nav”的<div>標簽樣式?????????????????????????? |
????? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
????? |? # .??????? id+空格+類?????????? #nav.pic{border：1px；}???????????????? id為“nav”元素內的pic類樣式???????????????????????? |
????? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
????? |? # .,?????? id+空格+類+逗號????? #nav .pic，#nav.text{height：26px;}???? id為“nav”元素內的pic和text類，都采用相同的樣式???? |
? 合 |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
----|-------------------------------------------------------------------------------------------------------------------------------|
?? ?? |?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????? |
? -------------------------------------------------------------------------------------------------------------------------------------
轉載于:https://www.cnblogs.com/danwuxin/p/3655364.html
總結
- 上一篇： Ajax(异步请求)和传统(同步请求)区
- 下一篇： TurboLinux11system»a