首页 > 代码库 > 整理一下以前学习的Html+css3复习笔记

整理一下以前学习的Html+css3复习笔记

2024-08-14 12:17:23   218人阅读

一、html5新特性
 常用语义标签:nav footer header section mark
 功能标签 video audio iframe canvas(画布和绘图功能)
 input新type:url/number/range/Date(date, month, week, time等)/search/color   
二、css3
 1 边框
 border-radius:不同的赋值方法;
 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 动画
 transform:translate(px)/rotate(deg)/scale(2)/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复习笔记


联系
我们