一些常用的html/CSS效果---小技巧
我常用的重置样式表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>
截取指定长度字符
<!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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。