您的位置：首页 > Web前端 > CSS

常用CSS代码

2016-06-27 13:46 363 查看

浏览器用高速模式渲染网页

<meta name="renderer"content="webkit">

设置浏览器默认文档模式
<metahttp-equiv="X-UA-Compatible"content="IE=edge">

背景自适应大小代码

.bg{

background:url(../images/zonglan_bg_07.png) no-repeat;

-moz-background-size:90% 60%;

  -webkit-background-size:90% 60%;

-o-background-size:90% 60%;

  background-size:100% 100%;

}
由于<body>标签的图片不能够拉伸，

解决办法：

1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> 3、body的background属性去掉，要不然会被遮住

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>
2、用css背景图的方法，并且将背景图固定，不随滚动条滚动。这个方法更好：
body{ background:url(images/bg.jpg) no-repeat;background-attachment:fixed;background-size:100% 100%;}

a:focus,input:hover,button:hover,input[type='button']:hover{ outline:none;}

渐变背景纯css代码

.header {
background: #65abd3;
background: -moz-linear-gradient(top,#65abd3 0,#3d95c8 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#65abd3),color-stop(100%,#3d95c8));
background: -webkit-linear-gradient(left,#65abd3 0,#3d95c8 100%);
background: -o-linear-gradient(top,#65abd3 0,#3d95c8 100%);
background: -ms-linear-gradient(top,#65abd3 0,#3d95c8 100%);
background: li
4000
near-gradient(to bottom,#65abd3 0,#3d95c8 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#65abd3',endColorstr='#3d95c8',GradientType=1);*/
border-bottom: 2px solid #ee254d;
margin-bottom: 0;
height:70px;
position:relative;

}

字间距

letter-spacing:2px;

行下划线 / 下虚线

border-bottom:1px solid #CCC;

border-bottom:1px dashed #CCC;

分割线代码

<div class="hr"></div>

.hr {

height: 0px;

font-size: 0px;

line-height: 0;

border: none;

clear: both;

border-bottom: #fff solid 1px;

border-top: #CFCFCF solid 1px;

margin: 0 auto;

}

是用背景图定位法，显示背景图片里面的一个小图片

#shaixuanid li{

color:#5a5a5a;

float:left;

position: relative;

height:20px;

line-height:20px;

display:block;

border:#dcdcdc 1px solid;

padding:1px 20px 0px 8px;

list-style-type:none;}

#shaixuanid li b {

display: block;

position: absolute;

right: 6px;

top: 7px;

overflow: hidden;

width: 7px;

height: 7px;

background: url(../images/20130606B.png) no-repeat -37px -62px;

cursor: pointer;

}//用的是CSS
background-position 属性

css3 boder-image属性

http://www.wqcms.com/html/c31/2012-06/3381.html

新闻列表

.list li {

width: 100%;

height: 30px;

line-height: 30px;

overflow: hidden;

white-space: nowrap;

border-bottom: #CCC dashed 1px;

_zoom: 1;

_vertical-align: bottom;

background-repeat: no-repeat;

background-position: 4px center;

//强制不换行，超出部分省略号显示
white-space: nowrap;text-overflow:ellipsis; overflow:hidden;

}

兼容IE7的写法
ul li{ background:url(../images/list01.png) no-repeat left; padding-left:18px; line-height:30px; height:30px; display:block; white-space:nowrap;text-overflow:ellipsis;overflow:hidden;vertical-align:middle;}
ul li a{ *float:left; *white-space:nowrap;*text-overflow:ellipsis; *overflow:hidden;}

半透明

.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}

body { font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif; } p { line-height: 1.5; }

邮箱链接：
<a href="mailto:1233333@163.com">1322333@163.com</a>

li的选中元素一般写法：
ul li a.hover{}

*{
box-sizing:border-box;
-moz-box-sizing:border-box; /*
Firefox */
-webkit-box-sizing:border-box; /*
Safari */
}

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

当超链接带背景图的时候，最好不要设置访问后的颜色。a:visited{color:#333;}

文字纵向排版，包括英文和日文。
p{
writing-mode: tb-rl;
}

文章中插入网页代码

<TEXTAREA style="width:600px; height:300px;" >

<div style="width:300px;height:200px;border:1px dashed red" ></div>

</TEXTAREA>

<xmp>

<div style="width:300px;height:200px;border:1px dashed red" >的风大放送<table></table></div>

</xmp>

----------------清除浮动------------------------

/* For modern browsers */

.cf:before,.cf:after {content:"";display:table;height:0; }

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

/* 图片自适应调整并解决图片缩放的失真问题*/

img{ max-width:100%; height:auto;border:none; interpolation-mode: bicubic;}

/* 文字居中 */

.txt-center{ text-align:center;}

.txt-justify{ text-align:justify; text-justify:inter-ideograph;}

/* 自动换行 */

.word-auto{word-wrap: break-word;word-break: normal;}

/* 自动居中 */

.mg-auto{ margin-left:auto; margin-right:auto; position:relative;}

/* clearfix */

.clearfix:after{ visibility: hidden;display: block;font-size: 0;content:" ";clear: both;height: 0;}

.clearfix{ *zoom:1;}

li:nth-child(odd) 选择奇数li标签

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航