您的位置:首页 > 网页制作 > CSS

超酷圆形边框 div 使用 css 做法

日期:2006-12-27 09:40:31 点击: 来自: 作者:

这个CSS用来做带圆角的表格,真的是太好了。

以下是代码片段:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="robots" content="all" />
<meta name="author" content="lybykw | www.vistathink.com" />
<meta name="Copyright" content="Copyright (c) 2000-2005 www.vistathink.com" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" media="screen" />
<meta name="description" content="网页制作" />
<meta name="keywords" content="展望理想,中国网站资源,刘月波,制作,波波工作室,天翼数码,网站制作,Falsh,下载,成都,多媒体制作,asp,jsp,php,sql,mssql,mysql,酷网站,图标,音乐,mp3" />

<link rel="stylesheet" href="/css/main.css" type="text/css" media="all" />
<script type="text/javascript" src="/public/js/main.js"></script>

<style type="text/css">
<!--
body {font-size:12px;}
.round1 { border:1px solid #AFE8E1; background-color:#fff; position:relative;}
.round1 .tl,.round1 .tr,.round1 .bl,.round1 .br { width:5px; height:5px; overflow:hidden; position:absolute; background:url(http://cn.yimg.com/i/ks/060928/bgcorn.gif) no-repeat;}
.round1 .tl { left:-1px; top:-1px; _top:0;}
.round1 .tr { right:-1px; top:-1px; _top:0; background-position:-4px 0;}
.round1 .bl { left:-1px; bottom:-1px; background-position:0 -4px;}
.round1 .br { right:-1px; bottom:-1px; background-position:-4px -4px;}


.ovt ul { margin:0; padding:0; }
.ovt li {background:url(http://cn.yimg.com/i/ks/060928/br.gif) right no-repeat; height:22px; line-height:22px; list-style:none; float:left; color:#088;}
.ovt span { background:url(http://cn.yimg.com/i/ks/060928/bl.gif) left no-repeat; display:block; padding:0 1em 0 .5em;}


-->
</style>

<script language="javascript">
<!--

//-->
</script>

</head>
<body>
<br><br><br><br><br>
<div class="p100">
    <div class="round1">
        <div class="tl"></div>
        <div class="tr"></div>
        <div class="bl"></div>
        <div class="br"></div>
   <div style=" position:absolute; top:-35px; _top:-22px; left:-25px;">
            <ul class="ovt">
                <li><span><img name="" src="" width="1" height="22" align="absmiddle" />
                <img src="http://cn.yimg.com/i/ks/060928/tab_knowledge.gif" hspace="3" />知识                </span></li>
            </ul>
        </div>

  <div style="padding:10px;">通过下列链接访问参考资料,可帮助你创建引人注目的 Web 页面。<br>动态 HTML (DHTML) 对象模型参考<br></div>
 </div>
</div>

</body>
</html>

More..素材图片 Picture Navigation
CSS热门 Class Hot
CSS推荐 Class Commend
版权所有:中国网站资源 2005- 未经授权禁止复制或建立镜像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.chinaddv.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.