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:; } /*横向等比例*/
#flex { display: flex; flex-direction: row; }
#flex > div { flex:; }

4)强制换行与不换行

/*强制不换行,文本溢出显示省略号*/
div { width: 300px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /*多行文本溢出显示省略号*/
div { display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:; 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:; } /*三角向上*/
div2 { border: transparent solid 100px; border-bottom-width: 0px; border-top: blue solid 173px; width:; }/*三角向下*/
div3 { border: transparent solid 100px; border-left-width: 0px; border-right: red solid 173px; width:; } /*三角向左*/
div4 { border: transparent solid 100px; border-right-width: 0px; border-left: blue solid 173px; width:; }/*三角向右*/

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;
}

HTML5与CSS3经典代码的更多相关文章

  1. HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  2. HTML5&CSS3经典动态表格

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  4. Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】

    <Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  5. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  6. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  8. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  9. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

随机推荐

  1. .NET开源项目

      综合类 微软企业库 微软官方出品,是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security).日志(Logging).数据访问(Data Access).配置管 ...

  2. 远程连接redis

    1.在ubuntu上的redis作为服务端,默认是打开的 在redis的配置文件redis.conf中,找到bind localhost注释掉. 注释掉本机,局域网内的所有计算机都能访问. bind ...

  3. red hat安装mysql二进制包

    数据包命名格式解释 mysql-5.7.15-linux-glibc2.5-x86_64.tar.gz 黑色粗体表示为包名称 蓝色表示linux系统二进制包 红色表示构架     1.上传mysql- ...

  4. Deep Learning 19_深度学习UFLDL教程:Convolutional Neural Network_Exercise(斯坦福大学深度学习教程)

    理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...

  5. function方法中this的用法

    jsp<select class="mokuai2" onchange="Mokuai2Change(this.value)"></selec ...

  6. 转:深入浅出UML类图(具体到代码层次)

    深入浅出UML类图 作者:刘伟 ,发布于:2012-11-23,来源:CSDN   在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML ...

  7. centos 更新linux内核

    之前一直使用centos 7系统进行开发,centos 7.0 系统自带的linux内核版本为 linx 3.10,最近开发需要使用到socket的reuse port特性,该特性在linux 3.9 ...

  8. Security » Authorization » 通过映射限制身份

    Limiting identity by scheme¶ 通过映射限制身份(这部分有好几个概念还不清楚,翻译的有问题) 36 of 39 people found this helpful In so ...

  9. OneProxy添加license

    proxy-license=XXXX-XXXX-XXXX-XXXX 放到proxy.conf中,然后重启proxy

  10. 解析json串,利用正则表达式,split

    public class SplitJson { public static void main(String[] args) {        // TODO Auto-generated meth ...