`
guoxuepeng
  • 浏览: 38589 次
文章分类
社区版块
存档分类
最新评论

用div+css实现无图圆角边框

 
阅读更多
<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
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>
</head>
<body>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>
分享到:
评论

相关推荐

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先,`div`是HTML中的一个块级元素,它可以被用作容器,用于组织页面内容。在创建导航菜单时,`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...

    div+CSS购物网站模板

    在这个专题中,我们将深入探讨Div+CSS在购物网站模板中的应用,以及它对于网页设计的重要性。 首先,让我们了解什么是Div和CSS。Div(Division)是HTML中的一个布局容器,它允许我们将页面划分为多个独立的区域,...

    经典DIV+CSS模板 经典DIV+CSS模板

    描述中的关键词如"div+css"、"web标准"、"div+css布局"、"div+css实例"、"div+css模板"揭示了这些模板遵循Web开发的最佳实践,旨在实现结构与表现的分离,提高网页的可维护性和可访问性。Web标准通常指的是W3C制定的...

    Table转div+css工具

    在网页设计领域,布局方式的发展经历了从表格(Table)到层(Div)+CSS的转变。"Table转div+css工具"就是专为此目的而设计的一款实用软件,它能够帮助开发者将原有的基于表格的HTML代码转换成使用Div和CSS进行布局的...

    DIV+CSS网页制作对搜索引擎优化的优势分析整理.pdf

    使用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。 二、 DIV+CSS的网页制作对搜索引擎优化(SEO) 的优势 DIV+CSS网页制作技术对搜索引擎优化的优势在于其能够减少页面...

    简单设计DIV+CSS模板

    通过Div+CSS,我们可以实现更灵活、更可维护的网页设计,提高网页加载速度,并且利于搜索引擎优化(SEO)。 网页布局是Div+CSS应用的重要部分。常见的布局模式有固定布局、流体布局和响应式布局。固定布局适用于...

    table布局网页转换为div+CSS布局的转换软件

    `div+CSS`布局则通过分离结构和样式,提高了代码的可读性和可维护性,同时也为创建灵活的、响应式的网页提供了可能。 `table`到`div+CSS`的转换软件就是针对这种情况应运而生的工具。这种软件能够自动将基于`table`...

    DIV+CSS 圆角边框

    标题“DIV+CSS 圆角边框”指向的是一个关于前端网页设计的技术主题,特别是如何使用HTML和CSS来实现元素的圆角边框效果。在Web开发中,DIV元素常被用作布局容器,而CSS(层叠样式表)则用于控制页面的样式和结构。在...

    div+css布局制作箭头步骤流程样式 - div+css教程

    总结一下,`div+css`布局制作箭头的步骤流程包括:创建`div`元素、定义边框、调整角度、定位箭头以及可能的复杂形状实现。这不仅有助于提升网页设计技能,也有助于理解CSS的灵活性和强大性。对于志峰创业室这样的...

    html+div+css+js学习.zip

    html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...

    纯div+css轮播图片切换图片

    在网页设计中,纯div+css实现的图片轮播是一种常见的动态效果,它能为网站增添生动性,吸引用户注意力。下面将详细讲解这个主题,包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    div+css手册

    《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...

    div+css布局大全

    9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...

    整站模板DIV+CSS 源码DIV+CSS 

    【描述】"DIV+CSS 源码"进一步强调了这个主题,意味着我们将深入到实际的代码层面,了解如何通过Div元素配合CSS实现网页的布局、样式控制以及功能实现。Div常用于定义网页上的不同区域,而CSS则用于定义这些区域的...

    两天驾驭DIV+CSS.pdf

    基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...

    DIV+CSS网站布局从入门到精通源代码

    通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS样式的基础理论和实际运用技术,并结合实例来讲解层叠样式表与层布局相结合制作网页...

    div+css案例,网页设计

    在"div+css案例"这个压缩包中,我们可以预期找到一系列示例文件,展示了如何使用Div和CSS创建网页布局。这些案例可能包括以下内容: 1. **基本布局**:使用Div实现网格系统,例如两栏或三栏布局,展示如何通过CSS...

Global site tag (gtag.js) - Google Analytics