打印

[教程] 彻底弄懂CSS盒子模式五(定位强化练习)

evilive

新手上路

帖子: 7
体力: 20
威望: 0
离线: 475 天

31^# 大中小发表于 2007-5-16 08:27

hao !!!!!!!!!!!!!!!!!!!!!!

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

l4136749

新手上路

帖子: 2
体力: 9
威望: 0
离线: 311 天

32^# 大中小发表于 2007-5-23 11:00

想问下楼主
为什么加了a:hover {background:#fff;} 这个样式后IE6就能支持a:hover这个伪类了呢?

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

richaryufuyan

初级会员

帖子: 25
体力: 58
威望: 0
离线: 381 天

33^# 大中小发表于 2007-5-29 14:52

好文章，我看了三遍才搞懂了。呵呵

51rank

TOP

请大家尊重和保护奥运知识产权。

水煮卷心菜

初级会员

帖子: 314
体力: 111
威望: 0
离线: 276 天

34^# 大中小发表于 2007-5-29 16:43

乱套了，讲到父级等等的我就晕了

有意思吧|U148.Net

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

zyjian00

AKO

中级会员

帖子: 343
体力: 482
威望: 0
当前: 广东深圳
离线: 10 天

专长 网页设计,前端制作

35^# 大中小发表于 2007-5-29 21:44

绝对和相对定位我都很少用到，我是不是落伍了

TOP

Spicegirl

Spicegirl

中级会员

帖子: 243
体力: 433
威望: 0
离线: 112 天

36^# 大中小发表于 2007-6-1 16:05

谢谢楼主，受教了。

TOP

WPS2008

蓝色小强

高级会员

帖子: 385
体力: 518
威望: 0
当前: 北京朝阳区
离线: 1 天

专长 网页设计,前端制作,UE

37^# 大中小发表于 2007-6-8 19:03

好

TOP

micleaf

奋斗中的叶兄

高级会员

帖子: 223
体力: 561
威望: 0
当前: 四川成都
离线: 1 天

专长 网页设计,前端制作,UE

38^# 大中小发表于 2007-8-17 00:40

多谢楼主的文章...

我觉得有两个地方似乎可以改进...首先，楼主谈到的如果在信息面板中也使用ul li 的话会因为继承的原因重设每一个li...其是用父子选择器就能避免这个问题，比如ul套嵌在div中，就有div > ul >li 不过我还是倾向于版主的table做法..

其次，我试了一下，好像在信息面板中出现的图片不用一定要设为block吧，就让其以内联元素的级别显示，然后<dd>设为右浮动，也可以达到上述效果...至于楼主说的这样一来在FF中就不能正常显示..这一条因为偶用的是Opera，故不能验证..总之在OP和IE 7下还是能够正常显示的

再一次感谢楼主~

签名过长，超过40个字符了

TOP

songsong88

初级会员

帖子: 32
体力: 79
威望: 0
当前: 广东广州
离线: 243 天

39^# 大中小发表于 2007-9-28 14:02

呵呵~弹出窗口用JAVAscript解决要很多代码,用CSS原来可以这么优化.谢谢搂主`

TOP

jasu

雪兔

中级会员

帖子: 383
体力: 478
威望: 0
当前: 浙江杭州
离线: 26 天

专长 网页设计,UI,前端制作

40^# 大中小发表于 2007-9-28 16:51

我咋不行了呢...大家帮我看看呀

<!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>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<h3>专辑记录</h3>
     <ul>
       <li><a href="#">霍元甲
         <div><img src="images/1.gif" />
         <dl>
         <dd><span>唱片名称 :</span> 霍元甲 EP</dd>
           <dd><span>发行日期 :</span> 2006/01/20</dd>
           <dd><span>产品类型 :</span> EP+DVD</dd>
         </dl>
         </div>
       </a></li>
       <li><a href="#">依然范特西
         <div><img src="images/2.gif" />
           <dl>
             <dd><span>唱片名称 :</span> 依然范特西</dd>
             <dd><span>发行日期 :</span> 2006/09/05</dd>
             <dd><span>产品类型 :</span> CD+DVD</dd>
           </dl>
         </div>
       </a></li>
       <li><a href="#">11月的萧邦
         <div><img src="images/3.gif" />
         <dl>
         <dd><span>唱片名称 :</span> 11月的萧邦</dd>
         <dd><span>发行日期 :</span> 2005/11/01</dd>
         <dd><span>产品类型 :</span> CD</dd>
         </dl>
         </div>
         </a></li>
       <li><a href="#">叶惠美
       <div><img src="images/4.gif" />
       <dl>
       <dd><span>唱片名称 :</span> 叶惠美</dd>
       <dd><span>发行日期 :</span> 2003/7/31</dd>
       <dd><span>产品类型 :</span> CD</dd>
       </dl></div>
       </a></li>
     </ul>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

icebirds

冰鸟

中级会员

帖子: 190
体力: 248
威望: 3
当前: 北京通州区

41^# 大中小发表于 2007-11-17 01:39

引用:

原帖由 l4136749 于 2007-5-23 11:00 发表
想问下楼主
为什么加了a:hover {background:#fff;} 这个样式后IE6就能支持a:hover这个伪类了呢?

呵呵……IE 7以下版本一个很恶心的BUG，不是IE6不支持a:hover这个伪类，而是你不能在没有定义a:hover的时候就定义a:hover div，如果没有在代码中对a:hover定义显式触发，那么IE会认为a:hover并不存在，就不会触发关于a:hover的任何样式，这样a:hover div中的定义就会失效。

blog.icebirds.net

TOP

ipxzerg

新手上路

帖子: 1
体力: 7
威望: 0
离线: 18 天

42^# 大中小发表于 2008-1-13 23:10

<!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>无标题文档</title>
<style type="text/css">
<!--
* {margin:0px;
   padding:0px;}
body{margin:15px;
font-size:13px;
}
h3 {color:#FFFFFF;
background:#999900;
width:100px;
padding-top:3px;
text-align:center;
font-size:16px;
} 
ul{width:300px;
border-top:1px solid #990; 
}
ul li {
padding:5px;
border-bottom:1px solid #ccc;
list-style:none;
}
a:link {
    color: #666;   
	 text-decoration: none;/*去除链接下划线*/
}
a:visited {
    color: #666;
    text-decoration: none;
	}
	a:hover {
    color: #F90;
}
a {
position:relative;
display:block:
}
a div{
display:none;
}
a:hover div{
position:absolute;
display:block;
width:270px;
left:150px;
top:20px;
border:1px #009999 solid;
background-color:#66FFFF;
}
dl {
margin:5px;
}
a img {
width:80px;
height:80px;
border:none;
display:block;
position:absolute;
top:5px;
left:5px;
}
dl {
    width: 160px;
    float:right;
    color: #999;
    line-height:20px;
}
dl dd span {
    font-weight: bold;
    color:#0033CC;
}
</style>
</head>
<body>
<h3>最新单曲</h3>
<ul>
<li>
<a href="#">01 爱的文身 黄圣依
<div>
<img src="pic1.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>爱的文身</dd>
    <dd><span>歌手:</span>黄圣依</dd>
    <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>
</dl>
</div>
</a>
</li>
<li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />
<dl>
    <dd><span>歌名:</span>累了</dd>
    <dd><span>歌手:</span>阿信</dd>
    <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>
</dl></div></a></li>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

我也学习一下~~~

TOP

dinggg1

新手上路

帖子: 2
体力: 9
威望: 0
离线: 131 天

43^# 大中小发表于 2008-4-26 09:53

我爱此教程！！！

TOP

calllover

新手上路

帖子: 2
体力: 9
威望: 0
当前: 北京海淀区
离线: 59 天

44^# 大中小发表于 2008-5-7 17:18

还要努力呀

TOP

christineliuj

牛儿

初级会员

帖子: 158
体力: 184
威望: 2
当前: 湖北武汉
离线: 4 天

45^# 大中小发表于 2008-6-23 09:44

一直不明白绝对定位和相对定位怎么用

TOP

christineliuj

牛儿

初级会员

帖子: 158
体力: 184
威望: 2
当前: 湖北武汉
离线: 4 天

46^# 大中小发表于 2008-6-23 12:00

引用:

原帖由 blank 于 2007-4-4 13:35 发表

歌名:爱的文身
歌手:黄圣依
介绍:黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。

对于这部分内容，我更倾向于使用table，因为他们正 ...

对于这个,怎么用设定text-indent的无限大负值或绝对元素的left无限大负值来实现??
高手可以给出代码么?

TOP

gdc123

初级会员

帖子: 35
体力: 77
威望: 0
当前: 江西吉安
离线: 2 天

47^# 大中小发表于 2008-7-14 16:23

学习学习，谢谢大家！

TOP

gdc123

初级会员

帖子: 35
体力: 77
威望: 0
当前: 江西吉安
离线: 2 天

48^# 大中小发表于 2008-7-14 16:26

好呀最新单曲

TOP