一、同步异步的区别

客户端向服务端发送请求时，客户可以同时进行其他的操作。 异步
客户端向服务器发送请求时，客户不能同时进行其他的操作。 同步
涉及到对资源的操作都是异步。

二、背景

  1. <style>
  2.         *{margin: 0;padding: 0}
  3.         /*子元素不设置width,它会自动继承父元素的width -->只发生在块元素之间*/
  4.     div{
  5.             background-color: aquamarine;
  6.             height: 100px;
  7.             /*  图片设置为背景*/
  8.             background-image: url('images/logo.png');
  9.             /*background-repeat:no-repeat /repeat-x/repeat-y 
  10.             背景重复 不重复 x横向重复 y纵向重复*/
  11.             background-repeat: no-repeat;
  12.             background-position-x: center;/*横向居中*/
  13.             background-position-y: center;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div>
  19.     </div>
  20. </body>
  21. </html>

三、背景简写

 div{
            height: 100px;
            /*背景传参的简写
            background:color image repeat position*/
            background: #1Abebf url('images/logo.png') no-repeat center;
 }

四、盒子阴影

<style>
       .bg{
           width: 100px;
           height: 100px;
           background-color: red;
           /*盒子阴影
           box-shadow:offsetx offsety blur size clolr;
           */
           box-shadow: 10px 20px 5px 7px #333;
           /*第一个参数  阴影横向移动
            第二个参数    纵向西东
            第三个参数    阴影程度
            第四个参数    阴影大小*/
       }
    </style>
</head>
<body>
    <div class="bg">

    </div>
</body>
</html>

五、文本修饰

<style>
        a{
            /*text-decoration:none
            line=through 中划线
            underline    下划线
            overline     上划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">hello world</a>
</body>
</html>

六、字体

<style>
        p{
            /*字体样式*/
            font-style: italic;
            color: rgb(255,75,28);
            /*设置字体的时候会设置多个 后备机制 备胎*/
            font-family： "helvetica neue",helvetica,Arial,"Micrafoft Vahei","Hiragino Sans GB"；
            /*字体权重   加粗*/
            font-weight: 900;
        }
    </style>
</head>
<body>
    <p>问灵十三载，等一不归人。也曾剥还金丹，陈情太辛苦。那晓骷底夜食禄屠玄武，一觉梦回莲花坞</p>
</body>
</html>

七、链接样式

<style>
        /*单独使用两个或三个链接的状态时，他们的顺序是不能改变的*/
        /*链接正常状态下*/
        a:link{
            color: red;
        }
        /*链接已被访问*/
        a:visited{
            color:blueviolet;
        }
        /*链接被点击的那一刻*/
        a:active{
            color: brown;
        }
        /*鼠标悬停*/
        a:hover{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com">京东</a>
</body>
</html>

八、列表序列样式

<style>
        li{
            /*list-style: none;*/
            /*list-style-type:disc(黑点)/circle（黑中心白点）/square(黑方点)*/
            list-style-type: square;
        }
    </style>
</head>
<body>
    <ul>
        <li>魏无羡</li>
        <li>蓝忘机</li>
        <li>晓星尘</li>
    </ul>
</body>
</html>

九、表格

<style>
        table,th,td{
            border: 1px solid #333;
        }
        table{
            width:700px;
            border-collapse: collapse;
            /*边框折叠*/
            line-height: 50px;
            text-align: center;
            /*字体水平居中*/
        }
    </style>
</head>
<body>
    <table>
        /*table 表格的框架
            thead 头
            tr    行
            th    行头
            td    列*/
        <thead>
            <tr>
                <th>魔道祖师</th><th>cp</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>魏无羡</th><td>蓝忘机</td>
            </tr>
            <tr>
                <td>晓星尘</td><td>薛洋</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

十、跨列表格

/*跨列表格 colspan=“几”*/
<table>
        <th colspan="2">同道殊涂</th>
        <tbody>
            <tr>
                <td>蜜汁炖鱿鱼</td>
                <td>墨菲墨宝</td>
            </tr>
            <tr>
                <td>魔道祖师</td>
                <td>墨香铜臭</td>
            </tr>
            <tr>
                <td>死亡万花筒</td>
                <td>某某某</td>
            </tr>
   </tbody>
</table>

十一、跨行表格

*/跨行表格  rowspan="几"*/
<table>
        <tr>
        <td rowspan="3">同道殊涂</td><td>蜜汁炖鱿鱼</td><td>墨菲墨宝</td>
        </tr>
            <tr>
                <td>魔道祖师</td>
                <td>墨香铜臭</td>
            </tr>
            <tr>
                <td>死亡万花筒</td>
                <td>某某某</td>
            </tr
</table>

十二、间隔表格

<style>
/* odd为奇数 even偶数*/
    tr:nth-child(even){
        height:50px;
    }
 /*倍数选择器*/
   tr:nth-child(2n+2){
        height: 50px;
   }
</style>

十三、

<style>
        /* transiton配合hover使用
        hover的属性执行一个动画的效果*/
        img{
            margin-top: 40px;
            transition: all 0.5s;
            /*移动延迟*/
        }
        img:hover{
            margin-top: 30px;
            box-shadow: 0 0 7px 5px rgb(132, 134, 134);
            /*阴影*/
        }
    </style>