CSS小技巧

来源：互联网发布：seo按天付费编辑：程序博客网时间：2024/06/05 01:11
<!doctype html><html><head><meta charset="utf-8"><title>hello</title><style type="text/css">.div1{margin:10px;width:400px;height:300px;background-color:#BDD738;float:left;/*background-color: green;*//*分别在火狐和谷歌浏览器下实现渐变*/background-image:-moz-linear-gradient(left top, #BDD738, #7E9516);    background-image: -webkit-gradient(linear, left top,left bottom, from(#BDD738), to(#7E9516));    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#BDD738',endColorstr='#7E9516');    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#BDD738',endColorstr='#7E9516')";    background: -ms-linear-gradient(top, #BDD738, #7E9516);    /*分别在firefox webkit和css3中实现圆角*/     -moz-border-radius: 8px;     /*css3*/     border-radius: 8px;     /*webkit*/   -webkit-border-radius: 8px;   /*阴影效果*/   -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);  /*IE6,IE7语法  filter:progid:DXImageTransform.Microsoft.Shadow(OffX=5, OffY=5, Color='gray');  IE8语法  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(OffX=5, OffY=5, Color='gray')";*/  /* For IE 8  测试效果不正确*/-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";/* For IE 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');  /*透明效果  IE8及其以下无作用*/  opacity: 0.4;  filter:alpha(opacity=40);}/*当鼠标悬停在div上时 透明度为1 */.div1:hover{opacity:1.0;filter:alpha(opacity=100);}.div2{width:200px;height: 180px;background-color: green;}.p3{font-weight: bold;/*使字体显示为加粗*/clear: both;/*表示框的两边不应该挨着浮动框*/}h1{/*标题框的左侧加入背景图像*/background-image: url("img/sousuo.png");background-position: left center;background-repeat: no-repeat;padding-left: 60px;}/*a :link,a:visited{text-decoration: none;color: blue;text-decoration: none;}a:visited{text-decoration: none;color: #666;text-decoration: none;}a:hover,a:focus,a:active{font-weight: none;color: red;} */.comment:target{background-color: yellow;}.external{background:url("img/externalLink.gif") no-repeat right top;padding-right: 10px;}/*突出显示所有外部链接*/a[href^="http:"]{background:url("img/externalLink.gif") no-repeat right top;padding:10px;}a[href^="http://yoursite.com"]{background-image:none;padding-right:0px;}/*对邮件链接进行突出显示*/a[href^="mailto:"]{background:url("img/mail.gif") no-repeat right top;padding-right:10px;}/*pixy实现翻转*/.another{display: block;width: 120px;text-decoration:none;border:1px solid #66a300;background-color:#8cca12;color:#fff;line-height: 1.4;/*使文本垂直居中*/background:url("img/buttons.png") -203px 0 no-repeat;}.another:hover, .another:focus{background-color:#f7a300;border-color: #ff7400;background-position: right top;}.another:active{background-position:left top;}</style></head><body><div class="div1"><div class="div2"></div></div><p >这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p><p  class="comment">这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p><p class="p3">这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p><p class="p3">这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 这是一个段落 </p><p><a class="external" href="#comment">这是一个链接</a></p><a class="another" href="#">这是另一个链接</a><h1>MY headline</h1></body></html>
0 0