!!!常用CSS代码块

时间：2023-11-24 10:39:44

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

<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

相关文章