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

<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

最新文章

  1. jquery中的$(document).ready(function() {});
  2. Xor &amp;&amp; 线性基练习
  3. B - Dividing
  4. Python 之作用域和名字空间
  5. [zt]OJ常见的Judge Status
  6. 理论与实践中的 C# 内存模型,第 2 部分
  7. LayoutInflater
  8. JQuery动态增加删除元素
  9. Spring管理Hibernate
  10. linux安装文件命令
  11. linux的 压缩与解压 命令集
  12. 使用jmeter 进行接口的性能测试
  13. P4180 严格次小生成树[BJWC2010] Kruskal,倍增
  14. [Swift]LeetCode419. 甲板上的战舰 | Battleships in a Board
  15. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
  16. .NET MVC+angular导入导出
  17. MT【215】集合中元素个数
  18. C++ Reflection Library
  19. linux 替换 sed命令 转载
  20. 守护进程函数——内部的小范围try catch 增强了 while死循环执行的 可靠性

热门文章

  1. 事件对象的属性,基于jQuery(jquery针对不同浏览器进行了兼容性的封装)
  2. Android:进程优先级
  3. 环境搭建、RF库
  4. jQuery-2.DOM---节点的复制与替换
  5. scanf连续输入字符,中间不要忘记\n
  6. 链接属性external的使用
  7. PTA寒假一
  8. 与C/C++关键字extern有关的原理
  9. sh - 脚本学习 启动/停止/重启/部署jetty crontab
  10. Microsoft Azure News(7) Azure B系列虚拟机