欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

div+css打造可變高寬的圓角框

  發(fā)布時間：2011-07-10 21:59:47   作者：佚名   我要評論
矩形框在網(wǎng)頁中較為常見，不過個人覺得還是圓角框更為美觀。那么圓角框是如何用DIV+CSS來實現(xiàn)的呢？
假如把一張圓角框圖片直接作為背景來處理，那么高寬就都被定死了，無法隨內容而改變大小。今天，我學會了一種方法來設計可變高寬的圓角框。先來看看效果圖：

　　為了達到可變高寬的效果，首先應將圖片分割成五塊。如下圖：


為什么這么分割？為什么圖片1需要切成這么大呢？這樣就能實現(xiàn)可變高寬了？這些問題不急于回答，我們不妨先來閱讀下源碼。

復制代碼
代碼如下:

<div id="m_category" class="round2">
<h3>管理中心</h3>
<div class="con">
<p><a href="Categorymanager.aspx">類別管理</a></p>
<p><a href="Newsmanager">新聞管理</a></p>
<p><a href="Addnews">添加新聞</a></p>
</div>
<div class="footer">
<p> </p>
</div>
</div>

css

復制代碼
代碼如下:

*
{
padding:0;
margin:0;
}
body
{
font-size:14px;
}
a:link, a:visited
{
color: #000;
text-decoration: none;
}
a:hover
{
color: #00f;
text-decoration: underline;
}
#m_category
{
width:200px;
}
#m_category .con p
{
padding:10px;
}
.round2
{
background-image:url("../images/round2_left_top.gif");
background-position:top left;
background-repeat:no-repeat;
}
.round2 h3
{
background:url("../images/round2_right_top.gif") no-repeat top right;
padding-left:35px;
padding-top:12px;
padding-bottom:12px;
font-size:16px;
font-weight:bold;
}
.round2 .con
{
height:200px;
padding:0 20px;
background:url("../images/round2_right_middle.gif") repeat-y top right;
}
.round2 .footer
{
background:url("../images/round2_left_bottom.gif") no-repeat bottom left;
}
.round2 .footer p
{
background:url("../images/round2_right_bottom.gif") no-repeat bottom right;
}

從上述代碼中可以看到，round2將圖片1作為了背景，h3標簽將圖片2作為了背景，con將圖片3作為了背景，foote中的p標簽將圖片4作為了背景，footer將標簽5作為了背景。我們先從最底下的那層開始講起。當round2中的內容不足以填滿第1個圖片時，那么只顯示圖片1的部分。此時，將圖片5疊加到圖片1上。這樣就達到了控制高度的目的?？刂茖挾绕鋵嵰彩峭粋€原理。我們通過h3標簽和p標簽將圖片2和圖片4疊加到圖片1和圖片5上，這樣就實現(xiàn)了可變寬度。剩下的只要讓con中的圖片3沿y軸平鋪下來，那么整個圓角框的結構就形成了。

　　這種通過將圓角框分割成5個圖片來控制高寬的方法，雖然達到了可變高寬的目的，但是缺點很明顯，就是圖片1需要切的比較大。有沒有更好的方法呢？網(wǎng)上我看到了一種不需要背景圖片來實現(xiàn)可變高寬圓角框的方法。

相關文章

最新評論