HTML基础

路径

相对路径
绝对路径

锚点

//  点击a标签跳转到p标签位置
<a href="#content"></a>
<p id="content"></p>

特殊字符

空格(&nbsp
<小于(& lt;)
>大于(& gt;)

表格

展示数据

    <!-- 表格 -->
    <table>
        <!-- 行 -->
        <tr>
            <!-- 表头单元格 居中加粗 -->
            <th>name</th>
            <th>sex</th>
            <th>age</th>
        </tr>
        <tr>
            <!-- 列 -->
            <td>zhangsan</td>
            <td>male</td>
            <td>18</td>
        </tr>
    </table>

属性

<!-- 
   border:表格边框
   width/height:表格宽高
   align：表格的对齐方式
   cellspacing:单元格的间距
   cellpadding:单元格内的padding
 -->
<table border="1" width="300" height="100" align="center"
    cellspacing="0" cellpadding="30">
    </table>

表格标题

<!-- 写在table标签里面 -->
    <caption>表格标题</caption>

合并单元格

跨行合并:rowspan
跨列合并:colspan

表格结构化分

thead tead必须要有tr标签
tbody
tfoot

列表

页面布局

无序列表：ul>li
有序列表: ol>li
自定义列表 :dl>dt+dd (名词解释)

  <ul>
       <li>无序列表</li>
   </ul>
   
   <ol>
       <li>有序列表</li>
   </ol>
   <dl>
       <dt>自定义列表</dt>
       <dd>北京</dd>
       <dd>上海</dd>
       <dd>重庆</dd>
   </dl>

表单

收集用户信息

组成

表单
提示文本
表单域

表单标签

input

  <form action="#">
        <!-- 
            type:
                text:文本
                password:密码
                radio:单选按钮
                checkbox:复选框 check="checked"选中状态
                button:普通按钮
                submit:提交按钮
                reset：重置按钮
                image图像形式的提交按钮：里面必须有src属性
                file：文件域
         -->
        <label for="">用户名：</label> <input type="text"><br>
        <label for="">密码：</label> <input type="password"><br>
        <label for="">性别：</label> 
        <label for="">男</label><input type="radio" name="sex">
        <label for="">女</label><input checked type="radio" name="sex"><br>
        <label for="">爱好：</label> 
        <label for="">睡觉</label><input type="checkbox" name="hobby">
        <label for="">打游戏</label><input type="checkbox" name="hobby"><br>
        <button>获取验证码</button> <br>
        <input type="button" value="获取验证码"><br>
        <input type="reset" value="重置内容"><br>
        <input type="submit" value="提交内容"><br>
        <input type="image" src="" value="图片形式提交内容"><br>
        <input type="file" value="上传文件"><br>
         <!-- 
             name:控件的名称，在提交表单时必须要有它才能成功
             value:表单里面默认显示的文本
          -->
        <label for="">username:</label> <input name="username" value="" type="text"><br>
        <label for="">password:</label> <input name="password" value="" type="password"><br>
        
    </form>

label标签 用于绑定一个表单元素，当点击label标签时，被绑定的过犹不及自动获得焦点

<!-- 
              1.label直接包含表单元素
              2.用for 和 id 来控制
           -->
          <label >test
              <input type="text" >
          </label><br>
        <label for="username">username:</label> <input name="username" id="username" value="" type="text"><br>
        <label for="password">password:</label> <input name="password" id="password" value="" type="password"><br>

textarea文本域 创建多行文本输入框
selected下拉框

<select name="" id="">
      <option value="">请选择</option>
      <option value="">北京</option>
      <option value="" selected>上海</option>
</select>

表单域

<form action="http://localhost:8000" method="post" > 属性我们在html中用双引号

CSS层叠样式表

HTML不能美化页面，所以有了css 作用：版面布局和外观显示样式

样式种类

行内（内联）样式

当前元素

内部样式

<tr style="background:pink;"> 当前页面

    <style>
        img {
            width: 20px;
            height: 20px;
        }
        tr {
            height: 40px;
        }
    </style>

外部样式

多个页面，可复用新建一个css文件，当前页面通过link来引入

css选择器

把我们想要的标签选择出来

基础选择器

标签选择器（相同的标签）
id选择器（只选择1个特定的标签）
类选择器（一个或多个）
通配符选择器（*所有标签）

复合选择器

 /* 复合选择器 : 交集/并集选择 */
    /* p标签中类名为two的 */
    p.two{
        color: red;
    }
    /* span 标签和 p标签类名为two的 */
    span,p.two{font-size: 50px;}

关系选择器

/* 关系选择器  */
div>p.one,span.th{
    background-color: salmon;
}
div~div{ background-color: slategray;}
div p,span.th{
    color: green;
}

属性选择器

/* 属性选择器 */
p[title]{
    background-color: hotpink;
}
p[title^=abc]{
    background-color: indigo;
}
p[title$=e]{
    color: rgb(178, 73, 226);
}
p[title*=sa]{
    font-size: 40px;
}

伪类选择器

ul>li:first-child{color: brown;}
/* 选择li的同类中最后个 */
ul>li:last-of-type{font-size: 30px;}
/* 选择奇数的孩子 */
ul>li:nth-child(2n+1){
    background-color: cornflowerblue;
}
/* 除开 li中第二个孩子 */
ul>li:not(:nth-child(2)){
    font-size: 50px;
}
/* p标签的第一个字 */
p::first-letter{
    font-size: 30px;color: black;
}
/* p标签的第一行 */
p::first-line{
    color: tomato;
}
/* p标签的最后 */
p::after{
    content: 'abc';
}

链接选择器

a:link {
    color: blue;
}
a:visited {
    color: brown;
}
a:hover {
    color: tomato;
}
a:active {
    color: red;
}

元素的分类

块级元素行内元素行内块元素

背景

background-image: url(../image//咸鸭蛋英语故事.png);
background-color: pink;
background-repeat: no-repeat;
background-attachment: scroll;
/* 可以写 left center right top center bottom 
也可以写（x,y） 坐标 ： 50px center 可以混合*/
background-position: top center;
background: pink url(../image/咸鸭蛋英语故事.png) no-repeat  center center;

css三大特性

继承性:优先级权重叠加

样式的继承：font- line- text-开头和 color 可以继承

字体

font-size:字体大小
font-family:字体类型（多个字体用逗号分隔）
- unicode字体
font-weight:字体加粗 * bold(700) * normal(400)
font-style:
- normal
- italic斜体
综合性写法 font: font-style font-weight font-size/line-height font-family的顺序来显示 font: italic 700 20px "Mircosoft YaHei";

外观属性

color:文本颜色
line-height:行高
texg-align:文本水平对齐方式
text-indent:首行文本缩进 em是倍数关系，1em是1个字的宽度。
text-decoration：文本装饰（none/underline）

 <style>
        div {
            font: normal bold 20px '宋体';
        }
        .java {
            background-color: pink;
        }
        .python {
            font-style: italic;
        }
        #link {
            text-decoration: none;
        }
        p {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="java">hello,java</div>
    <div class="c++">hello,c++</div>
    <div class="python">hello,python</div>
    <a id="link" href="">click me</a>
    <p>n an age where our technology gets smarter and smarter by the month, we often overlook the integral machinery that makes our computers so intuitive.Each and every time you press your PC’s power button, the BIOS is the first operation to load your operating system and all of the personal settings that make your computer your own.</p>
    <p>Each and every time you press your PC’s power button, the BIOS is the first operation to load your operating system and all of the personal settings that make your computer your own.</p>
</body>

盒子模型（重点）

组成：content ,padding ,border ,margin
- border:border-width border-style border-color; border:1px solid tomato;

     table {
            width: 500px;
            margin: 0 auto;
        }
        table,
        th,
        td{
            border: 1px solid red;
            border-collapse: collapse;
        }

border-top/left/right/bottom

padding

        div {
            width: 100px;
            height: 100px;
            border: 1px solid tomato;
            /* 上下左右10px */
            /* padding: 10px; */
            /* 上下5px 左右10px */
            /* padding: 5px 10px; */
            /* 上5px 左右8px 下10px */
            /* padding: 5px 8px 10px; */
            /* padding-left: 5px;
            padding-left: 8px;
            padding-bottom: 10px; */
            /* 上右下左 */
            padding: 5px 6px 7px 8px;
        }

当设置padding会撑开盒子，解决：

1.宽度 - padding 在给盒子大小
2.box-sizing: border-box; 如果没有给一个盒子指定宽度，则不会撑开盒子
- margin外边距，盒子之间的距离

   width: 100px;
   height: 100px;
/* 盒子水平居中对齐 */
   margin: 50px auto;
   /* 文本（行内/行内块）水平居中 */
   text-align: center;

块级盒子居中对齐：盒子必须指定宽度，左右边距设置为auto: margin: 0 auto; text-align:center;文本（行内/行内块）水平居中对齐

插入图片与背景图片的区别

.insert_img {
            width: 200px;
            height: 200px;
            /* 插入图片可以用padding来改变位置 */
            padding-left: 30px;
        }
        .insert_img img {
            width: 80%;
        }
        .bg_img {
            width: 400px;
            height: 200px;
            background: url('./images/宫村.png');
            /* 背景图片的显示情况  */
            background-size: contain;
            /* 背景图片padding不可以改变位置
            用background_position可以改变位置 */
            /* padding: 50px; */
            background-position: 100px;
            /* 背景图片重复不 */
            background-repeat: no-repeat;
        }

外边距合并问题（两个相邻的块元素有外边距时）
- 垂直外边距合并：取两个值中较大值--解决方法：只给一个盒子设置margin
- 嵌套关系的外边距合并（塌陷）：
  
  解决方案父元素设置一个透明的上边框。父元素设置个上padding
  
  父元素添加：overflow:hidden;

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>news</title>
    <style>
        * {
            /* 去除默认的内外边距 */
            margin: 0;
            padding: 0 ;
        }
        li {
            /* 去除li的小圆点 */
            list-style: none;
        }
        a {
            /* 去除下划线 */
            text-decoration: none;
        }
        .news {
            width: 350px;
            height: 230px;
            font-size: 14px;
            border: 1px solid #ccc;
            /* 盒子水平居中 */
            margin: 0 auto;
            /* 盒子内边距 */
            padding: 10px;
            /* 设置盒子大小包含边框 不会撑开盒子大小*/
            box-sizing: border-box;
        }
        .news h1 {
            font-size: 18px;
            border-bottom: 2px solid #ccc;
            margin-bottom: 10px;
        }
        .news li {
            height: 30px;
            line-height: 30px;
            background: url(./cc-arrow-right-square.png) no-repeat 0 7px;
            background-size: 5%;
            padding-left: 20px;
            border-bottom: 1px dashed #ccc;
        }   
        .news a {
            color: #666;
        }
    </style>
</head>
<body>
    <div class="news">
        <h1>最新文章/New Articles</h1>
        <ul>
            <li><a href="#">北京网页设计，平面设计</a></li>
            <li><a href="#">javascript 1</a></li>
            <li><a href="#">javascript 2</a></li>
            <li><a href="#">javascript 3</a></li>
            <li><a href="#">北京网页设计，平面设计</a></li>
        </ul>
    </div>
</body>
</html>

总结
- 拓展：圆角边框--border-radius:50%(xxpx);盒子阴影——box-shadow:水平阴影垂直阴影模糊半径影子大小颜色内（inset）/阴影；
- css 书写规范
  - 空格规范
  - 选择器规范（另起一行），嵌套层不大于3层
  - 属性定义分号结束

浮动(float)

布局的三种机制：

1.普通流：

块级元素行内元素

2.浮动

标准流不能满足我们的布局要求

设置浮动的元素：脱离标准流元素移动到指定位置浮动的元素是没有边距行内块，（普通的inline-block是有一定的默认边距）如果一行显示不下，会默认换行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        * {
            margin: 0 ;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
        }
        .left {
            float: left;
            width: 200px;
            height: 100%;
            background-color: purple;
        }
        .right {
            float: right;
            width: 800px;
            height: 100%;
            background-color: tomato;
        }
        .right li {
            float: left;
            width: 190px;
            height: 240px;
            margin-left: 10px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <ul class="right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>
</html>

拓展：子盒子的浮动参照父盒子对齐，不会超过父盒子的内边距，也不会和父盒子边框重叠

清除浮动

影响浮动的原因：很多时候父元素不方便给高度，是内容来撑开，但是子元素浮动会脱离文档流，父盒子高度就为0，影响下面的标准流盒子

清除浮动的本质：解决父元素因子元素浮动引起高度塌陷为0 的问题，

清除浮动方法： clear:left/right/both; （用结构来支持样式不支持做法）父级添加overflow:hidden; （内容溢出会隐藏）

.clearfix:after,
.clearfix:before {
	content: "";
    display: block;/* display: table;*/
    clear: both;
    overflow: hidden;
}
.clearfix {
    *zoom: 1; /* 支持ie6/7*/
}

ps切图：

切片工具划区域—>文件菜单—导出—导出为web—存储—选择选中的切片 图层菜单--新建基于图层的切片 —导出—导出为web—存储—选择选中的切片 cutterman插件

3.定位(position)

css属性书写顺序：布局定位自身属性文本属性其他属性

小技巧：子盒子可以比父盒子大，然后overflow:hidden;来实现装下元素不换行效果。

定位(position)

定位 = 定位模式 + 边偏移（left /right /top /bottom）

子绝父相

定位模式

静态定位(static)

没有定位

相对定位(relative)

不会脱离标准流（文档流），原来的位置还占有

绝对定位(absolute)

不保留原来的位置,以离它最近的定位（除static）的包含块（元素）为基准，来移动

固定定位(fixed)

脱离文档流，不占位置，而且跟父元素无任何关系，只认浏览器的可视窗口

居中对齐

水平：left:50%;margin-left:负自己宽度的一半

叠放顺序（z-index)

属性值越大，盒子越靠上。

定位改变display属性：inline-block

浮动元素，绝对/固定定位不会触发外边距合并问题

电梯导航：left:50%; margin-left:负（屏幕宽度一半 + 版心宽度一半）

总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            position: relative;
            top: 0;
            width: 400px;
            height: 300px;
            margin: 100px auto;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .arrow-l,
        .arrow-r {
            position: absolute;
            top: 50%;
            margin-top: -12px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #fff;
            background-color: rgba(0,0,0,.3);
            border-radius: 0 10px 10px 0;
        }
        .arrow-r {
            right: 0;
            border-radius: 10px 0 0 10px;
        }
        .circle {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -30px;
        }
        .circle li{
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin-left: 5px;
        }
        .circle .current {
            background-color: rgb(169, 14, 40);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <div class="arrow-l">&lt;</div>
        <div class="arrow-r">&gt;</div>
        <ul class="circle">
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

css高级技巧

元素显示与隐藏

display: none/block; (没留位置) （js中特效，鼠标经过，下拉框..）

visibility: hidden/visible;（保留位置）

overflow: visiible/hidden/scroll/auto; (清除浮动，内容不超出)

css用户界面样式

鼠标样式：

轮廓线:

outline: none | 0;

防止拖曳文本域

resize:none;

vertical-align垂直对齐

只对行内元素、行内块有效

vertical-align : baseline | top | middle | bottom

去除图片底部缝隙： vertical-align设置baseline外的值。设置块元素。

溢出的文字省略号显示

/* 1.不允许换行 */
white-space: nowrap;
/* 2.超出的隐藏 */
overflow: hidden;
/* 3.省略号代替超出的部分 */
text-overflow: ellipsis;

css精灵技术（重要）

减少服务器接受和发送请求的次数，提高页面加载速度

制作精灵图：1.确定图片的大小和位置，2.给盒子指定前景图片时，定位基本都是负值。

滑动门

拓展

margin负值之美

水平垂直居中，2）压住盒子相邻边框：margin-left: -1px;margin-top:-1px;(负的是border边框的大小)

鼠标移动上去要突出显示的话，我们要设置当前的盒子要定位，（因为当前的位置要保留所以设置relative）,因为margin-left设置了，当前的右边框是被遮住了。

css三角形之美

HTML5

新增的语义标签

新增的多媒体标签

audio

因为不同的浏览器支持不同的格式，我们采取解决方案是准备多个格式

<audio controls>
    <source src="media/show.mp3" type="audio/mpeg"></source>
<source src="media/show.ogg" type="audio/ogg"></source>
</audio>

video

新增的input标签

css3

类选择器属性选择器伪类选择器权重为10

伪类选择器

伪元素实现字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        p::after {
            content: '\e652';
            font-family: 'iconfont';
            font-size: 30px;
        }
 
    </style>
</head>
<body>
    <p class="icon-crame iconfont"></p>
</body>
</html>

2D转换(transform)

过渡

过渡放在本身，谁做动画谁加transition

——移动

translate移动不会影响其它元素的位置

translate的百分比是相对于自身来的:translate(50%,50%)

——旋转

div {
    width: 200px;
    height: 200px;
    background-color: tomato;
    transition: all 1s;
}
/* div鼠标绕过 但是不包含son 和ipt 的div */
div:hover:not(.son, .ipt) {
    /* 移动 */
    transform: translate(200px,200px);
    /* 旋转 */
    transform: rotate(45deg);
}
.son {
    width: 100px;
    height: 100px;
    background-color: pink;
    transform: translate(50%,50%);
}
.ipt {
    position: relative;
    margin-top: 50px;
    width: 200px;
    height: 50px;
    border: 1px solid ;
    background-color: #fff;
}
.ipt::after {
    position: absolute;
    top: 5px;
    right: 10px;
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border: 2px solid red;
    border-color: red red transparent transparent;
    transform: rotate(135deg);
}

2D转换中心点

transform-origin: 50% 50% | center center默认(可以设置方位名词和px) ｜ transform-origin: left center;

2D转换缩放scale

transform: scale(x,y)

里面写数字不带单位，是倍数的意思

只写一个参数是等比例缩放

不影响其它盒子，来实现缩放的中心点,也可以设置其它的缩放点

综合性写法

动画

先定义动画（@keyframes）

使用动画:animation

animation的简写不包含:animation-play-state

热点图案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>animation</title>
        <style>      
            .map {
                position: relative;
                width: 400px;
                height: 400px;
                background-color: pink;

            }
            .city {
                position: absolute;
                top: 300px;
                right: 50px;
            }
            .city .addr {
                top: 310px;
                right: 60px;
                z-index: 9;
            }
            .map .city div{
                position: absolute;
                top: 50%;
                left: 505;
                width: 6px;
                height: 6px;
                transform: translate(-50%,-50%);
                border-radius: 50%;
                background-color: tomato;
            }
            .map div[class^='ring'] {
                background-color: transparent;
                box-shadow: 0 0 10px rgba(240, 110, 167, 0.826);
                animation: shine 2s linear infinite;

            }
            .map div.ring2 {
                animation-delay: .5s;
            }
            .map div.ring3 {
                animation-delay: .5s;
            }
            @keyframes shine {
                50% {
                    width: 15px;
                    height: 15px;
                    opacity: 1;
                }
                100% {
                    width: 30px;
                    height: 30px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    <body>
        <div class="map">
            <div class="city">
                <p class="addr">北京</p>
                <div class="pointer"></div>
                <div class="ring1"></div>
                <div class="ring2"></div>
                <div class="ring3"></div>
            </div>
        </div>
    </body>
</html>

行走的兔子

.box {
    width: 132px;
    height: 271px;
    background-image: url(./images/day10/bigtap-mitu-queue-big.png);
    animation: walk 1s  infinite steps(3);
}
@keyframes walk {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -396px 0;
    }
}

3D转换

translate3d:(x,y,z)

perspective透视

父盒子加： perspective: xx px;

3d旋转 rotate3d

 /* z轴必须要设置了perspectiveft 才可以有效 */
  /* transform: translate3d(100px,100px,100px); */
transform: rotateX(45deg) ; 
transform: rotateY(45deg) ; 
transform: rotateZ(45deg) ;

3d呈现 tranform-style

tranform-style: preserve-3d;

.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    transition: all 2s;
    margin: 0 auto;
    perspective: 500px;
    /* 写在父级 影响的是子元素  保持3d立体空间 */
    transform-style: preserve-3d;
}
.wrap:hover {
    transform: rotateY(80deg);
}
div[class^='box'] {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: tomato;
}
div.box2 {
    background-color: purple;
    transform: rotateX(45deg);
}

.wrapper {
    margin: 100px auto;
    position: relative;
    width: 100px;
    height: 30px;
    perspective: 800px;
    transition: all 1s;
    transform-style: preserve-3d;
}
.wrapper:hover {
    transform: rotateX(90deg);
}
.front,
.back { 
    position: absolute;
    top: 0;
    left: 0 ;
    width: 100%;
    height: 100%;
    text-align: center;
}
.front {
    z-index: 1;
    background-color: pink;
    transform: translateZ(50%);
}
.back {
    background-color: purple;
    transform: translateY(50%) rotateX(-90deg);
}

练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes run {
    from {
        transform: rotateY(0);
    }
    to {
        transform: rotateY(360deg);
    }
}
.cube {
    position: relative;
    margin: 100px auto;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    perspective: 1400px;
    animation: run 10s linear infinite;
}
.cube div[class^="box"] {
    position: absolute;
    top: auto;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(./images/宫村.png) no-repeat center;
    background-size: contain;
}
.box1 {
    transform: translateZ(300px) ;
}
.box2 {
    transform: rotateY(60deg) translateZ(300px);
}
.box3 {
    transform: rotateY(120deg) translateZ(300px);
}
.box4 {
    transform: rotateY(180deg) translateZ(300px);
}
.box5 {
    transform: rotateY(240deg) translateZ(300px);
}
.box6 {
    transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<div class="cube">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</div>
</body>
</html>

浏览器私有前缀

移动端布局

移动端现在主要对webkit进行兼容

视口

浏览器页面内容的屏幕区域，

布局视口：内容可以显示全，但是内容太小

视觉视口: 网站的宽度

理想视口：布局视口的宽度和手机屏幕一样宽，添加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">

二倍图

物理像素：

屏幕显示的最小颗粒

物理像素比：

1px可以显示的物理像素点的个数，

pc端是1比1：移动端是1比多。（我们就要准备几倍图，然后缩小，他在移动端会自动放大就不会模糊）

移动端开发选择

单独移动端

支持webkit，可以放心用h5,c3

用normalize.css来初始化

流式布局（百分比）

不用给宽度，而是用百分比来指定，我们用max-width,min-width来限制它最大｜小宽度

1.文件结构
2.meta视口标签
3.设置body: width:100%; min-width:320px; max-width:640px;margin: 0 auto; font-size:14px;

flex弹性布局

less + rem + media

混合布局

移动端技术解决方案

响应式

判断屏幕宽度来改变样式

media

bootstarp

flex布局

flex操作方便，布局简单，兼容性较差。

任何的容器都可以设置为flex布局，当设置flex布局后，子元素的float,clear,vertical-algin属性将失效。

flex容器：采用flex布局的元素

flex项目：flex item

flex-direction

设置主轴的方向

justify-content:

设置主轴的子元素排列方式

flex-wrap

设置子元素是否换行

align-content

设置侧轴的子元素排列方式（多行）

align-items

设置侧轴的子元素排列方式（单行）

flex-flow

复合属性： flex-direction + flex-wrap

-----------子项的属性

flex

子项目占剩余空间的份数

align-self

控制自己在侧轴的排列方式

order

定义子项目的排列顺序

背景渐变

background: -webkit-linear-gradient(left , red, blue);

rem适配方案

作用：文字随屏幕大小变化高度可变化屏幕变化宽高等比例缩放

rem: root em 根据html字体大小来说，可以修改html里面的文字大小来整体控制

em相对于父元素字体大小

媒体查询

针对不同尺寸设置不同的样式，重置浏览器过程中可重置样式。

媒体查询一般从小到大顺序来

@media screen and (max-width:800px) {
    body {
        background-color: pink;
    }
}
//max-width:最大800px min-width:最小宽度

引入资源

根据不同的屏幕引入不同的css文件。

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

响应式Bootstrap

原理：不同屏幕下，通过媒体查询来改变布局容器的大小，来实现不同样式变化

container row

row可以取消父元素的padding，并设置高度种父级一样高 col-lg-number: number 1~12 col-md-number col-sm-number col-xs-number
列偏移number份偏移为12减已有盒子份数 col-md-offset-number

col-md-pull-number col-md-push-number

<div class='row'>
    <div class='col-lg-4' col-lg-push-8>左侧</div>
    <div class='col-lg-8' col-lg-pull-4>右侧</div>
</div>

响应式工具：实现不同屏幕下的显示与隐藏 hidden-xs:超小屏下隐藏 hidden-sm hidden-md hidden-lg

visible-xs:超小屏下显示 visible-sm visible-md visible-lg

杨永亮/HTML-CSS .gitee-modal { width: 500px !important; }

HTML基础

标签

单标签

双标签

路径

锚点

特殊字符

表格

属性

表格标题

合并单元格

表格结构化分

列表

表单

组成

表单标签

表单域

CSS层叠样式表

样式种类

行内（内联）样式

内部样式

外部样式

css选择器

基础选择器

复合选择器

复合选择器

关系选择器

属性选择器

伪类选择器

链接选择器

元素的分类

背景

css三大特性

字体

外观属性

盒子模型（重点）

浮动(float)

布局的三种机制：

1.普通流：

块级元素行内元素

2.浮动

清除浮动

ps切图：

3.定位(position)

定位(position)

定位模式

静态定位(static)

相对定位(relative)

绝对定位(absolute)

固定定位(fixed)

居中对齐

叠放顺序（z-index)

总结

css高级技巧

元素显示与隐藏

css用户界面样式

鼠标样式：

轮廓线:

防止拖曳文本域

vertical-align垂直对齐

溢出的文字省略号显示

css精灵技术（重要）

滑动门

拓展

HTML5

新增的语义标签

新增的多媒体标签

新增的input标签

css3

伪类选择器

伪元素实现字体图标

2D转换(transform)

过渡

——移动

——旋转

2D转换中心点

2D转换缩放scale

综合性写法

动画

杨永亮/HTML-CSS