当前位置:萝卜系统下载站 > 网页设计教程 > 详细页面

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实现圆角框 下载本实例相关素材及源码

 


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行