站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:站長之家 >> 網站技術 >>



站長之家提供使用DIV+CSS實現的圓角盒子的實例


【發布人:站長之家    發布日期:2015-03-26】

站長們在做網站界面的編碼時,有時候為讓界面更加美觀,需要使用一些DIV+CSS的特效技術。使用DIV+CSS技術實現圓角盒子的技巧,可以提升網頁界面的美觀度。在這里,站長之家測試并提供了使用純DIV+CSS代碼編寫的實現圓角盒子的實例,在下面展示出來,供廣大站長們參考。本實例代碼已經在IE瀏覽器、Chrome瀏覽器和360安全瀏覽器上測試通過,可以放心使用。關于代碼中的核心部分,就是一些css類的定義,各位可以根據實例代碼的功能,修改相關的參數,從而實現其他樣式的DIV。

下面就將DIV+CSS實現圓角盒子的實例代碼展示在下面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS實現的圓角盒子的實例代碼</title>
<style type="text/css">

.b_top, .b_bottom {display:block; background:transparent; font-size:1px; width:402px;}
.b1, .b2, .b3, .b4 {display:block; overflow:hidden;}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {background:#EEE; border-left:1px solid #000; border-right:1px solid #000;}
.b1 {margin:0 5px; background:#000;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}

.divclass{display:block; background:#EEE; border:0 solid #000; border-width:0 1px; width:400px; height:150px; line-height:150px; text-align:center; font-size:12px;}

</style>
</head>
<body>

<b class="b_top">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
</b>

<div class="divclass">
站長之家(www.hdfwko.tw)是一個站長們相互交流和學習的平臺!
</div>

<b class="b_bottom">
<b class="b4"></b>
<b class="b3"></b>
<b class="b2"></b>
<b class="b1"></b>
</b>

</body>
</html>

下面的圖片是本實例代碼執行的結果圖示,各位站長們可以結合圖片來更好地理解實例代碼。

div+css實現的圓角盒子圖片



(本頁地址為:http://www.hdfwko.tw/tech/tech-6.html,請尊重別人勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家-站長網【www.hdfwko.tw】

四川快乐12开奖号