當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

CSS完成圓角框

CSS完成圓角框

更新時間:2023-06-11 文章作者:未知 信息來源:網絡 閱讀次數:

網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。

【實例介紹】

CSS實現圓角框

做網頁時為了美化網頁,常常把表格邊框的拐角處做成圓角,這樣可以避免直接使用表格直角的生硬,使得網頁整體更加美觀。非常好的CSS圓角邊框,讓你的網站比其他的網站更具個性元素。為了實現各種布局的演示,這里首先介紹一種圓角框的方法。這種圓角框可以靈活地作為網頁的一部分,運用在各種布局中。

【實例代碼】

<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;">         公司確立&ldquo;務實、創新、<img src="r3.jpg" width="90" height="83" hspace="5" vspace="0" align="right">規范、卓越&rdquo;為企業經營理念,始終堅持以經濟效益為中心, 以房地產為主業,積極提高核心競爭力和凝聚力,!</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>

 

 

【代碼分析】

在瀏覽器中瀏覽,效果如圖所示,圓角框可以隨著瀏覽器窗口變化而發生變化。使用css制作圓角邊框可能是網頁前端設計師們最頭痛的問題之一。圓角邊框看似簡單,但實現起來卻很不簡單,可能需要復雜的頁面結構或大量的邊角圖片,方法很多,基本思想是很類似的。

圓角框運行效果

 【素材及源碼下載】

請點擊:CSS實現圓角框 下載本實例相關素材及源碼

 


網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

亚洲嫩草影院久久精品