常见问题2：html+css效果综合整理

1、---文本框提示文字颜色--placeholder属性

<input type="text" placeholder="请输入提示文字"  />

::-webkit-input-placeholder { color:#666; }
::-moz-placeholder { color:#666; } /* firefox 19+ */
:-ms-input-placeholder { color:#666; } /* ie */
input:-moz-placeholder { color:#666; }

扩展参考链接：http://www.html5tricks.com/html5-input-css.html

---

2、圆角，文字阴影，盒子阴影

input,select,textarea{
border-radius:3px; 
-webkit-border-radius:3px; 
-moz-border-radius:3px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

 3、button按钮

display: inline-block;
outline: none;    /*框设置无*/
cursor: pointer;  /*鼠标经过时手形*/
text-align: center;  /*文字居中*/
text-decoration: none; /*无下划线*/

4、a标签

a,a:hover,a:focus{text-decoration:none}

a:link{/*未访问*/} 
a:visited {/*已访问*/}
a:hover {/*悬浮*/}
a:active {/*活动链接*/}

5、ul,li设置无样式（去原点等前缀）

ul, li { list-style:none;}

6、超出隐藏加省略号...

div{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

 7、超出隐藏加滚动

    max-height: 320px;
    overflow: auto;
    overflow-x: hidden;

 8、透明度

filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;

9、图片在DIV中垂直居中

.div{width: 80px; height: 80px;
        display:table-cell;/* for opera */
        text-align:center;
        vertical-align:middle;/* for opera */
        }
 img{width: 70px;display:inline-block;text-align: center;vertical-align:middle;}

10、控制img图片宽度和高度

img{
max-width:265px;
_width:expression(this.width > 265 ? "265px" : this.width);
max-heigth:180px;
_height:expression(this.height > 180 ? "180px" : this.height);
}

11、鼠标移动到div或元素上的效果

.ztys:hover{background:#01c4d9;color:#fff;}
.ztys:hover img{opacity: 1;}
.ztys:hover a{background:#fe7669;}
.ztys:hover p,.ztys:hover a,.ztys:hover h2{color:#fff;}

12、透明度

filter:alpha(opacity=80); /**/
opacity:0.8;

13、倾斜30度

-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);

14、清除浮动

（1） overflow + zoom方法
.fix{overflow:hidden; zoom:1;}

优点：此方法优点在于代码简洁，涵盖所有浏览器
缺点：overflow:hidden;里面的元素 要是有margin负值定位或是负的绝对定位，就会直接被裁掉，所以此方法是有不小的局限性。

（2） after + zoom方法
after：就是指标签的最后一个子元素的后面。
可以用CSS代码生成一个具有clear属性的元素，其中的 关键样式就是content。content里面的内容是”.”一个点，随便写什么东西都没有问题，比如 content:'clear both';或是content:'亿'
.clr{zoom:1;}
.clr:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

line-height:0写成height:0也是可以。这个样式清除浮动的，不会影响任何其他样式，通用性强，覆盖面广。

 15、背景定位

 .mainNav li a.on{ background:transparent url(/ou/index2011.png) no-repeat right -131px;} 
.mainNav li a.on span{ background:transparent url(/ou/index2011.png) no-repeat -683px -162px; color:#333;} 

 16、导航ul li样式中如何去掉最后一个li背景或样式

方法一：直接写行间样式

<li style="background:none;">联系我们</li>

方法二：CSS3方法设置，此方法对IE6无效。

li:last-child{background:none;}

 17、<iframe> 和 </iframe>

所有浏览器都支持 <iframe> 标签。

<iframe src ="/index.html" width="100%" height="90%" frameborder="0">
  <p>Your browser does not support iframes.</p>
</iframe>

 18、table 间隔、合并单元格

单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

colspan属性用在td标签中，用来指定单元格横向跨越的列数：colspan是“column span（跨列）”的缩写。
rowspan的作用是指定单元格纵向跨越的行数。

<table class="m_tb"  border=0 cellpadding="0" cellspacing="0">
    <tr>
        <td ></td>
    </tr>
</table>

 19、三角效果

.sanjiao{
    /* 设定div大小 */
    width:0;
    height:0;
    /* 防溢出，稳固兼容性 */
    overflow:hidden;
    /* 箭头尺寸 */
    border-width:10px;
    /* 给箭头着色，四个值分别是边框的四个方向，箭头的方向正好相反 */
    border-color:blue transparent transparent transparent;
    /* 为了兼容性，最好把四个值都补上，需要的方向设实线，其他方向虚线 */
    border-style:solid dashed dashed dashed;
}

 

转载于:https://www.cnblogs.com/wuss/p/7889068.html