教程:纯CSS作的小灯笼效果
作者:zishu 来源:zishu blog 发布时间:2008-08-26 17:22:00
标签:效果,定位,css
刚刚有人问我二年前写的那个小三角的效果还能作出什么样的效果,我正在看电视,画面上出现了这样一个小灯笼,于是,我就说,可以作个小灯笼玩玩。于是,就有了这个! 说明一点,这东西就是用来熟悉CSS用的,实际中相当不赞成这样用! 实际中谁这样用,一定是闲的!
写这个效果,可以熟悉以下:
1、相对定位中的绝对定位;
2、CSS 针对浏览器 HACK;
3、了解几种边框,以及可以实现的变化;以及加了边框后,宽度和高度的计算方法;
4、感受浮动,浮动的东西只有多作一些,才会感受更深一些;
5、还可以熟悉一下小学的加减法;呵…… 很早以前我都是拿计算器在写CSS。
首先,我先用FW画一个小灯笼,在画的过程中,我尽可能不出现圆角,并画成等宽,等高、居中;因为这些属性在CSS中都有!文字12号加粗!
于是,开始想布局!这个布局太麻烦,我不得不用更多的标签来完成,实际上,我没有想太多,包括现在的代码都没有优化过,是我想到哪就写到哪,实际中标签可能还可以减少,CSS代码一定能优化!
<ul id="dl">
<li>
<div><span><a href="#"><strong>福</strong></a></span></div>
</li>
<li>
<div><span><a href="#"><strong>喜</strong></a></span></div>
</li>
<li>
<div><span><a href="#"><strong>顺</strong></a></span></div>
</li>
<li>
<div><span><a href="#"><strong>鼠</strong></a></span></div>
</li>
</ul>
结构定下来后,开写CSS;
ul,li{ list-style:none; padding:0; margin:0; font-size:12px; line-height:1.8;}
body{ padding:60px;}
#dl li{ float:left; width:50px; border-left:1px solid #000; height:15px;}
#dl div{ margin-left:-15px; position:absolute; margin-top:15px; border-bottom:3px solid #FF0000; border-left:3px solid #fff; border-right:3px solid #fff; width:23px;}
#dl span{border-top:3px solid #FF0000; border-left:3px solid #fff; border-right:3px solid #fff; width:23px; display:block; position:absolute; margin-left:-3px; margin-top:42px;}
#dl a{position:absolute; color:#FFFF00;cursor:pointer; text-decoration:none;background:#FF0000; width:29px; text-align:center; margin-top:-42px; margin-left:-3px; height:39px;}
#dl a:hover{ color:#000000}
#dl strong{display:block; border-top:3px solid #000000; width:12px; border-bottom:7px double #FF9900; position:absolute;line-height:47px; margin-top:-6px; margin-left:8px;}
* html #dl strong{margin-left:-6px;}
*+html #dl strong{margin-left:-6px;}
看效果:
完,CSS部分比较简单,不加注释了!我电脑上没有安IE7;IE7中没有测,但应该没有问题!
0
投稿
猜你喜欢
- HTTP状态码 摘要说明成功2××  
- 如何在寸土寸金的首页上使页面的价值最大化,是每个网站设计者最关心的话题。用户关注的页面长度、宽度都是有限的。宽度自不必说,一般网站都会根据自
- window.onload 是页面全部加载完成,包括图片、CSS、JavaScript等。但加载JavaScript的方法有很多种
- 好久没有更新博客了,今天看到论坛上有位朋友问起全屏布局,有点像vc的界面。来了兴趣,就写了一个。运用IE6的怪异模式,通过绝对定位来实现的。
- 在我发表上一篇《Zen Coding: 一种快速编写HTML/CSS代码的方法》之后,有网友表示不知道怎么在Dreamweaver上使用ze
- 本文通过实例代码介绍了如何在jscript和vbscript中使用操作FileSystemObject(fso)对象模式来编程.
- 已知有一个XML文件(bookstore.xml)如下:<?xml version="1.0" encoding=
- 我们可能会出现这种情况,某个表原来设计不周全,导致表里面的数据数据重复,那么,如何对重复的数据进行删除呢?重复的数据可能有这样两种情况,第一
- SVG是XML来描述二维图形的语言。SVG可以构造3种类型的图形对象:矢量图形、位图图象和文字。图形对象可被组化、样式化、变形和重组,包括图
- 上一篇的DOCTYPE声明好以后,接下来的代码是:<html xmlns="xhtml" ta
- XML是一个精简的SGML,它将SGML的丰富功能与HTML的易用性结合到Web的应用中。XML保留了SGML的可扩展功能,这使XML从根本
- CSS圆角的现实一直是大家所热衷的话题,我们进行CSS布局一直强调语义,强调文档的结构。圆角作为页面的外面表现,应该分离到CSS文件中,可以
- 今天刚看到ChinaUI.com新改版的网站,觉得优艾网是越来越漂亮了,这次的变化的确是挺大的。一早大概的看了一下就关了,后来晚上又打开看时
- 每个进行过较大型的ASP-Web应用程序设计的开发人员大概都有如下的经历:ASP代码与页面HTML混淆难分,业务逻辑与显示方式绞合,使得代码
- 如果网站只开了80端口,你会发现下面的方法是比较有用的,其中用的方法几乎都不是我发现的,文总包括一些注入时的个人经验和技巧方法可以说有4种(
- 说起页面执行时间相信大家并不陌生,如果你经常逛论坛,就会发现很多论坛底部都显示有页面执行时间,那么什么是页面执行时间呢?我个人理解是一个网页
- JavaScript中的字符串函数没有像VBScript\ASP中的内部函数那么全.不能像VB那样直接利用left和right函数来实现对字
- 想必大家都知道MSSQL中SA权限是什么,可以说是至高无上。今天我就它的危害再谈点儿,我所讲的是配合NBSI上传功能得到WebShell。在
- 在asp里通过以下两个函数实现javascript里的escape函数和unescape函数
- 如何制作一个WAP手机的WML网页?代码如下:<%@Language=VBScriptMaxNoAds = 10'