我常用的重置样式表reset.css

/*===============基础信息================*/

*{border: 0;padding: 0;margin: 0;}

table {border-collapse:collapse;border-spacing:0;}

ol,ul {list-style:none;}

h1,h2,h3,h4,h5,h6 {font-size:100%;}

q:before,q:after {content:''}

input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit}

input,textarea,select {*font-size:100%}

:focus {outline: 0;}

body {line-height: 1.5; font-family:  arial, Helvetica, sans-serif; color: #2a2b2b;font-size: 14px;background: #f1f1f1;}

a,button{cursor:pointer;}

html button::-moz-focus-inner{border-color:transparent!important;}

a{outline:none; text-decoration:none;transition: all 0.4s ease-out 0s;}

a:hover{transition: all 0.4s ease-out 0s; text-decoration:none;}

*{word-wrap:0.01em;}

img{vertical-align:top; display: inline-block;}

i, b, em { font-style:normal;}

/*=================功能===============*/

.clearfix{ clear:both; height:0px; font-size: 1px; line-height: 0px;overflow:hidden; }/* 清除浮动*/

.left{ float: left;} .right{ float: right;} .center{ margin:0 auto; text-align:center;}

.show{ display:block;/* visibility:visible;*/}.hide{ display: none;/* visibility:hidden;*/}

.block{ display:block;} .inline{ display:inline;}

margin应用-等高布局

兼容IE6

主要样式

padding-bottom:10000px;margin-bottom:-10000px;

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body{margin:0;}

.wrap{ width:900px;margin:0 auto;overflow:hidden;}

.left{width:200px;background:Red;float:left;padding-bottom:10000px;margin-bottom:-10000px;}

.right{width:700px;background:blue;float:right;padding-bottom:10000px;margin-bottom:-10000px;}

</style>

</head>

<body>

<div class="wrap">

	<div class="left">

    	  页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

    </div>

    <div class="right">

    	  页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

           页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

           页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>   页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

          页面内容<br/>

    </div>

</div>

</body>

</html>

效果：

垂直居中，ie7和以下不支持

将父亲元素设置为display: table;需要垂直居中的元素设置为display: table-cell;vertical-align: middle;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>Document</title>

</head>

<body>

	<div style="display: table;height: 500px;width: 300px;background-color: red;">

    <p style="color: #000;display: table-cell;vertical-align: middle;">

        居中居中

    </p>

</div>

</body>

</html>

效果：

背景透明文字不透明

所需样式

兼容ie6

background:rgba(0, 0, 0, 0.3)!important;filter:alpha(opacity=30);background:#000;

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>背景透明文字不透明</title>

<style>

body{background:#155FAD;white-space:pre-wrap;font-size:20px;color:#fff;font-family:"微软雅黑";}

.demo{background:rgba(0, 0, 0, 0.3)!important;filter:alpha(opacity=30);background:#000;height:400px;font-size:24px;color:#fff;padding:20px;}

.demo p{position:relative;}

</style>

</head>

<body>

<div class="demo">

	<p>背景透明文字不透明</p>

</div>

.demo{background:rgba(0, 0, 0, 0.3)!important;filter:alpha(opacity=30);background:#000;height:400px;font-size:24px;color:#fff;padding:20px;}

<br>

.demo p{position:relative;}

</body>

</html>

效果

宽高不固定的div水平垂直居中

测试ie6通过

一般是弹框和后台登陆页面用的哦

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

html,body{height:100%;margin:0;}

#vc { display:table; background-color:#C2300B; width:100%; height:100%; overflow:hidden;}

#vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }

#content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }

</style>

</head>

<body>

<div id="vc"><div id="vci"><div id="content">

我们垂直居中了，我们水平居中了

</div></div></div>

</body>

</html>

截取指定长度字符

测试ie6通过
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>截取指定长度字符</title>

<script>

function SetSub(str,n){

   var strReg=/[^\x00-\xff]/g;

   var _str=str.replace(strReg,"**");

   var _len=_str.length;

   if(_len>n){

     var _newLen=Math.floor(n/2);

     var _strLen=str.length;

     for(var i=_newLen;i<_strLen;i++){

         var _newStr=str.substr(0,i).replace(strReg,"**");

         if(_newStr.length>=n){

             return str.substr(0,i)+"...";

             break;

        }

     }

   }else{

     return str;

   }

}

window.onload=function(){

	var subStr=document.getElementById("text").innerHTML;

	var newStr=SetSub(subStr,250); //中文e...

	document.getElementById("text").innerHTML=newStr;

} 

</script>

</head>

<body>

<p id="text">一个种植界的哥德巴赫猜想：盐碱地里，用海水种水稻——变成了现实。羊城晚报记者从广东省湛江市有关部门获悉，一种可在海水里生长并长出稻谷，耐盐、耐淹能力强的海水稻，10月18日经农业部等海水稻专家现场考察，被一致认为是一种特异的水稻种质资源，具有很高的科学研究和利用价值。专家建议国家加强对海水稻资源的全面保护，并大力支持开展系统研究。海水稻发现者之一的陈日胜，为了海水稻繁育</p>

</body>

</html>

效果

技巧英文单词 数字词内断行

测试ie6通过

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

p{width:200px;border:1px solid #000; font:14px/24px Arial; word-break:break-all;}

</style>

</head>

<body>

<p>adsadasdsad asdasdasdasdsadasd asdasdas asdasdasd 11111111111111111111111111111111111111 sadasdasd asdsadsad asdasdsad</p>

</body>

</html>

效果

多行文字实现垂直居中

测试ie6通过

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> 多行文字实现垂直居中 </title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style type="text/css">

 body { font-size:12px;font-family:tahoma;}

 div#wrap {

  display:table;

  border:1px solid #FF0099;

  background-color:#FFCCFF;

  width:760px;

  height:400px;

  *+position:relative;

  overflow:hidden;

 }

 div#subwrap {

  vertical-align:middle;

  display:table-cell;

  *+position:absolute;

  *+top:50%;

 }

 div#content {

  *+position:relative;

  *+top:-50%;

 }

  </style>

 </head>

 <body>

 <div id="wrap">

  <div id="subwrap">

   <div id="content"><pre>现在我们要使这段文字垂直居中显示！

 div#wrap {

  border:1px solid #FF0099;

  background-color:#FFCCFF;

  width:760px;

  height:500px;

  position:relative;

 }

 div#subwrap {

  position:absolute;

  border:1px solid #000;

  top:50%;

 }

 div#content {

  border:1px solid #000;

  position:relative;

  top:-50%;

 }</pre>

  </div>

 </div>

