用DIV+CSS设计出圆角矩形的代码

2016-02-19 19:44 18 1 收藏

今天图老师小编给大家精心推荐个用DIV+CSS设计出圆角矩形的代码教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

【 tulaoshi.com - Web开发 】

  很多人到处寻求个使用DIV+CSS制作出圆角矩形的方法,使用底下的一段代码你就可以轻松实现这个很拽的圆角矩形了。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

<style>div.bg{background:#ffc20e;width:50%}b{display:block;}
/*将所有B标签转成块级元素*/
div b.topb b,div b.bottomb b
{height:1px;overflow:hidden;background:#ffc20e;}
/*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px,
溢出部份隐藏,背景色同div.bg的背景色*/
div b.topb,div b.bottomb{ background-color:white}
/*div标签内类名为topb/bottomb的背景色要与body背景色一致*/
b.t1{margin:0 5px}
/*标签margin值将决定溢出的多少值被隐藏
*/b.t2{margin:0 3px}b.t3{margin:0 2px}b.t4{margin:0 1px;height:2px;}
</style>
<div align="center"><div class="bg">
<b class="topb">
<!--**此b标签所包含的b标签要进行溢出隐藏**--><b class="t1">
</b><b class="t2">
</b><b class="t3"></b><b class="t4"></b>
</b><br />
<b class="bottomb">
<b class="t4"></b><b class="t3"></b><b class="t2">
</b><b class="t1"></b></b>
</div></div>

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1621673.html

延伸阅读
标签: Web开发
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW...
标签: Web开发
我们来说下div+css布局的时候怎样做到最精简的代码,以达到极限提升网站速度的目的。 1、css样式尽量合并成一个外部文件,采用link方式导入到网页中来,可以减少不少内嵌在网页中的css代码。 2、多用全局样式,比如网页中只有一个h1标签,那么直接在css文件中定义h1的样式,如h1{......},而不要给h1标签加class或者id来定义样式,这样一...
标签: Web开发
您所在的位置:首页 网页设计 HTML/CSS/DIV Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者:
标签: Web开发
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误: 1. 检查HTML元素是否有拼写错误、是否忘记结束标...
标签: Web开发
我们都知道DivCSS网页布局的好处,在WEBJX中对此深入介绍着,它对网站 搜索引擎优化 的影响有哪些呢? 网站优化使用DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭解的都知道。代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录品质有一定好处;二是由于能高效的爬行,就会受...

经验教程

685

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部