當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

html盒子全部蓝色,彻底弄懂CSS盒子模式之五

發布時間：2023/12/10 CSS 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 html盒子全部蓝色,彻底弄懂CSS盒子模式之五小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

三、分析實現方法

1．從上面的截圖可以看到有一標題，標題下面是一個列表，所以很容易想到用標簽和無序列表

來做結構，標題是一塊有背景的矩形塊，文字白色，文字在矩形塊中居中對齊，所以給標簽加個寬度控制，最后為了讓文本看起來在垂直方向上居中，再加個上邊填充，所以用到下面樣式：

h3 {

color: #FFF;

background-color: #F90;

width: 100px;

padding-top:3px;

text-align:center;

}

2．下面是一個

區塊，我讓它有一個上線框，這樣與標題吻合在一起就做出了標題效果，而
- 里面的
- 要有一條下劃線，以形成一種分行效果，于是用到下邊框，這里用到下面樣式：
  ul {
  width: 300px;
  border-top: 1px solid #F60;/*使其上邊有一線條，與標題h3吻合*/
  }
  ul li {
  padding:5px;
  border-bottom: 1px solid #CCC;
  list-style:none;/*去除列表樣式，這對于標準瀏覽器很重要*/
  }
  3．列表中的鏈接文字點擊效果就很簡單了，大家自己看代碼就行了，注意一點就是用到了下列一條樣式：
  a {
  position: relative;/*設置其定位方法為相對定位，等一下內部信息面板就可以相對它定位*/
  display:block;/*讓鏈接以塊狀呈現，這樣不用點中鏈接文字就可以響應鏈接*/
  }
  4．組織信息面板布局(實現的顯示與隱藏效果放在后面再說)。信息面板為一個有淺藍色背景和較深藍色邊框，并且有5px填充的盒子，盒子左邊安排一幅圖片，圖片大小用CSS控制，圖片右邊為一個有清晰數據結構列表，為了不出現與前邊父級
- 的重復使用(不然等一下CSS樣式控制會較麻煩，因為內部的
- 會繼承父級的樣式，除非你又要新定義一則樣式來逐一清除父級帶給它的樣式)，所以我用到
  結構，只設定
  a:hover div {
  position: absolute;
  padding:5px;
  display:block;
  width: 245px;/*只給出寬度，高讓它隨內容多少自動調整*/
  left:150px;/*這是相對父級A的定位*/
  top: 20px;
  border: 1px solid rgb(91,185,233);
  background-color: rgb(228,246,255);
  z-index:999;/*把信息面板提到一個較高的位置，使鏈接文字過長時不會與面板重疊,但這只對FF有效*/
  }
  a img {
  width:80px;
  height:80px;
  border:none;/*去除圖片邊框，默認情況下，鏈接內的圖片在標準瀏覽器會出現邊框*/
  display:block;
  position: absolute;/*用絕對定位抽離正常文本流，不然在設計的時候考慮到不同瀏覽器正常顯示會更麻煩*/
  top:5px;/*這里的5px是與信息面板大盒子的填充一樣的*/
  left:5px;
  }
  dl {
  width: 160px;
  float:right;
  color: #999;
  line-height:20px;
  }
  dl dd span {
  font-weight: bold;
  color: #639;
  }
  5．實現隱藏與顯示效果。這個隱藏顯示效果是由鼠標觸發的，所以要自然想到鏈接A(因為現在我們是用CSS實現，你不要想到用javascript)，并且要把信息面板安排在內，因為到時就可以用CSS類型選擇符配合樣式的a:hover偽類控制其顯示和隱藏了。另外一個很重要的問題是IE7以下版本有個A狀態偽類BUG，這個BUG使你本來看似沒有問題的CSS設置在IE中之前被隱藏的面板無法顯示出來，這里用到一個常用的方法，加一條樣式：a:hover {background:#fff;}以消除存在問題。
  (1)讓信息面板初始狀態隱藏，用到樣式：
  a div {
  display: none;/*初始化信息面板不顯示*/
  }
  (2)顯示面板，用到樣式：
  a:hover div {
  position: absolute;
  padding:5px;
  display:block;
  width: 245px;/*只給出寬度，高讓它隨內容多少自動調整*/
  left:150px;/*這是相對父級A的定位*/
  top: 20px;
  border: 1px solid rgb(91,185,233);
  background-color: rgb(228,246,255);
  z-index:999;/*把信息面板提到一個較高的位置，使鏈接文字過長時不會與面板重疊,但這只對FF有效*/
  }
  四、收尾工作
  最后整合一下樣式和結構代碼就完成了此實例的制作。最后再作一下設計思路擴展指引：像此類隱藏顯示的CSS控制設計還可以用到邊界的方法，即初始狀態用一個很大的margin負值把對象移出可視區域，鼠標響應時再重新定位對象回到正常該出現的位置。另外相信你看完本教程后，自己喜歡的漂亮鏈接提示面板自己可以做出來了。
  出處：藍色理想
  責任編輯：moby
  ◎進入論壇網頁制作、網站綜合版塊參加討論

總結

以上是生活随笔為你收集整理的html盒子全部蓝色,彻底弄懂CSS盒子模式之五的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。