生·生活

asp.net旅行

 

css累积

1.图像阴影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Dropshadows</title>
<style type="text/css">
<!--
.img-wrapper {
  background: url(images/shadow.gif) no-repeat bottom right;
  clear: right;
  float: left;
  position: relative;
  margin: 10px 0 0 10px;
}
 
.img-wrapper img {
  /*background-color: #fff;
  border: 1px solid #a9a9a9;
  padding: 4px;*/
  display: block;
  margin: -5px 5px 5px -5px;
  position: relative;
}
-->
</style>
</head>

<body>

<div class="img-wrapper"><img src="images/my.jpg" width="300" height="300" alt="myphoto" /></div>

</body>
</html>

下载:css-图像阴影

2.一个漂亮的css美化表格 下载:css美化表格

3.设置默认字体大小
一般浏览器的默认字号为16px,10像素大约是16像素的62.5%,所以可以在body中设置font:62.5%.以此来把1em设置为10px
body{
 font-size:62.5%
}
这样就可以设置其他的布局框的width:xem
main{
 width:78em;  /*就相当于780px*/
}

4.弹性-流体混合布局
使用em设置宽度,使用%设置最大宽度
body{
 font-size:62.5%;     /*1*/
 margin:0;
 padding:0;
 text-align:center;
}
#wrapper{
 width:72em;          /*2*/
 max-width:100%;      /*3*/
 margin:0 auto;
 text-align:left;
}
#content-left{
 width:18em;
 max-width:23%;
 float:left;
}
#content-right{
 width:52em;
 max-width:75%;
 float:right;
}
#footer{
 clear:both;
}
在支持max-width的浏览器上,这个布局将随着字号伸缩,但是绝不会超过窗口的宽度.

5.IE有条件注释
<!-- [if IE]
<style type="text/css">
 @import ("ie.css");
</style>
-->

<!-- [if IE 5] 
<style type="text/css">
 @import ("ie50.css")
</style>
-->

<!-- [if gte IE 5.5000]
<style type="text/css">
 @import ("ie55up.css");
</style>
-->

<!-- [if lt IE 6]
<style type="text/css">
@import ("ie.css");
</style>
-->

6.IE5带通过滤器
@media tty{
 i{content:"\";/*" "*/}}; @import 'ie50.css';{;}/*";}}/**/

7.IE5.5带通过滤器
@media tty{
 i{content:"\";/*" "*/}}@m; @import 'ie55.css';/*";}}/**/

8.子选择器招数
IE5-6不支持子选择器,对IE5-6隐藏透明背景,而IE7则会使用透明背景,因为它支持子选则器
html>body{
 background-image:url(bg.png);
}

9.仿蓝色理想的css图片提示框
<!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> New Document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style  type="text/css">
        img{
        border-width:0;
        }
        a {
        display:block;
        float:left;
        position:relative;
        padding:6px;
        border:1px solid #F0F0E8;
        text-decoration:none;
        color:red;
        }
        a span{
        display:none;
        }
        a:hover{
        background:#333;
        }
        a:hover span{
        width:100%;
        line-height:20px;
        text-align:center;
        display:block;
        background-color:#333;
        position:absolute;
        bottom:0px;
        left:0;
        color:#fff;
        font-size:12px;
        }
    </style>
 </head>

 <body>
 <a href="#"  >
    <img src="xin1.jpg"   />
    <span>苏见信写真 - 1</span>
 </a>
 </body>
</html>
下载：css图片提示框

posted on 2008-01-12 13:29  厦门刀客  阅读(168)  评论(0)  编辑  收藏  举报

导航