一些常用的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>
一些常用的html/CSS效果---小技巧的更多相关文章
- css的小技巧
前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...
- 第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...
- css样式小技巧
1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...
- CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅
首页 登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...
- html/css/js小技巧实例
一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...
- CSS设置小技巧
水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...
- 【温故知新】——CSS黑魔法小技巧可以少些不必要的js
前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...
- CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...
- 分享张鑫旭大神的，纯css打字小技巧，我顺便收藏一下
CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: t ...
随机推荐
- an alternative to symmetric multiprocessing
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION 17.5 CLUSTERSAn impor ...
- C#编程利器之三:接口(Interface)【转】
C#编程利器之三:接口(Interface) C#接口是一个让很多初学者容易迷糊的东西,用起来好象很简单,定义接口,然后在里面定义方法,通过继承与他的子类来完成具体的实现.但没有真正认识接口的作用的时 ...
- 浏览器同步测试神器 — BrowserSync
Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当 ...
- Extjs 表格横坐标显示问题
在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...
- busybox rootfs 启动脚本分析(一）
imx6文件系统启动脚本分析.开机运行/sbin/init,读取/etc/inittab文件,进行初始化. 参考链接 http://blog.163.com/wghbeyond@126/blog/st ...
- *BigDecimal初识
Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处 理16位有效数.在实际应用中,需要对更大或者更小的数进 ...
- 下载pdf_不同操作系统，无法正常下载（兼容性问题）
[功能点]:下载pdf文件 [问题描述]:window上传附件,linux无法下载 [根本原因]:window中路径分割符为"\",linux中路径分割符为"/" ...
- input上传按钮 文字修改办法
解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...
- 20145320《Java程序设计》第五次实验报告
20145320<Java程序设计>第五次实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.05.06 18: ...
- 20145320《Java程序设计》第4周学习总结
20145320<Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 继承 继承作为面向对象的第二大特征,避免多个类间重复定义共同行为.即当多个类中存在相同属性和行为时 ...