HTML5与CSS3经典代码

1）全屏背景

body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }

2）图片缩放居中

.div{width:100px;height:100px;position:relative;}
.div img{max-height: 100%; width: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

/*头像一般左右撑开*/

.div{width:100px;height:100px;position:relative;border-radius:50%; overflow:hidden;}
.div img{width: 100%; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

3）flex等比例布局

/*垂直等比例*/
#flex { display:flex; }
    #flex > div { flex:1; }

/*横向等比例*/
#flex { display: flex; flex-direction: row; }
    #flex > div { flex: 1; }

4）强制换行与不换行

/*强制不换行，文本溢出显示省略号*/
div { width: 300px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/*多行文本溢出显示省略号*/
div { display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow: hidden; }

/*强制英文换行，以字母作为换行依据*/
div { word-break:break-all; }

/*强制英文换行，以单词作为换行依据*/
div { word-wrap:break-word; }

5）圆与三角

　　A）正圆

div {width: 100px; height: 100px; border-radius: 50%;}

　　B）三角（本例接近正三角）

div1 { border: transparent solid 100px; border-top-width: 0px; border-bottom: red solid 173px; width: 0; } /*三角向上*/
div2 { border: transparent solid 100px; border-bottom-width: 0px; border-top: blue solid 173px; width: 0; }/*三角向下*/
div3 { border: transparent solid 100px; border-left-width: 0px; border-right: red solid 173px; width: 0; } /*三角向左*/
div4 { border: transparent solid 100px; border-right-width: 0px; border-left: blue solid 173px; width: 0; }/*三角向右*/

6）1px的点

div { height: 1px; width: 1px; line-height: 1px; overflow: hidden;}

7）上标与下标，高亮

<sup>上标</sup><sub>下标</sub><mark>高亮</mark>

8）首字符样式

div:first-letter { font-size: 30px; color:red;}

9）动画效果（规定时间内按要求变化）

<div class="dong">我的英文名字叫：Yimi</div>

.dong {animation: act_id 5s infinite; -webkit-animation: act_id 5s infinite; animation-timing-function: linear;}

　　A）定义起始：顺滑360度自转

@keyframes act_id {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@-webkit-keyframes act_id{同上}

　　B）定义间隔：顺滑左右跳动

@keyframes act_id {
　　0% { margin-left: 0px; }
   10% { margin-left: 200px; }
   40% { margin-left: 220px; }
   50% { margin-left: 400px; }
   60% { margin-left: 220px; }
   90% { margin-left: 200px; }
   100% { margin-left: 0px; }
}

@-webkit-keyframes act_id{同上}

10）简单的图标（更多图标，请访问:http://nicolasgallagher.com/pure-css-gui-icons/demo/#non）

　　A）电话（三块合一）

#phone { width: 15px; height: 15px; border-left: 2px solid red; border-radius: 20%; position: relative; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); margin-left: 2px; display: inline-block; }
#phone:before, #phone1:after { width: 3px; height: 4px; background: red; border-radius: 20%; content: ""; position: absolute; }
#phone:before { left: 0px; top: 0px; }
#phone:after { left: 0px; top: 11px; }

<div id="phone"></div>

　　B）电话（一块搞定）

#phone { position: relative; }
#phone:before { content: ""; position: absolute; left: 5px; width: 4px; height: 8px; border-width: 5px 0 5px 2px; border-style: solid; border-color: #c55500; background: transparent; -webkit-border-radius: 3px 0px 0px 3px / 5px 0px 0px 5px; -moz-border-radius: 3px 0px 0px 3px / 5px 0px 0px 5px; border-radius: 3px 0px 0px 3px / 5px 0px 0px 5px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }

<div id="phone"></div>

　　C）展开与收缩

#plus,#less { width: 9px; height: 9px; border: 1px silver solid; margin: 10px; position: relative;display: inline-block; }
#plus:before { content: '+'; color: silver; position: absolute; top: -3px; left: 0px; height:15px; line-height:15px;}
#less:before { content: '-'; color: silver; position: absolute; top: -5px; left: 1px; height:15px; line-height:15px;}

<div id="less"></div>
<div id="plus"></div>

11）背景色渐变(向上，向右，向下，向左)

.bg{background: linear-gradient(to top, #333, #ccc);
background: -webkit-repeating-linear-gradient(to right, #333, #ccc); 
background: -o-repeating-linear-gradient(to bottom, #333, #ccc); 
background: -moz-repeating-linear-gradient(to left, #333, #ccc);}

12）放大（缩小）效果

div{ transform: scale(1.2); } --1.2倍

13）元素倾斜

divX{-webkit-transform: skewX(45deg); transform: skewX(45deg);}
divY{-webkit-transform: skewY(45deg); transform: skewY(45deg);}
divXY{-webkit-transform: skew(45deg,45deg); transform: skew(45deg,45deg);}

14）边框不计算高度

div{border: 1px solid #000;box-sizing: border-box;}

15）页面横屏

html { width: 100vmin; height: 100vmax; }
body { width: 100vmin; height: 100vmax; }
div { width: 100vmax; height: 100vmin; transform-origin: top left; transform: rotate(90deg) translate(0,-100vmin); }

16）content内文字换行

div:empty:before{
  content: "暂无数据a您可以去首页添加";
  white-space: pre;
}

17）棋盘(类似黑白相间)

div{
　　background:#fafafa;
　　background-image:linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 0,transparent 75%,rgba(0,0,0,.2) 0),linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 0,transparent 75%,rgba(0,0,0,.2) 0);
　　background-size:20px 20px;
　　background-position:0 0,10px 10px;
}