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

CSS常用样式

2017-11-02 10:23 721 查看
/* CSS Document */

@charset "gb2312";
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: "Microsoft Yahei";
/*letter-spacing: 2px;*/
}

a {
color: #333333;
}

a:focus {
outline: none;
}

a:hover {
color: #E20000;
}

.width1000 {
width: 1000px;
margin: auto;
}

.width1200 {
width: 1200px;
margin: auto;
}

.blank10 {
width: 100%;
height: 10px;
}

.displaynone {
display: none;
}

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

.floatleft {
float: left;
}

.floatright {
float: right;
}

.grayborder {
border: 1px solid #CCCCCC;
}

.split-line {
width: 100%;
height: 1px;
background: #CCCCCC;
}

.center-vertical{
position: relative;
top:50%;
transform:translateY(-50%);
}

.center-horizontal{
position: relative;
left:50%;
transform:translateX(-50%);
}

.clear:after {
content: "";
clear: both;
display: block;
}

.box-shadow {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}

.animation {
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
z-index: 0;
}

.animation:hover {
-moz-transform: scale(1.12);
-webkit-transform: scale(1.12);
-o-transform: scale(1.12);
-ms-transform: scale(1.12);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
z-index: 100;
}


CSS页面内容很少时,footer也显示在底部,设置wrap的最小高度为100%

html, body, .wrap { height:100%; }
.wrap {
height:auto;
min-height:100%;
_height:100%;
background:#CCC;
color:#fff;
font-size:18px;
text-align:center;
}


CSS使用image data设置背景色

body {
background: #EFEFEF url(data:image/png;base64,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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: