网页的本质就是超级文本标记语言,通过结合使用其他的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;">
公司确立“务实、创新、<img src="r3.jpg" width="90" height="83" hspace="5"
vspace="0" align="right">规范、卓越”为企业经营理念,始终坚持以经济效益为中心,
以房地产为主业,积极提高核心竞争力和凝聚力,!</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实现圆角框 下载本实例相关素材及源码
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |