2020国产成人精品视频,性做久久久久久久久,亚洲国产成人久久综合一区,亚洲影院天堂中文av色

搜索
分享

CSS布局實(shí)例：僅一張圖片實(shí)現(xiàn)圓角！ - 勁歌金曲 - 網(wǎng)易博客

 playfish 2008-01-31

CSS布局實(shí)例：僅一張圖片實(shí)現(xiàn)圓角！

　  這個(gè)代碼是UDSKY推薦給我的一段用圖片版的圓角代碼，于是分析代碼寫(xiě)個(gè)教程，這段代碼最大的優(yōu)點(diǎn)是：只使用了一張圖片，代碼簡(jiǎn)單，很容易上手．不足之處在于做這種圓角BOX所在的背景區(qū)為單一色！還是直入正題吧！

　　準(zhǔn)備一張圖片（我們要使用的那張背景圖，四個(gè)角都是這張背景圖四個(gè)部位顯示出來(lái)的）．最初學(xué)習(xí)圓角時(shí)，我承想過(guò)用一張四分之一的圓，然后背景圖旋轉(zhuǎn)／翻轉(zhuǎn)不就可以用以用在四個(gè)角上了吧，但是CSS中沒(méi)有這種功能，只好放棄這種不實(shí)際的想法！


圓角部分放大圖：


HTML代碼：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<DIV class=cssbox>
<DIV class=cssbox_head>
<H2>標(biāo)題</H2>
</DIV>
<DIV class=cssbox_body>
<P>內(nèi)容</P>
</DIV>
</DIV>

　　思路：盒子cssbox內(nèi)放入兩個(gè)box，上部分box做成兩個(gè)角（cssbox_head右角，H2左角），下部分box也做一個(gè)角的背景圖（左角）．cssbox_body內(nèi)一個(gè)右下角．


第一步：
　　這一步是最簡(jiǎn)單的，在一個(gè)盒子中定義一個(gè)右下角的背景圖片．
　　CSS代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
*{
 padding:0;
 margin:0;
}/*與本教程無(wú)關(guān)的代碼*/
.cssbox{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;/*與本教程無(wú)關(guān)的代碼*/
}

　　瀏覽器中看到的效果見(jiàn)下圖：


　　執(zhí)行代碼：
div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標(biāo)題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運(yùn)行查看效果 ]

第二步
　　我們定義右上角的樣式，這一步也不難做到，因?yàn)槎x背景圖定義在右上，背景圖圓角外部分又不是透明，而是白色，所以白色區(qū)蓋住cssbox_body的綠色部分．
　　CSS代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;
}
.cssbox_head{
 background-;right;
}

　　瀏覽器中看到的效果見(jiàn)下圖：


div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd">
<HTML 
xmlns="http://www./1999/xhtml">
<HEAD>
<TITLE>Untitled Document</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>
{
    padding:0;
    margin:0;
}
.cssbox,.cssbox_head{ 
    background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
    background-;right;
    width:380px;
    margin:20px auto;
}
.cssbox_head{
    background-;right;
}

</STYLE>
<META content="MSHTML 6.00.2900.2995" name=GENERATOR>
</HEAD>
<BODY>
<DIV class=cssbox>
  <DIV class=cssbox_head>
    <H2>標(biāo)題</H2>
  </DIV>
  <DIV class=cssbox_body>
    <P>內(nèi)容</P>
  </DIV>
</DIV>
</BODY>
</HTML>

第三步
　　經(jīng)過(guò)以上的兩步我們已經(jīng)做了出兩個(gè)角了，在接著做第三個(gè)角，定義在H2中也就是左上角．為了美觀一些，我們?cè)贖2中加入補(bǔ)白10PX,
　　CSS代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;
}
.cssbox_head{
 background-;right;
}
.cssbox_head h2{ 
 background-;left;
 margin:0;
 padding:10px; 
}

　　執(zhí)行代碼：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox,.cssbox_head,.cssbox_head h2{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } .cssbox_head{ background- right; } .cssbox_head h2{ background- left; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標(biāo)題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運(yùn)行查看效果 ]



　　疑點(diǎn)：奇怪了，為什么實(shí)際上并不是我們想要的效果？我們?cè)诳匆幌聠?wèn)題出在哪，應(yīng)該是我們定義的第三個(gè)角的背景圖蓋住了右上cssbox_head中的角，解決的方法有兩種：
　　第一種：H2可以加一個(gè)右邊界這樣H2的背景就不會(huì)在蓋住cssbox_head的的那個(gè)角了；
　　第二種：反向思維，cssbox_head中加入一個(gè)右補(bǔ)白，這樣H2中的背景圖也不會(huì)蓋住cssbox_head中的角；
　　這里我們選用第二種方法．

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
.cssbox_head{
 background-;right;
 padding-right:10px;
}
.cssbox_head h2{ 
 background-;left;
 padding:10px 0 10px 10px; 
}

　　執(zhí)行代碼：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox,.cssbox_head,.cssbox_head h2{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } .cssbox_head{ background- right; } .cssbox_head h2{ background- left; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標(biāo)題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運(yùn)行查看效果 ]


第四步
　　這一步和第三步很相似，這里就不會(huì)在犯錯(cuò)誤了，根據(jù)實(shí)際情況只能選用第一種方法．
　　css代碼

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
*{
 padding:0;
 margin:0;
}
.cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{ 
 background: transparent url(http://www./attachments/month_0706/img.png) no-repeat;
}
.cssbox{
 background-;right;
 width:380px;
 margin:20px auto;
}
.cssbox_head{
 background-;right;
 padding-right:10px;
}
.cssbox_head h2{ 
 background-;left;
 padding:10px 0 10px 10px; 
}
.cssbox_body{ 
 background-;left; 
 margin-right:10px; /* interior-padding right */ 
 padding:0px 0 10px 10px;
}

　　完整的代碼：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www./1999/xhtml"> <HEAD> <TITLE>Untitled Document</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <STYLE type=text/css> } .cssbox,.cssbox_head,.cssbox_head h2,.cssbox_body{ background: transparent url(http://www./attachments/month_0706/img.png) no-repeat; } .cssbox{ background- right; } .cssbox_head{ background- right; } .cssbox_head h2{ background- left; } .cssbox_body{ background- left; } </STYLE> <META content="MSHTML 6.00.2900.2995" </HEAD> <BODY> <DIV <DIV <H2>標(biāo)題</H2> </DIV> <DIV <P>內(nèi)容</P> </DIV> </DIV> </BODY> </HTML>
    [ 可先修改部分代碼 再運(yùn)行查看效果 ]

最終效果圖



　　終于完成我們的＂大作＂了！從上面我們可以看出，定義這種效果的樣式是先從父元素到子元素定義的，也就是從外層向內(nèi)層定義，這是因?yàn)椋绞莾?nèi)層的的圖／背景，它在顯示時(shí)確是在外層的．
　　在內(nèi)容區(qū)如果P或其它元素有邊界的情況下會(huì)出現(xiàn)邊界疊加現(xiàn)象，在這里只要給cssbox_body加入一個(gè)1PX下補(bǔ)白就可以解決這種問(wèn)題的發(fā)生，關(guān)于邊界疊加見(jiàn)網(wǎng)站中＜邊界疊加＞這篇文章．

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶(hù) 評(píng)論公約

    類(lèi)似文章 更多