使用DIV+CSS无图片实现圆角效果,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WEB2.0 圆形边框 div 使用 css 做法</title>
<style type="text/css">
<!--
.wos {width:550px;margin:0px auto;}
.toelws {border:0px solid #BFD2FB;background:#F4F7FE;padding:0px;margin:0px auto;}
.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;}
.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;}
-->
</style>
</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">
<p>测试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>
VBA Language Reference<br>
<br>
For developers who are building solutions with Microsoft Office XP, the VBA
Language Reference is a valuable tool. See Microsoft Access Visual Basic
Reference, the first in the list of these important language elements. <br>
<br>
New Embedded Documentation<br>
<br>
Also found in the July 2001 release of the MSDN Library is Embedded Developer
documentation for SQL Server 2000 Windows CE Edition, Windows CE for Automotive,
Target Designer Help and Component Designer Help for Windows NT Embedded 4.0.
<br>
<br>
New SDK Documentation<br>
<br>
</p>
</div>
<div class="bt"><div class="bt1"></div><div class="bt3"></div><div class="bt2"></div></div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
div+css无图片实现圆角矩形(兼容Firefox)
总结起来,使用图片实现圆角矩形虽然在某些方面不如CSS3代码实现的方便,但它在跨浏览器兼容性方面具有独特的优势。特别是针对那些老旧浏览器或者需要精细控制圆角位置和样式的场景,使用图片来实现圆角矩形仍旧是一...
本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先,`div`是HTML中的一个块级元素,它可以被用作容器,用于组织页面内容。在创建导航菜单时,`div`可以用来包裹整个菜单或者单独的菜单项。例如...
在网页设计中,"div+css 可伸缩的圆角"是一个常见的需求,它涉及到CSS3中的边框半径属性,以及如何构建响应式的布局。让我们深入探讨这个主题。 首先,`div`是HTML中的一种块级元素,通常用于组织页面结构。`div`...
CSS3是当前广泛使用的版本,引入了更多样式效果,如阴影、圆角、动画和过渡。 3. **XHTML (Extensible HyperText Markup Language)**:XHTML是HTML和XML的结合体,它结合了HTML的易用性和XML的严谨性,强制执行更...
在这个特定的案例"div+css呈现圆角层示例"中,我们将探讨如何利用CSS技术创建具有圆角边框的`div`层,而无需依赖背景图片。这种技术对于提升网页的可读性和美观性至关重要,因为它可以减少HTTP请求,提高页面加载...
比如,使用圆角边框、渐变背景和悬停效果可以使按钮看起来更生动。 4. **表单验证**:在登录模版中,表单验证是必不可少的功能。利用CSS和JavaScript,可以实现客户端的实时验证,如检查用户名和密码是否为空,密码...
DIV+CSS实现圆角,无需图片,兼容性好。
本教程将详细讲解如何使用`div+css`来实现一个兼容多浏览器的美化版`select`效果。 首先,我们需要创建一个`div`元素作为`select`的替代品,这将作为我们自定义样式的容器。通过设置`position`属性为`relative`,...
"DIV+CSS实现圆角"是这个主题的核心,它涉及到CSS3中的一些关键属性,如`border-radius`,用于创建非矩形的、具有圆角边框的元素。接下来,我们将深入探讨这个知识点。 首先,`<div>`是HTML中的一个块级元素,常...
除了VML,还可以使用CSS精灵图或者JavaScript库(如jQuery UI)来实现IE的圆角效果。但是,这些方法可能会增加页面加载时间和复杂性,因此在可能的情况下,建议优先考虑更新用户的浏览器或提供一个没有圆角但功能...
在早期的CSS版本中,实现圆角边框需要使用图片或者JavaScript,但随着CSS3的引入,这一过程变得更加简洁。 首先,我们来看CSS3中的`border-radius`属性,这是实现圆角边框的关键。`border-radius`允许开发者为每个...
例如,可以使用`box-shadow`属性来添加阴影效果,`border-radius`来实现圆角,以及`transform`属性中的`rotateZ`和`translateZ`来创建3D旋转效果。通过调整这些属性的值,我们可以定制各种风格的3D按钮,满足不同...
"div+css"是一种常见的网页布局技术,通过使用HTML的div元素配合CSS(层叠样式表)来实现页面的结构与样式的分离,从而提高网页的可维护性和易读性。本篇内容将详细探讨如何利用div+css制作实用且美观的分页页码。 ...
DivCSS则通常指使用Div元素配合CSS进行布局和样式设计。H5模板通常包含预设的HTML5结构和CSS3样式,方便开发者快速构建网页。CSS3学习则涉及对CSS3新特性的理解和实践,如选择器、布局、动画等。 在...
- Tab的样式可以多样化,包括扁平化设计、3D效果、圆角、渐变色、图标组合等,这些都是通过CSS实现的。 - Tab可以是水平的,也可以是垂直的,甚至可以设计成不规则形状,满足不同设计需求。 - 注意保持Tab的一致...
5. **CSS3的新特性应用**:在这些模板中,可能会看到CSS3新特性的实际运用,例如使用过渡和动画提升用户体验,用Flexbox或Grid实现复杂的弹性布局,用伪类和伪元素增强元素的交互效果等。 6. **前端框架和库**:...
随着JavaScript和CSS技术的发展,我们可以通过纯代码方式实现无图片的圆角效果。本文将详细介绍如何利用JavaScript和CSS来创建这种效果,以及它们的优势。 首先,让我们从CSS开始。CSS3引入了`border-radius`属性,...
1. **CSS3新特性**:描述中提到有模板使用了CSS3,这意味着我们可以期待看到如阴影效果、渐变、圆角、过渡、动画等CSS3的新特性。这些特性可以增强网页的视觉吸引力和用户体验。 2. **响应式设计**:随着移动设备的...