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

最新推荐文章于 2018-01-04 22:28:26 发布

吴杼恩

最新推荐文章于 2018-01-04 22:28:26 发布

阅读量1k

点赞数 1

分类专栏： css/html 文章标签： css实现小三角效果技巧英文单词数字词内断行截取指定长度字符背景透明文字不透明

本文链接：https://blog.csdn.net/qianqianyixiao1/article/details/42641745

版权

这篇博客分享了一些常用的HTML/CSS效果和技巧，包括使用reset.css进行样式重置，实现等高布局的margin应用，解决IE7及以下浏览器的垂直居中问题，背景透明但文字不透明的样式，宽高不固定div的水平垂直居中，以及如何截取指定长度的字符。此外，还介绍了如何在英文单词和数字间断行，以及利用border创建CSS小三角效果，但最后一种效果不兼容IE6/7。

摘要由CSDN通过智能技术生成

我常用的重置样式表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/>
          页面内容<b

最低0.47元/天解锁文章

吴杼恩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
一些常用的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-si
复制链接

扫一扫

专栏目录