网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
图层样式
-> CSS个性尖角布局
CSS个性尖角布局
作者:admin 发布时间:2010-11-10 4:05:14 发布人: admin
<!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> <title>CSS个性尖角布局</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body { margin:50px 0 0 50px; } ul, li { padding:0px; list-style:none; margin:0; } div { padding:10px; border:3px solid #1c7ecf; position:relative; margin:10px; float:left; width:150px; height:100px; } p { text-indent:2em; } .cusp01,.cusp02 { position:absolute; display:block; height:0px; line-height:0px; } #left_cusp { } #left_cusp .cusp01 { left:-12px; top:50px; border-top:9px solid #fff; border-bottom:9px solid #fff; border-left:0px; border-right:9px solid #1c7ecf; } #left_cusp .cusp02 { left:6px; top:-6px; border-top:6px solid #1c7ecf; border-bottom:6px solid #1c7ecf; border-left:0px; border-right:6px solid #fff; } #right_cusp { } #right_cusp .cusp01 { right:-12px; top:50px; border-top:9px solid #fff; border-bottom:9px solid #fff; border-right:0px; border-left:9px solid #1c7ecf; } #right_cusp .cusp02 { right:6px; top:-6px; border-top:6px solid #1c7ecf; border-bottom:6px solid #1c7ecf; border-right:0px; border-left:6px solid #fff; } #top_cusp { } #top_cusp .cusp01 { left:100px; top:-12px; border-top:0px; border-bottom:9px solid #1c7ecf; border-right:9px solid #fff; border-left:9px solid #fff; } #top_cusp .cusp02 { left:-6px; top:6px; border-top:0px; border-bottom:6px solid #fff; border-right:6px solid #1c7ecf; border-left:6px solid #1c7ecf; } #bottom_cusp { } #bottom_cusp .cusp01 { left:100px; bottom:-12px; border-bottom:0px; border-top:9px solid #1c7ecf; border-right:9px solid #fff; border-left:9px solid #fff; } #bottom_cusp .cusp02 { left:-6px; bottom:6px; border-bottom:0px; border-top:6px solid #fff; border-right:6px solid #1c7ecf; border-left:6px solid #1c7ecf; } </style> </head> <body> <div id="left_cusp"> <ul> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> </ul> <span class="cusp01"><span class="cusp02"></span></span> </div> <div id="right_cusp"> <ul> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> </ul> <span class="cusp01"><span class="cusp02"></span></span> </div> <div id="top_cusp"> <ul> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> </ul> <span class="cusp01"><span class="cusp02"></span></span> </div> <div id="bottom_cusp"> <ul> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> <li>ffffffffffffffff</li> </ul> <span class="cusp01"><span class="cusp02"></span></span> </div> </body> </html>
CSS个性尖角布局
将本文收藏到QQ书签与更多好友分享
上一篇:文章:
随机加载的CSS样式
下一篇:文章:
鼠标悬停改变背景色
本类浏览排行 »
鼠标悬停改变背景色
CSS个性尖角布局
随机加载的CSS样式
比较实用的二级下拉导航菜单
纯CSS倾斜菱形导航菜单
输入序列号时常用的让焦点自动跳转的特效..
复制到剪贴板的按钮
获取指定图片的url地址的JS脚本
本站推荐文章 »
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单
一款简洁漂亮的CSS滑动门特效
结构和表现分离的Tab选项卡特效
滑动的div层做的动态菜单