您的位置:首頁 > 網頁制作 > 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.patiodelivery.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.
99视频30精品视频在线观看