【红黑联盟DIV+CSS】一分钟学习[每日更新]|WEB开发

beatles

高级菜鸟

发帖: 78

黑豆: 68

威望: 87

贡献值: 0

交易币: 0

红豆: 0

只看该作者 30 发表于: 2012-06-20

来学习看看。

云凤竹

菜鸟(发帖需审核,请升级)

发帖: 49

黑豆: 51

威望: 63

贡献值: 0

交易币: 0

红豆: 0

只看该作者 31 发表于: 2012-06-21

好基础，谢谢楼主，

内蒙小唯

总版主

发帖: 5566

黑豆: 58

威望: 17754

贡献值: 0

交易币: 0

红豆: 86

只看该作者 32 发表于: 2012-06-21

【一分钟学习】鼠标经过

鼠标经过涉及到两个属性，一个a状态，集鼠标未选中，一个是hover状态，即鼠标移上的效果。

HTML代码

复制代码

<div class="menu_bottom">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="index.html">电影</a></li>
<li><a href="index.html">电视剧</a></li>
<li><a href="index.html">综艺</a></li>
<li><a href="index.html">动漫</a></li>
<li><a href="index.html">小视频</a></li>
<li><a href="index.html">搜索</a></li>
<li><a href="index.html">观看历史</a></li>
</ul>
</div>

CSS代码

复制代码

.menu_bottom{height:40px; background:#000;}
.menu_bottom li{width:128px; height:34px; line-height:34px; font-size:14px; text-align:center;}
.menu_bottom li a{font-size:14px; color:#038BFB;display:inline-block}
.menu_bottom li a:hover{font-size:14px; color:#000;background:#038BFB;width:105px; height:34px;line-height:35px; margin-top:2px}

其中css代码中的第三行，在IE浏览器下应该为.menu_bottom li a{font-size:14px; color:#038BFB;display:block}
我这个是专门为safari用户而写的，这个也是safari难得的一个小bug吧，不太支持IE6下的块写法，在safari下是display:inline-block。

鼠标经过只需要设置a和a:hover，像visited一类的，一般情况下目前网站设置的已经比较少了。

天雪

入门专家

发帖: 3596

黑豆: 35

威望: 6268

贡献值: 0

交易币: 0

红豆: 0

只看该作者 33 发表于: 2012-06-21

支持！

william

菜鸟(发帖需审核,请升级)

发帖: 27

黑豆: 15

威望: 26

贡献值: 0

交易币: 0

红豆: 0

只看该作者 34 发表于: 2012-06-22

谢谢分享

l514

菜鸟(发帖需审核,请升级)

发帖: 4

黑豆: 3

威望: 4

贡献值: 0

交易币: 0

红豆: 0

只看该作者 35 发表于: 2012-06-22

新手来学习~~

内蒙小唯

总版主

发帖: 5566

黑豆: 58

威望: 17754

贡献值: 0

交易币: 0

红豆: 86

只看该作者 36 发表于: 2012-06-22

[一分钟学习]部分css hack

[backcolor= transparent]今天一直在发一个asp教程的帖子，忘记更新了，到现在才想起来，还没想好更新什么内容，那就说下，几个比较长出现的css不兼容吧。
[backcolor= transparent]其实在兼容这一块，浏览器版本越高越趋于一致，比如在FF下看完好的页面，那么在google chrome里safari里IE8里基本都不会差太多，所以目前比较大众的还是IE6这块的问题。
[backcolor= transparent]一时想不起来还有哪些不兼容的元素，大家如果有的话，可以直接回复给我。
[backcolor= transparent]

一、高度显示双倍高度
比如你要写一个10px高度的层，但是浏览器显示可能就是20px，怎么办，直接对这个层进行溢出隐藏，比如我就10px的高，如果超出这个高度，直接隐藏超出的部分。
解决办法：overflow:hidden

二、margin-left双倍宽度
在IE6下这个也是一个经典的不兼容，如果使用margin-left:50px;你在IE6下预览的时候就会发现，距离左边真正的值是100，双倍的距离。
解决办法，在试用margin-left的时候，加一句display:inline