中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

XHTML部分我們已經(jīng)寫(xiě)好，下面將是我們對(duì)其表現(xiàn)的設(shè)計(jì)部分，即CSS部分。

首先我們清除一下元素默認(rèn)的邊距（內(nèi)邊距和外邊距）和設(shè)置img的默認(rèn)邊框?yàn)?：

* {
   margin:0;
   padding:0;
}

img {
   border:0;
}

我們定義下ul的樣式，包括ul的預(yù)設(shè)標(biāo)記，大小，高度，邊框：

ul {
  list-style-type:none;
  background: transparent url(/articleimg/2007/03/4514/map_flat.jpg) no-repeat 0 0;
  width:350px;
  height:250px;
  border:1px solid #000;
}

對(duì)于li的顯示方式設(shè)置內(nèi)聯(lián)（display: inline;）行布局：

ul li {
  display:inline;
}

下面是我們講解的重點(diǎn)，隱藏/顯示效果。

對(duì)li中的a元素我們?cè)O(shè)置其塊元素顯示（display: block;），讓其相對(duì)位置（position: relative;），并使鏈接不顯示下劃線。

ul li a {
  position:relative;
  display:block;
  text-decoration:none;
}

讓類選擇器為offset的span隱藏，至于怎樣隱藏文章開(kāi)頭已經(jīng)分析了：

ul li a span.offset {
  position:absolute;
  margin-top:-9000px;
  margin-left:-9000px;
}

如上已經(jīng)實(shí)現(xiàn)了內(nèi)容隱藏，現(xiàn)在我們制作考慮觸發(fā)顯示的效果：

ul li a:hover span.offset, ul li a:focus span.offset, ul li a:active span.offset {
  color: #000;
  background-image:none;
  background-color:#ffffde;
  border:1px solid #000;
  display:block;
  width:150px;
  height:auto;
  text-decoration:none;
  cursor:pointer;
}

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) CSS實(shí)例講解:地圖提示 [2] 下一頁(yè) CSS實(shí)例講解:地圖提示 [4]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論