- 浏览: 54258 次
- 性别:
- 来自: 北京
最新评论
<!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=utf-8" />
<title>百度有啊css圆角方案</title>
<style>
.box1{background:url('http://www.lanrentuku.com/images/uppic/200901172112180.gif') repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width:778px;}
.box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {width:5px;height:5px;position:absolute;background:url('http://www.lanrentuku.com/images/uppic/200901172112510.gif') no-repeat;overflow:hidden; }
.box1 .cc{height:40px; padding:5px;}
.box1 .tl {left:0;top:0;}
.box1 .tr {right:0;top:0;background-position:0 -5px;}
.box1 .bl {left:0;bottom:0;background-position:0 -10px;}
.box1 .br {right:0;bottom:0;background-position:0 -15px;}
.box2{border:1px solid #84cedd;margin-bottom:.8em;position:relative;zoom:1;width:778px;}
.box2 .tl,.box2 .tr,.box2 .bl,.box2 .br {width:6px;height:6px;position:absolute;background:url('http://www.lanrentuku.com/images/uppic/200901172113180.gif') no-repeat;overflow:hidden;}
.box2 .cc{height:40px; padding:5px;}
.box2 .tl {left:-1px;top:-1px;}
.box2 .tr {right:-1px;top:-1px;background-position:0 -6px;}
.box2 .bl {left:-1px;bottom:-1px;background-position:0 -12px;}
.box2 .br {right:-1px;bottom:-1px;background-position:0 -18px;}
.box3{position:relative;zoom:1;padding:1em 1.5em;margin:.5em 0 1em 0; background:#f1f6de}
.box3 .tl,.box3 .tr,.box3 .bl,.box3 .br {width:5px;height:5px;position:absolute;background:url('http://www.lanrentuku.com/images/uppic/200901172113470.gif') no-repeat;overflow:hidden;}
.box3 .cc{height:40px; padding:5px;}
.box3 .tl {left:0;top:0;}
.box3 .tr {right:0;top:0;background-position:0 -5px;}
.box3 .bl {left:0;bottom:0;_bottom:-1px;background-position:0 -10px;}
.box3 .br {right:0;bottom:0;_bottom:-1px;background-position:0 -15px;}
</style>
</head>
<body>
<div class="box1">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圆角一</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<p></p>
<div class="box2">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圆角二</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
<p></p>
<div class="box3">
<span class="tl"></span><span class="tr"></span>
<div class="cc">
<p>圆角三</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>
</body>
</html>
发表评论
-
DIV+CSS常用的Html网页布局代码
2009-09-28 23:06 943单行一列以下是引用片段:body { margin: 0 ... -
Javascript+css 实现网页换肤功能
2009-09-28 23:06 936Html代码部分: 1.要有一个带id的样式表链接,我 ... -
五行代码带来的无缝滚动程序
2009-09-28 23:05 619element.appendChild(newNode) 方法 ... -
网页视频代码集合
2009-09-28 21:15 10901.avi格式代码片断如下: <object id=& ... -
经验记录: 在css调用时 可以将css写成.txt 形式!!
2009-09-24 00:18 791同题 -
ps做透明背景pbg
2009-09-23 11:16 988SHIFT+ALT+CTRL+S 保存web图时 保 ... -
常用的"收藏,打印,另存为"等JS代码(按纽INPUT和链接形式)
2009-09-14 21:49 1051脚本说明: 把如下代码加入<body>区域中: ... -
window.open()的所有参数列表
2009-09-14 21:51 521前言:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹 ... -
关于上传图片自动添加网址之upfile_photo.asp
2009-09-14 22:02 928strJS = strJS & "paren ... -
免费百度搜索引擎代码、Google搜索引擎代码、综合搜索引擎代码
2009-09-15 01:10 4768一、百度搜索代码 1、 <table width=9 ... -
css+div实现圆角
2009-09-15 16:03 9841: <html><head>< ... -
用CSS为table添加边框
2009-09-16 07:35 3782在用CSS给表格定义1像素的边框的时候,是个比较棘手的问题 ... -
css之自动换行
2009-09-16 07:37 961自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字 ... -
css里直接定义table
2009-09-16 07:40 602<style>table{border-colla ... -
jquery 冲突与prototype(工具网站笔记)
2009-09-16 16:50 729prototype 在定义过程中采用$()来代替 docume ... -
常用的"收藏,打印,另存为"等JS代码(按纽INPUT和链接形式)
2009-09-18 19:22 628脚本说明: 把如下代码加入<body>区域中: ... -
jquery和prototype冲突解决
2009-09-18 19:54 825最近做项目用到了jQuery验证,可在应用的js中也有prot ... -
Ajax技术(WEB无刷新提交数据)- 及ajax出生
2009-09-19 11:33 1120Ajax内部交流文档一、使用Ajax的主要原因 1、通过适当的 ...
相关推荐
提取自百度有啊的css圆角效果
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=gb2312″ /> <...百度有啊css圆角方案</title> <style> .box1{background
代码简结,重复利用高很不错的css圆角[百度有啊]
百度有啊的 CSS 圆角写法,原理和《一张图片实现圆角》差不多,也是用背景定位实现的。
仿百度有啊产品列表样式的点击切换特效! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
网页模板设计效果图(DIV+CSS 百度有啊JS兼容超强选项卡滑动门封装类库) 该站所有静态源码: www.cityssl.com
支持图片“大图”、“列表”两种模式排列
百度有啊通栏图文混排展示
百度有啊专家免登陆版 源于http://yooyle.com.cn 破解版仅供学习,请支持正版
QWrap是百度有啊前端团队推出的一个javascript框架
(百度有啊老大)产品设计的方法与理念,从中感受百度做产品的设计理念
超赞的百度有啊图文展示效果
百度有啊李明远网购用户的行为分析.pdf
百度有啊获数千万美金投资 正式分拆独立运营.docx
dede5.5+大型淘客购物模板-高仿百度有啊购物模板风格
比较有个性的焦点图切换代码,支持图片文字排列方式
百度有啊通栏展示大家并不陌生吧,下面与大家分享下具体的实现js代码,感兴趣的朋友可以参考下哈