一、html5新特性
 常用语义标签:nav footer header section mark
 功能标签 video audio iframe canvas(画布和绘图功能)
 input新type:url/number/range/Date(date, month, week, time等)/search/color   
二、css3
 1 边框
 box-shadow:10px 10px 5px red;
 border-image:赋值内容;
  border-image-source 用在边框的图片的路径。 
  border-image-slice 图片边框向内偏移。 
  border-image-width 图片边框的宽度。 
  border-image-outset 边框图像区域超出边框的量。 
  border-image-repeat 
    图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
 备注:IE9+支持border-radius 和 box-shadow。
   IE11, Firefox, Opera 15, Chrome 以及 Safari 6 支持border-image 属性。
2 文本
 text-shadow:5px 5px 5px yellow;(每个位置表示的含义)
 3 字体 引入其他字体
 @font-face的使用方法
@font-face{
     font-family:"巴扎黑";
       src: url(陈代明粉笔体演示版2.otf);
}
 4 动画
)/skew()/matrix()
 备注:IE10、Firefox 以及 Opera 支持 transform 属性
  Chrome 和 Safari 需要前缀 -webkit-         Internet Explorer 9 需要前缀 -ms-
 5 动画3D
 transform-origin 允许你改变被转换元素的位置。赋值需要掌握 关键词!
transform-origin: x-axis y-axis z-axis;           //   x-axis 定义视图被置于 X 轴的何处。可能的值:
transform-style 规定被嵌套元素如何在 3D 空间中显示!!! 
 perspective 透视点 !!!
 backface-visibility 定义元素在不面对屏幕时是否可见
backface-visibility: hidden;
6 过度transition
 备注:
 IE10、Firefox、Chrome 以及 Opera 支持 transition 属性。
 Safari 需要前缀 -webkit-。
 注释:IE9 以及更早的版本,不支持 transition 属性。
 
 transition 简写属性,用于在一个属性中设置四个过渡属性。 
 transition-property 规定应用过渡的 CSS 属性的名称。 
 transition-duration 定义过渡效果花费的时间。默认是 0。 
 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。      不同的属性值需要知道.
 transition-delay 规定过渡效果何时开始。默认是 0。 
7 帧动画
eg: 
@keyframes myfirst
  {
   from {background: red;}
   to {background: yellow;}
  }
 8 流式布局 媒体查询 响应式
 流式布局:百分比布局, 所有尺寸参照父级 其中margin和padding特殊 参照宽度
 媒体查询 @media screen () and ()   响应式: viewport 统一写法
<!--移动端响应式的通用代码!-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

实例注意:

text-shadow 
水平阴影、垂直阴影、模糊距离,以及阴影的颜色
text-shadow: 5px 5px 5px #FF0000;
 
box-shadow属性适用于盒子阴影
box-shadow: h-shadow y-shadow blur spread color inset;
水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色  从外层的阴影(开始时)改变阴影内侧阴影
div{box-shadow: 10px 10px 5px #888888;} 
transform-origin: x-axis y-axis z-axis;   x-axis 定义视图被置于 X 轴的何处。
 
多列
column-count:n;
column-gap:10px;间距
column-rule: 2px solid red;  //相当于border 分隔线
 
resize: none|both|horizontal|vertical;
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。
div{resize:both;
overflow:auto;
}

Html+css3记录的更多相关文章

  1. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  2. Ant Design项目记录和CSS3的总结和Es6的基本总结

    这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...

  3. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  4. javascript、css3曲线运动示例记录

    想做一个加入购物车的曲线动效,网上找到两个demo,分别是js和css3实现的. js:https://www.cnblogs.com/wangmeijian/p/5824176.html jquer ...

  5. CSS3学习基本记录

    CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...

  6. 《响应式Web设计—HTML5和CSS3实战》 学习记录

    作者:Ben Frain 学习时间   2016/5/12 第一章   设计入门 *视口调试工具 IE:Microsoft Internet Explorer Develop Toolbar Safa ...

  7. HTML5和CSS3的一些学习记录

    1.引述块级文本的标签(blockquote): <blockquote cite="http://www.marktwainbooks.edu/"> <p> ...

  8. 记录一些html5和css3的一部分属性

    html5 标签1 video:视频 属性: src:视频的url autoplay:视频在就绪后马上播放 controls:向用户显示控件2 audio:音频 属性类似于video3 属性:drag ...

  9. css3/sass 样式记录

    css3 width: calc(50% - 10px) sass 1.奇偶行 .classNameA { background:red; &:nth-child(even) { backgr ...

随机推荐

  1. 基于OpenResty与Consul实现服务网格ServiceMesh

    一.逻辑架构 1.基于OpenResty开发智能代理: 利用其动态可编程特性,动态化配置nginx服务路由: 2.需要向OpenResty添加weibo开源的upsync服务发现模块: 3.基于con ...

  2. zipinfo - 列出关于某个ZIP压缩包的详细信息

    总览 SYNOPSIS zipinfo [-12smlvhMtTz] file[.zip] [file(s) ...] [-x xfile(s) ...] unzip -Z [-12smlvhMtTz ...

  3. Center OS 7安装 Apollo

    声明: 每个人的情况都不一样,所以大家在看教程的时候自行斟酌,最好先扫一遍,再来根据自身情况进行操作.同时,遇到的问题也可能不尽相同,要灵活处理. 了解: Apollo是从原始ActiveMQ的基础构 ...

  4. Box-Cox变换

    简介 编辑 Box-Cox变换的一般形式为: 式中    为经Box-Cox变换后得到的新变量,    为原始连续因变量,    为变换参数.以上变换要求原始变量    取值为正,若取值为负时,可先对 ...

  5. ubuntu下网页视频或音频无法播放

    有时,网页的音频或视频内容在 Firefox 下无法正常下载和播放.所需的插件没找到.过期.被阻止.和其他插件或扩展冲突,或者是内容由于某种原因被阻止.本文会帮助你解决这些问题. Flash 插件 F ...

  6. react 路由使用react-router-dom

    react 和vue一样都是使用封装history 来进行页面跳转,下面就来说一下react常用的路由插件react-router-dom这个东西在GitHub上 目前是最受欢迎的 首相还是先下载 n ...

  7. springcloud -zuul(2-执行流程及源码)

    官方图 1.Servlet zuul.servletPath默认配置为/zuul,故请求为/zuul开头的会跳过dispatcherServlet直接进入ZuulServlet,该配置可以自定义配置, ...

  8. Android中的广播Broadcast详解

    今天来看一下Android中的广播机制,我们知道广播Broadcast是Android中的四大组件之一,可见他的重要性了,当然它的用途也很大的,比如一些系统的广播:电量低.开机.锁屏等一些操作都会发送 ...

  9. java web 在tomcat没有正常输出

    目录 文章背景 目录 问题介绍 问题解决 说明 参考文章 版本记录 文章背景 调试程序时候突然发现一些位置设置的日志输出没有了,最后总算是解决了! 目录 问题介绍 本地运行时候的环境如下: windo ...

  10. NX二次开发-UFUN高亮显示对象UF_DISP_set_highlight

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_disp.h> UF_initializ ...