一些常用的html/CSS效果---小技巧

来源：互联网发布：afnetworking数据缓存编辑：程序博客网时间：2024/05/21 08:01

我常用的重置样式表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>

1 0

一些常用的html/CSS效果---小技巧

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

margin应用-等高布局

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

背景透明文字不透明

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

截取指定长度字符

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

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

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