H5+C3常用属性以及常用套路

html+CSS查漏补缺

1.居中

1.height-line与height相同时为垂直居中

.shortcut{
   height: 31px;
   background-color: #f1f1f1;
   line-height: 31px;
}

2.无width时水平居中

text-align:center;
/*里面的文字内容、行内块、行内元素都可以水平居中对齐*/

3.inline-block垂直居中

vertical-align: center;

4.margin:0 auto

用此方法居中时需要设定宽度或者高度

且父亲为盒，子为盒

.list-item{
    width: 320px;
    margin: 0 auto;
}

5.水平垂直居中

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

2.定位

子元素随父元素定位, 子绝父相

父元素：relative

子元素：absolute

.header{
   position: relative;
   height: 105px;
   background-color: pink;
}
.logo{
   position: absolute;
   top: 25px;
   left: 0;
   width: 175px;
   height: 56px;
   background-color: #000;
}

3.hover

鼠标经过li，a变颜色

.menu_item:hover a{
   color: #c81623;
}

4.浮动

1.inline-block

浮动的盒子可以直接给大小，不需要转换block，行内元素inline-block即可（因为行内元素不能确定大小，但是将其浮动就可以）

2.高度塌陷

父亲没有高，孩子浮动（下面的盒子会升上来），给父亲overflow：hidden或clearfix

.tab-con-list{
    overflow: hidden;
    margin-bottom: 15px;
}

解决方法2：

在塌陷的盒子后写上一个空盒子

写上clear：both；

.clear{
	clear:both;
}

5.多类名

多类名可以保证代码的复用性

<i class="mod_service_icon mod_service_ji"></i>

6.半透明

background: rgba(0,0,0,.3);

7.插入图片的结构

ul>li>a>img

<ul>
    <li>
        <a href="#"><img src="uploads/focus.jpg" alt=""></a>
    </li>
</ul>

8.电梯导航

1.固定定位

2.左移浏览器一般left：50%

3.右移版心一半+自己宽度+10px margin-left: -676px;

.fixedtool{
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
    background-color: red;

}

8.过渡

写在变动之前的盒子效果里

.bgc{
    background:url("../uploads/focus.jpg");
    height: 455px;
    transition: background 1s;
}
.focus .bgc:hover{
    background:#fff;
    height: 455px;

9.文字和块对齐并居中

display：inline-block

vertical-align：middle

10.点击后（焦点获取）变化，页码输入

.page-skip input:focus{
    height: 36px;
    width: 55px;
    border: 1px solid #6cb0ff;
    background-color: #f7f7f7;
    text-align: center;
}

11.一行文本省略号写法

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

HTML5+CSS3

1.新标签

1.基本结构标签

<header></header>
<nav></nav>
<article>
    <section></section>
</article>
<aside></aside>
<footer></footer>

2.音频视频

音频

<audio src="audio/爱情转移%20-%20陈奕迅.mp3" controls="controls"></audio>
更多属性
autoplay="autoplay"：自动播放（谷歌禁用）
loop="loop" :自动播放

视频

<video src="audio/序列2020-6-17.mp4" controls="controls"></video>
更多属性
muted="muted" 先静音即可自动播放（谷歌）
autoplay="autoplay"
poster="uploads/detail_img1.jpg" 预先显示图片

3.表单

邮箱：<input type="email">
<input type="submit" value="提交">
网址：<input type="url">
<input type="submit" value="提交">
日期：<input type="date">
<input type="submit" value="提交">
时间：<input type="time">
<input type="submit" value="提交">
数量：<input type="number">
<input type="submit" value="提交">
手机：<input type="tel">
<input type="submit" value="提交">
搜索框：<input type="search">
<input type="submit" value="搜索">
颜色选择器<input type="color">
<input type="submit" value="选择">

required="required" 不能为空
placeholder="hhh" 占位符
autofocus="autofocus" 自动光标
autocomplete="on" 需要name=username属性，记忆

上传头像：<input type="file">
属性：multiple可以多选文件

2.CS3里一个nb的选择器

1.若没有属性值的选择(按排列顺序选择)

ul li:nth-child(11){
    
}

2.若有属性值的选择

ul [class="new"]{

}

3.若有标签特色的选择

ul li:nth-of-type(2){
	第二个<li>
}

3.伪类元素

li::before{
	<li>前面补一个before的盒子
	必须有content属性
	content:'\c230';/*图片字体的转义*/
}

li::after{
	<li>前面补一个after的盒子
	必须有content属性
	content:'\c230';/*图片字体的转义*/
}

4.transform

1.可以用于图片微微动

div{
    background-color: #b1191a;
    height: 100px;
    width: 100px;
    transform: translate(100px,100px);
}

2.%

移动自身的%宽度

transform: translate(50%,50%);

3.水平垂直居中

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

4.旋转

p:hover{
    transform: rotate(60deg);
}

调旋转中心

transform-origin: 25% 25%;

5.缩放

不加单位，倍数

优点，不影响其他盒子，

且可以设置缩放点

transform: scale(2,1);

6.并行属性

将位移放在最前面

空格隔开

100%{
    transform: translate(1500px) scale(1) rotate(3600deg);
}

5.动画

0%：初始帧

100%：末帧

@keyframes move {
    0%{
        transform: translate(0px,0px);
    }
    100%{
        transform: translate(1000px,1000px);
    }
}

animation-name: move;  调用动画
animation-duration: 2s;  持续时间

案例：打字机

p{
    overflow: hidden;  屏蔽多余
    background-color: pink;
    white-space: nowrap;  强制一行显示
    font-size: 20px;
    animation:move 4s steps(100) forwards;
}

常见属性：

1.

animation:move 2s forwards infinite alternate;
animation-play-state: paused;

2.属性顺序

3.循环背景图做法

1.满足前后可以接上

2.不需要no-repeat

3.背景宽度即为图片宽度

4.向左拉扯图片宽度的距离

@keyframes move1 {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -3840px 0;

    }
}

6.3D

1.轴正负

2.translate3d

transform: translate3d(100px,100px,100px)

3.perspective

//透视写到被观察元素的父盒子上面
body{
    perspective: 200px;
}

perspective：近大远小

4.3D呈现

写给父盒子，作用子盒子保持3D效果

transform-style: preserve-3d;

1.3D导航栏

.box div:first-child{
    transform:translate3d(0,0,25px)
}
.box div:last-child{
    background-color: blue;
    transform:translate3d(0,25px,0) rotateX(-90deg);
}

各移动25px才能达到中轴线旋转

25px表示的是距离中轴线的距离