网站用户体验整合设计-纯div+css实现简洁型圆角矩形

纯div+css实现简洁型圆角矩形

Post by 张美工, 2009-7-24, Views:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简洁型css圆角矩形</title>
<style type="text/css">
<!--
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}

-->
</style>
</head>

<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
<font style="font-size:26px;color:red; margin:0px 10px;">
简洁型css圆角矩形
</font>
</div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>
</body>
</html>

----div+css文章目录--------------------------------------------------------------------------------=+=

  # 标准树状导航菜单
# 纯div+css实现下拉菜单
# 纯div+css实现简洁型圆角矩形
# CSS无图片无锯齿完美圆角边框
# 纯CSS实现圆角框
# 体验div+css 之圆角框(CSS3.0)
# 体验css+div 之圆角框
# 体验css+div 之层叠和特殊性

#  css之自动换行
# 鼠标事件大全
# CSS控制连续英文字母或数字强制换行
# 让css使网页图片半透明
# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮
# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div 之使用自动空白边让设计居中
# 体验css+div之图像替换 1.徽标图像替换

# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
#  Dreamweaver的超级技巧汇总(1)
#  在线QQ MSN TEL交谈工具代码
#  方便使用的一些小简短input\form代码
#  VSS使用手册
#  JS表单判断函数代码大全 (三)
#  JS表单判断函数代码大全 (二)
#  JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总
# 体验css+div 之　CSS hack:区分IE6，IE7，firefox
# 体验css+div 之兼容标准XHTML的浮动层特效实现
# 因为编码差异导致IE6不能正常解析CSS文件
# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 搜索

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

# 体验css+div 之为什么css+div 会盛行
# 体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

Tags: divcss 圆角矩形

分类:css+div | 评论:2 | 引用:0

上一篇：早上逛798之艺术体验
下一篇：标准树状导航菜单

或许你还对下面的文章感兴趣

Comments

2.z
呵呵，我不知道你在使用这段代码的时候出现了什么问题，但这代码的本身是没有问题的。我站的技术文章都是本人在工作和学习中积累和总结出来的。贴上来跟大家分享，也欢迎大家一起讨论！
2009-8-17 10:56:20 回复

1.five
都是拿来主义吧，也不做分析，如此牛角尖的代码也转出来误导人！不求甚解！
z 于 2009-8-17 10:54:06 回复
呵呵，我不知道你在使用这段代码的时候遇到了什么问题，不过这段代码本身没有问题，我的技术文章都是自己在学习和工作的过程的积累和总结，贴上来就是为了和大家分享，如果有不大懂的地方，欢迎一起讨论！
2009-8-17 9:55:32 回复

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

纯div+css实现简洁型圆角矩形

或许你还对下面的文章感兴趣

Comments

最新文章

最新评论

Guest

纯div+css实现 简洁型圆角矩形

或许你还对下面的文章感兴趣

Comments

最新文章

最新评论

Guest

纯div+css实现简洁型圆角矩形