html5&css3

HTML5

语义化标签

ie9需要将display改为block

<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<section>块级标签</section>
<article>
<section>内容标签下的块级标签</section>
</article>
<footer>底部</footer>

input标签

autocomplete默认为on最好关闭

<form action="" method="POST">
    邮箱：<input type = "email" required="required" />
    url: <input type = "url" placeholder="123" />
    日期：<input type = "date" />
    时间：<input type = "time" />
    数字：<input type = "number" />
    电话：<input type="tel" required />
    搜索：<input type = "search" autofocus="autofocus"  autocomplete="off" />
    颜色：<input type = "color" />
    文件：<input type = "file" multiple="multiple" />
         <input type="submit" value="提交">
</form>

video标签

src属性：添加播放文件

autoplay属性：video标签默认不会播放，需要添加一个auto play才可以自动播放

controls属性：显示控制条

poster属性：播放前的占位图片

loop属性：循环播放，一般广告视频使用

preload属性：预加载视频，于autoplay相冲

muted属性：静音

width/height：同img

viedo标签2

意义：解决浏览器之间不兼容的问题

格式：webm/mp4/ogg

<video>
    <source src="" type="cideo/webm"></source>
    <source src="" type="cideo/MP4"></source>
    <source src="" type="cideo/ogg"></source>
</video>

audio标签

src属性：添加播放文件

autoplay属性：video标签默认不会播放，需要添加一个auto play才可以自动播放

controls属性：显示控制条

loop属性：循环播放，一般广告视频使用

preload属性：预加载视频，于autoplay相冲

muted属性：静音

详情和概要

概要信息

跑马灯

direction属性：滚动方向

scrollamount属性：滚动速度

loop属性：设置滚动次数，默认为- 1，循环滚动

behavior:设置滚动类型：1、slide边界停止2、alternate边界回弹

CSS3

伪类选择器

link:从未被访问过的

visited:已经被访问过的

hover:移入移除

active：长按状态下样式

注：顺序不能变

过渡

过渡三要素

hover:过渡状态的变化

transition-property:过渡的属性值

transition-duration:过渡的持续时长

过渡属性补充

transition-delay:过渡延迟时长
transition-timing-function:
- ease（逐渐慢下来）默认
- ease-in（加速）
- ease-out（减速）
- ease-in-out(先加后减)
- linear（匀速 ）
- 当多个属性要执行过渡时，用“，”隔开即可
transition-property: width , background-color;
transition-duration: 5s,5s;
transition-delay: 2s;
transition-timing-fubction:ease-in-out
简写方式

transition：property duration timing-function delay;

例：transition:width 5s linear 2s;

多个属性简写方式：transition:width 5s linear 2s，background 5s;

所有属性简写方式：transition:all 5s

过渡使用步骤

1、基本界面布局

2、修改属性样式

3、添加元素过渡效果

2D转换

transform:rotate(45deg);|旋转（顺时针方向）|默认是围绕z轴旋转
transform:rotateX|rotateY(45deg)垂直翻转|水平翻转45°
transform:translate（100px,0px）;平移(x,y)  
transform:translate（50%,50%）向左向上移动自身位置，一般设负数用于水平居中
transform:scale(1.5,1.5);|缩放（水平,垂直）默认为1

简写

transform:rotate(45deg) scale(1,1.5) translate（100px,0px）；
注：旋转平移不是水平平移，而是根据旋转的方向进行水平平移|多个属性用” 空格 “隔开
transform-origin:200px 0px;|旋转定点标，默认为50%，50%;

透视(近大远小)

perspective：500px(透视距离)
注： 1、有了透视才能看得到水平垂直翻转的效果
    2、透视需要添加元素到祖先元素上

3D转换

区别：默认的2D转换只有宽度和高度，没有厚度效果

开启方式：transform-style:preserve-3D;

注：当你旋转90deg后，z面会朝上。transform:translateZ（100px）

阴影

盒子阴影

box-shadow: 1px 3px 5px rgba(0, 0, 0, .2);

box-shadow:水平偏移 垂直偏移 模糊度 阴影扩张 阴影颜色 引用方向
阴影颜色默认与内容一致
应用方向默认向外

文字阴影

text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色
text-shadow:2px 2px 2px ;

动画

过渡与动画区别：动画需要人为触发才会执行动画，而动画不需要

三要素：

animation-name:move;    设置动画名称

animation-duration:5s   设置动画持续时长
    
@keyframes  move{       设置动画效果
    from:{
        margin-left:0;
    }
    to:{
        margin-left:500px;   
    }
}
其他属性