</div>

 </body>

</html>

效果：

border应用-css实现小三角效果

不兼容ie6/7

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

span{margin:10px;}

.arrow-up {

    width: 0;

    height: 0;

    border-left: 5px solid transparent;  /* 左边框的宽 */

    border-right: 5px solid transparent; /* 右边框的宽 */

    border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */

    font-size: 0;

    line-height: 0;

}

.arrow-down {

    width: 0;

    height: 0;

    border-left: 20px solid transparent;

    border-right: 20px solid transparent;

    border-top: 20px solid #f00;

    font-size: 0;

    line-height: 0;

}

.arrow-left {

    width: 0;

    height: 0;

    border-bottom: 15px solid transparent;  /* 下边框的高 */

    border-top: 15px solid transparent; /* 上方边框的高 */

    border-right: 10px solid blue; /* 右边框的长度|宽度，以及背景色 */

    font-size: 0;

    line-height: 0;

}

.arrow-right {

    width: 0;

    height: 0;

    border-bottom: 15px solid transparent;  /* 下边框的高 */

    border-top: 15px solid transparent; /* 上方边框的高 */

    border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */

    font-size: 0;

    line-height: 0;

}

</style>

</head>

<body>

<span class="arrow-up"></span>

<span class="arrow-down"></span>

<span class="arrow-left"></span>

<span class="arrow-right"></span>

不支持ie6、7

</body>

</html>

一些常用的html/CSS效果---小技巧的更多相关文章

  1. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  2. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  3. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  4. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  5. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  6. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  7. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

  8. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  9. 分享张鑫旭大神的，纯css打字小技巧，我顺便收藏一下

    CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: t ...

随机推荐

  1. java 中设置session失效时间

    程序中session都有一个默认的过期时间,其中tomcat中的默认时间为30分钟,根据需要我们可以去手动设置session的过期时间,以下是设置session的过期时间的三个方法:1.在tomcat ...

  2. 蓝牙—RFCOMM协议

    RFCOMM是一个简单的协议,其中针对9针RS-232串口仿真附加了部分条款.可支持在两个蓝牙设备之间同时保持高达60路的通信连接.RFCOMM的目的是针对如何在两个不同设备上的应用之间保证一条完整的 ...

  3. CSS 伪元素&伪类

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行添加特殊 ...

  4. 猿题库 iOS 客户端架构设计-唐巧

    序 猿题库是一个拥有数千万用户的创业公司,从20013年题库项目起步到2015年,团队保持了极高的生产效率,使我们的产品完成了五个大版本和数十个小版本的高速迭代. 在如此快速的开发过程中,如何保证代码 ...

  5. CentOS6.5安装配置SVN

    安装SVN软件包[root@localhost ~]# yum install subversion#确认是否已安装svn模块[root@localhost ~]# cd /etc/httpd/mod ...

  6. 数据库的Instance/Crash Recovery

    crash recovery是指单实例数据库发生了failure.或者rac数据库中的所有实例都发生了failure后进行的recovery.rac数据库crash后,rac中第一个重启启动的inst ...

  7. navicat----------局域网数据库：如何让navicat链接局域网其他的数据库。

    1.方法很简单了,找到被链接的数据库,打开以后有一个自带的mysql数据库,打开以后下面有一个user表,把里面的第一条数据的第一个字段改成% 百分号,然后保存,重启服务器,搞定 2.如果是linux ...

  8. Java集合---ArrayList的实现原理

    目录: 一. ArrayList概述 二. ArrayList的实现 1) 私有属性 2) 构造方法 3) 元素存储 4) 元素读取 5) 元素删除                 6) 调整数组容量 ...

  9. HTML5 webSQL 中查询结果集 result.rows.item 的用法

    加入查询回调函数如下: function(tx,result){ var len = result.rows.length; var recordset = result.rows.item; ){ ...

  10. 解决redmine写操作很慢的问题

    以前刚开始时用redmine是直接使用它的webrick服务器来运行的,后来为了提高性能,采用nginx+passenger的方式来驱动redmine,访问速度快了不少,但是在新建问题或更新问题时变得 ...