文章标签 ‘CSS’
2014六月9

CSS:限制图片最大宽度

img{max-width:800px;width:expression(this.width > 800 ? 800: true);height:auto;}

2010八月14

网站变灰代码

祖国多灾多难,希望网站变灰的次数越少越好。。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
2010八月3

DIV+CSS常用属性定义说明

.toptab {
    min-width:60px;/*最小宽度*/
    _width:60px; /*实现min-width兼容 IE6*/
    overflow: hidden;/*不出现滚动条*/
    float:left;/*左浮动*/
    padding:2px 6px 0 6px;/*定义元素内边框,上右下左*/
    margin:0 10px 0 0;/*定义元素外边框,上右下左*/
    text-align:center;/*文本居中对齐*/
    height:22px;
    line-height:22px; /*两个高度一致,使文本上下垂直居中 */
    font-size: 12px;/*文字大小*/
    background-color:#ffffff;/*元素背景颜色*/
    color: #333333;/*文字颜色*/
    font-weight: normal;
    text-decoration: none;/*不出现下划线*/
}

ps:内联(display:inline;)属于行布局,其特性是在一行里进行布局,不能设置宽高

2010七月9

CSS+DIV+UL+LI 实现简单下拉菜单

<!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>wizzer.cn</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
font-family:"宋体";
font-size:12px;
text-align:center;
}
body ul{
margin:0px auto;
}
#mean{
width:500px;
margin:0px auto;
padding:0px;
}
#mean li{
float:left;
list-style-type:none;
width:80px;
padding:1px;
line-height:25px;
}
.a{
    background-color: #9DDFAA;
    color: #060;
    text-decoration: none;
    border: 1px solid #0C6;
    display: block;

}
.a:hover{
    color: #FFFFFF;
    background-color: #12581A;
    border: 1px solid #6AFF6A;
}
.list{
    width: 80px;

}
.list ul{
margin:0px auto;
padding:0px;
}
.list li{
    float: left;
    height: 18px;
    width: 80px;
}
.b{
    width: 80px;
    background-color: #55BF60;
    line-height:18px;
    display: block;
    text-decoration: none;
    color: #000;
    filter:Alpha(opacity=70);
}
.b:hover{
    background-color: #FFFFFF;
    color: #060;
    text-decoration: none;
    filter:Alpha(opacity=70);
}
.menu2{
    height: 26px;
    width: 80px;
    cursor:hand;
    overflow-y:hidden;
}
#keai{
    width:800px;
    height:50px;
    background-color:#4033D7;
    z-index:-1;
    position: absolute;
    left: 0px;
    top: 35px;
}
-->
</style>
</head>
<body>
<div id="mean">
<ul>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'">
<a href="#">网站首页</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li >
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">新闻公告</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">产品信息</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">最新推荐</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">联系我们</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>