一些常用的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>

截取指定长度字符

测试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>

时间： 2024-10-05 05:07:08

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

第八十四节，css布局小技巧

css布局小技巧图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; background-color: #ff4e37; position: relative; } /*插入图片的div*/ .b{ width: 384px; height: 240px; background-color: #ff4e37; overflow: hidden; } /*遮罩层div*/ .c{ width: 384px; h

css的小技巧

前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素垂直居中 1 html, body { 2 height: 100%; 3 margin: 0; 4 } 5 6 body { 7 -webkit-align-items: center; 8 -ms-flex-align: center; 9 align-items: center; 10 display:

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

首页登录注册 CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立即免费体验容器集群吧!cloud.tencent.com 之前不久,由于自己平时涉猎还算广泛,总结了一篇博客:这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已,没想到受到了大家的欢迎,有人希望能博主还能整理个 CSS 的一些黑魔法小技巧,无奈我 CSS 一直很渣,没什么干货,最近写了一个 Chro

超实用！SKETCH大师最常用的3个实战小技巧

编者按:面对Sketch这样的新应用,谁都想直接达到到高效.高产.熟练的使用水平.所以今天@窒息红Leon 就来介绍关于 Sketch 的三个小诀窍,而它们通常只能在经验丰富的 Sketch 大师身上才能看到. 译者的微信公众号:zhenlei_pd,推荐同学们关注呦.本文为译者授权优设发布,未经作者本人授权请勿转载,谢谢 :) 最舒适的是什么——是我们的舒适区! 每个人都有自己的舒适区,作为设计师,我们会有四五款应用几乎在睡梦里都可以使用,数百小时积累起来的肌肉记忆力.快捷键和令人熟悉的小怪癖

CSS设置小技巧

水平居中对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素对于不定宽块状元素,居中的方式有以下三种: 加入table标签设置 display: inline; 设置 position: relative; 和 left: 50%; 加入table标签第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>.<tr

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

前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求鼠标悬浮实现一个提示的文字,类似github的这种,如图: 想必大家都想到了伪元素 after,但是文字怎么获得呢,又不能用 JavaScript. CSS 的伪元素是个很強大的东西,我们可以利用他做很多运用,通常为了做一些效果,content:" " 多半会留空,但其实可以在里面写上

css居中小技巧

一.行内元素-水平居中在父元素的样式中添加: text-align:center; 二.定宽块级元素-水平居中所谓定宽块级元素指块级元素的宽度指定,而不是默认的100%,否则此方法无效: 代码: html: <body> <div>我是定宽块状元素,哈哈,我要水平居中显示.</div> </body> css: <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:

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

最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的,所以就要通过调试来找到要修改的地方. 在调试CSS的时候,我们一般使用Chrome.Firefox.IE等浏览器自带的工具,快捷键都为F12.但是,我们要调试如hover的样式时,鼠标放上去才会显示,鼠标一走就看不到了,没办法看清楚css样式,还有就是浏览器自带的一些hover.foucs.acti

CSS定位小技巧

CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100px;/*在原来的位置向下移动*/ 他的参照点是他原来位置Absolute 绝对定位:元素从原来的位置脱离,让出原来的空间,同时相对于他所存在的离自己最近的非标准流的盒子而言的position: absolute;/*绝对定位*/ left:40px;/*在原来的位置向右移动*/ top:100px;

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

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

margin应用-等高布局

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

背景透明文字不透明

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

截取指定长度字符

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

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

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

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