| 網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言,通過結(jié)合使用其他的Web技術(shù)(如:腳本語言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強大的網(wǎng)頁。因而,超級文本標(biāo)記語言是萬維網(wǎng)(Web)編程的基礎(chǔ),也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言,是因為文本中包含了所謂“超級鏈接”點。 【實例介紹】 CSS實現(xiàn)圓角框 做網(wǎng)頁時為了美化網(wǎng)頁,常常把表格邊框的拐角處做成圓角,這樣可以避免直接使用表格直角的生硬,使得網(wǎng)頁整體更加美觀。非常好的CSS圓角邊框,讓你的網(wǎng)站比其他的網(wǎng)站更具個性元素。為了實現(xiàn)各種布局的演示,這里首先介紹一種圓角框的方法。這種圓角框可以靈活地作為網(wǎng)頁的一部分,運用在各種布局中。 【實例代碼】
<html>
<head>
<style type="text/css">
body{background-color: #FFF;} div#nifty1{ margin: 0 10px;background: #9BD1FA;}
div#nifty2{ margin: 0 10px;background: #9BD1FA;}
div#nifty3{ margin: 0 10px;background: #9BD1FA;}
div#nifty4{ margin: 0 3px;background: #9BD1FA;}
div#nifty5{ margin: 0 3px;background: #9BD1FA;} b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>圓角表格</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td>
<div id="nifty1">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<div style="height:120px;">
公司確立“務(wù)實、創(chuàng)新、<img src="r3.jpg" width="90" height="83" hspace="5"
vspace="0" align="right">規(guī)范、卓越”為企業(yè)經(jīng)營理念,始終堅持以經(jīng)濟效益為中心,
以房地產(chǎn)為主業(yè),積極提高核心競爭力和凝聚力,!</div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</td> </tr>
</table>
</body>
</html>
【代碼分析】 在瀏覽器中瀏覽,效果如圖所示,圓角框可以隨著瀏覽器窗口變化而發(fā)生變化。使用css制作圓角邊框可能是網(wǎng)頁前端設(shè)計師們最頭痛的問題之一。圓角邊框看似簡單,但實現(xiàn)起來卻很不簡單,可能需要復(fù)雜的頁面結(jié)構(gòu)或大量的邊角圖片,方法很多,基本思想是很類似的。 
【素材及源碼下載】 請點擊:CSS實現(xiàn)圓角框 下載本實例相關(guān)素材及源碼
網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。 |