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

WEB2.0 圆形边框 div 使用 css 做法

日期:2007-02-12 10:27:05 点击: 来自: 作者:

本站站长原创制作方法:

以下是代码片段:

 <!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>WEB2.0 圆形边框 div 使用 css 做法</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.chinaddv.com" />
<meta name="Copyright" content="Copyright (c) 2000-2007 www.chinaddv.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">
<!--
/* WEB2.0 圆形边框 div 使用 css 做法 V1.0 for www.chinaddv.com Admin Lybykw 2007年02月09日 星期五 10:46:45*/
.wos {width:550px;margin:0px auto;}
.toelws {border:0px solid #BFD2FB;background:#F4F7FE;padding:0px;}
.toelws .te .te1,.toelws .te .te2,.toelws .bt .bt1,.toelws .bt .bt2
{width:11px;height:11px;overflow:hidden;font-size:1px;background:url("http://www.chinaddv.com/skin/chinadu_cn_060312/image/other/d0.gif") no-repeat;border:0px solid;}
.toelws .te {clear:both;}
.toelws .te .te1 {float:left;background-position:0 0;}
.toelws .te .te2 {float:right;background-position:-11px 0;}
.toelws .te .te3 {float:left;width:528px;border-top:1px solid #BFD2FB;font-size:1px;}
.toelws .bt {clear:both;}
.toelws .bt .bt1 {float:left;background-position:-0px -11px;}
.toelws .bt .bt2 {float:right;background-position:-11px -11px;}
.toelws .bt .bt3 {float:left;width:528px;border-bottom:1px solid #BFD2FB;height:10px;font-size:1px;background:#F4F7FE;}
.content {padding:15px;font:11px verdana;border-left:1px solid #BFD2FB;border-right:1px solid #BFD2FB;}

.t234 {border:0px solid red;}

-->
</style>

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

//-->
</script>

</head>
<body>

<div class="wos">
 <div class="toelws">
  <div class="te"><div class="te1"></div><div class="te3"></div><div class="te2"></div></div>
   <div class="content">
    <div class="t234">The MSDN Library What's New page contains a comprehensive list of all new and
 revised content for the July 2001 release. Continue reading this page for
 highlights of new content in the Library.<br>
 <br>
 Microsoft Office XP Developer Documentation<br>
 <br>
 This Library release contains all the information professional developers need
 to build and deploy applications and business solutions for Microsoft Office.
 Microsoft Office XP Developer provides a complete set of developer tools,
 documentation, and sample code for quickly creating custom applications with
 Office and other Microsoft Visual Basic for Applications杄nabled programs. <br>
 <br>
 MapPoint 2002<br>
 <br>
 Microsoft MapPoint 2002 brings powerful mapping and analysis features to your
 desktop. Use MapPoint 2002 to quickly find geographic locations, visually
 analyze your business data, and create, customize, and integrate maps into
 Office documents. <br>
 <br>
 Office XP Documents<br></div>


   </div>
  <div class="bt"><div class="bt1"></div><div class="bt3"></div><div class="bt2"></div></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+.