!!!常用CSS代码块

 

 

图片排满一行。左右两端无间隙。

<style type="text/css">
.img_abc{float:left;width:30%;margin-left:5%;}
.img_abc:first-child{margin-left:0}
.body92{margin-left:4%;margin-right:4%;}
</style>
<div class="body92">
    <img src="1408587440309.png" class="img_abc">
    <img src="1408587445662.png" class="img_abc">
    <img src="1408587456115.png" class="img_abc">
</div>

 

 

用图片替代：文件上传按钮

<div class="file-box">
<input type="file" id="focusPic" name="focusPic" class="fileupload-hidden" onchange="showCurrentImg('focusImg')">
<img src="http://images.csdn.net/20140820/up.jpg" class="img-file-btn">
</div>
<style type="text/css">
.file-box{position: relative;width: 120px;height: 90px;overflow: hidden;border: 1px solid #F0F0F0;}
.fileupload-hidden {width: 120px;height: 90px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;z-index: 2;margin: 0;padding: 0;font-size: 1000px;opacity: 0;filter: alpha(opacity=0);}
.img-file-btn {position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;}
</style>

 

div居中

.main{clear:both;width:1000px;margin:0 auto;}    /*常规写法*/
.main{clear:both;width:1000px;margin-left:auto;marght-right:auto;}  /*改良写法*/

 

屏幕居中

<style type="text/css">
div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;background:#f90;line-height:150px;text-align:center;}
</style>
<div id="dd">屏幕居中</div>

 

两列：左边一列宽200px，右边一列充满剩余宽度

<style type="text/css">
div{border:1px solid #000;}
.box{overflow:auto;margin:0 auto;width:1000px;}
.left{width:200px;float:left;}
.right{margin-left:200px;}
</style>
<div class="box">
    <div class="left">的的的的的的的的的</div>
    <div class="right">啊啊啊啊啊啊啊啊啊啊</div>
</div>

 

字体效果

<style type="text/css">
h1{margin:20px 0 30px 0;padding:0;line-height:115px;font-size:120px;font-weight:bold;text-shadow:0 0 15px rgba(0,0,0,0.5);}
</style>
<div style="background:#069;">
<h1 style="color:#FFF;">WATCH</h1>
</div>
<div style="background:#FFF;">
<h1 style="color:#000;">WATCH</h1>
</div>

 

在链接的前后，用css添加内容

<style type="text/css">
a:before{content: "["attr(href)"]";    color:#f90;font-weight:bold;}
a:after{content: "[点击链接]";        color:#f90;font-weight:bold;}
</style>
<a href="http://www.w3school.com.cn" target="_blank">在链接的前后添加内容</a>

 

 

http://sandbox.runjs.cn/show/lvgpes2k 　　利用HTML5 的Datalist 元素实现输入提示　　2014-9-15