【CSS】CSS前期回顧（1）

在前兩天學習了“定位”、“浮動”、“背景”和“超連結”等設定，在此做一個頁面以對前幾天的知識進行總結回顧。

1、HTML的Header部分

<div id=”header”>

<h1><span>品攝影工作室</span></h1>

<ul id=”topMenu”>

<li class=”firstChild”><a href=”#”>品牌故事</a></li>

<li><a href=”#”>我的鑑證</a></li>

<li><a href=”#”>技術支援</a></li>

</ul>

<div id=”mainMenuWrapper”>

<div id=”mainMenuWrapper2″>

<ul id=”mainMenu”>

<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>

<form id=”searchBox” name=”search” method=”get” action=””>

<input type=”text” class=”textfield” name=”term” />

<button type=”submit” id=”submit” />搜尋</button>

</form>

</div>

</div>

</div>

2、連結CSS檔案

3、CSS部分

（1）對body元素整體設定

body

{

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

line-height:1.5; /*行高為文字大小的1.5倍*/

background-color:#444;

margin:0;

}

（2）設定header塊的顯示

#header

{

width:756px;

margin:0 auto;/*居中對齊*/

color:#bbb;

position:relative;/*設定相對定位的目的是為了孩子絕對定位*/

}

此時效果如下：

（3）設定標題

#header h1

{

margin:10px 0;

height:63px;

background-image:url(images/titlebg.jpg);

background-repeat:no-repeat;

}

#header h1 span

{

display:none;/*把h1中的字隱藏掉*/

}

此時效果如下：

（4）設定頂部選單

#topMenu

{

margin:0;

padding:0;

position:absolute;/*相對於父header進行絕對定位*/

right:0;

top:50px;

list-style-type:none;

}

#topMenu li

{

float:left;

border-left:1px white solid;

}

#topMenu li.firstChild

{

border:none;/*去掉頂部選單最左邊的豎條*/

}

#topMenu li a

{

padding:0 10px;

color:white;

text-decoration:none;

}

#topMenu li a:hover

{

background-color:#000;

}

此時效果如下：

（5）設定主選單

#mainMenu

{

color:000;

width:500px;

}

#mainMenu li

{

float:left;

list-style-type:none;

border-left:1px #aaa solid;

border-right:1px #eee solid;/*左邊框顏色比右邊框顏色淺的原因是使豎條產生立體感*/

background-color:#ccc;

}

#mainMenu li.firstChild

{

border-left:none;

}

#mainMenu li a

{

display:block;

padding:5px 10px;

color:#333;

text-decoration:none;

}

#mainMenu li a:hover

{

background-color:#eee;

}

此時的效果如下：

可以看出主選單的右邊還有一個比較突出的豎條，現在去掉：

I、對<li class=”lastChild”><a href=”#”>旗下品牌/a></li>增加類別選擇器

II、增加CSS樣式

#mainMenu li.lastChild

{

border-right:none;

}

效果如下：

待續….

本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261768，如需轉載請自行聯絡原作者

【CSS】CSS前期回顧（1）

相關文章