animation-delay:3s;延长几秒（每次距离下一次动画执行的时间）
animation-timing-function:linear;执行速度
animation-iteration-count:3|infinite;重复次数:3次|无限次
animation-direction:normal|alternate;正常|往返动画
animation-play-state:running|paused;控制动画状态：执行|暂停
animation-fill-mode:none|forwards|backwards|both;指定动画等待和结束状态的样式:默认|等待保持第一帧|结束保持最后一帧|both
简写

animation:动画名称 持续时长 运动速度 延迟时间 执行次数 往返动画
例:animation:sport 2s linear 2s 5 alternate;
@keyframes sport{
    to{
       margin-left:0px; 
    }
    from{
        margin-left:100px;
    }
}
简写 animation:sport 2s;

渐变

线性渐变可以通过（to/deg）来修改方向径向渐变可以通过（at 位置位置）修改渐变的位置

线性渐变

background:linert-gradient(red,green);默认从上至下渐变
background:linert-gradient(to top right,red,green);向右上渐变
background:linert-gradient(45deg,red,green);顺时针方向
background:linert-gradient(to right,red 100px,green 200px,blue 300px);
注： 1、最少需要两个颜色.
    2、也可以手动指定格式：颜色 范围。除了第一个是纯色范围，后边的都是渐变色范围
径向渐变

background：radial-gradient(red，green);
background：radial-gradient(100px at 200px 100px,red,green);第一个参数指定渐变范围，渐变位置，第二个参数与线性渐变相同
计算
calc:可以用来动态计算长度值

calc(100% - 58px)

背景

尺寸属性

backround-size:100px 100px;（宽，高）

backround-size:100% 100%;设置背景宽高占元素宽高的百分比

backround-size:100px  auto;(宽度100px;高度等比拉伸)

backround-size:cover;宽度高度都拉伸到100%；

backround-size:contain；宽度高度一个拉伸到100%；

图片定位

background-origin:padding-box(默认的，图片默认定位在padding上)

background-origin:border-box(从border上开始定位)

background-origin:content-box(在内容区域开始定位)

绘制

background-clip:border-box(默认，从border上开始绘制)
background-clip:padding-box(在padding区域开始绘制)
background-clip:content-box(在内容区域开始绘制)
-webkit-background-clip:text(私有属性：背景颜色仅绘制文本)

多重背景

background:url(./img1.jpg),url(./img2.jpg);
background-position:left top ,right top;

建议多张背景图的时候背景样式分开写

注：先添加的背景图片显示在图片上边

边框

边框圆角：绘制圆角根据指定值找到圆心，根据指定值绘制圆弧

可以单独设置值，格式为：border-top-left-radios: 200px 100px;

边框图片

border-imager-source:url("./img/111.jpg")
border-image-slice:70 70 70 70 指定图片进行切割
border-image-repeat:round|repeat|stretch;设置除四个角以外图片的填充方式:环绕|平铺|拉伸
border-imager-outset:10px 30px 10px 30px ;指定边框向外移动

连写方式

border-image :url ("./img/111.jpg") 70 round

图片垂直对齐

vertical-align:设置元素垂直对齐方式
vertical-align:baseline;默认:与基线（一行文字中最短文字的底部）对齐
vertical-align:top/bottom;与盒子顶部/底部对齐
vertical-align:text-top/text-bottom;与文本顶部/底部对齐
vertical-align:middle；与中线对齐
注：与text-alight设置给父元素不同，vertical-alight设置给子元素，只对行内元素起效
background：radial-gradient(red，green);
background：radial-gradient(100px at 200px 100px,red,green);第一个参数指定渐变范围，渐变位置，第二个参数与线性渐变相同

媒体查询

概念：根据浏览器的宽度不同设置不同的样式技术

使用场景：适合比较简单的网页

注：书写顺序不能打乱，宽度根据需求来

项目使用技巧：利用css的层叠性（相同样式，后边会覆盖前边的），然后再不同的平台上修改不同的样式即可

内联格式

@media 条件{}

screen：彩屏，在移动端、平板、电脑上开发使用时

 例：@media screen and(min-width:1200px){
    //电脑样式/一般不写
}
 例：@media screen and(max-width:1199px){
    //平板样式
}
 例：@media screen and(max-width:768px){
    //手机样式
}

外链格式

<link rel="stylesheet" href="index-pc.css" media="screen and (min-width:1200px)">/电脑一般不写 
<link rel="stylesheet" href="index-ipad.css" media="screen and (max-width:1199px)">
<link rel="stylesheet" href="index-phone.css" media="screen and (max-width:768px)">

posted @ 2020-11-04 15:15 良荣十贰阅读(95) 评论(0) 收藏举报

刷新页面返回顶部

良荣十贰