6张思维导图，帮你搞定html、css

姓名 连嘉玮 学号 16040120089

转自：http://www.jianshu.com/p/19cd9400a917?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq

有删节

【嵌牛导读】：html、css

【嵌牛鼻子】：基本结构、选择器

【嵌牛提问】：有什么需要学习的？

【嵌牛正文】：

这几天看了 一下之前整理的html和css的知识点，发现很多东西都有点忘了，趁此机会，复习了一下，也重新整理了一下，决定放出来，也给刚入门的孩纸们一个参考，之前有简友说图片看不清，电脑的话可以点击放大，或者另存为，放大还是挺清楚的，手机app也可以下载图片或者放大，其实可以下载下来，地铁上或者等人的时候，拿出手机看一看，感觉还可以。

第一张 HTML基本结构与css选择器

主要介绍html的基本结构和css选择器，话不多说，都在图里。

第二张 html常用基本标签

已分类，需要注意的部分已标注。看完这一张，还有下一张。

第三张 CSS的常用属性

主要介绍css的属性

第四张 表格和表单

第五张 浮动、定位、overflow

浮动、定位、overflow.png

第六张 补充小知识

最后给大家给大家详细说一下border-radius的用法

普通用法不做详细介绍；

其实我们设置border-radius参数的时候，最多可以设置8个参数，每个参数的位置和代指圆角方向已经在图上表明；简单明了。

下面放一张我主要用 border-radius 画的一个小企鹅（命名比较low，可以忽略 。）

最后的效果图

html标签部分

<div class="qie">

    <!-- 头部 -->

        <div class="tou">

            <div class="eye_1">

                <div class="eye_1_1"></div>

            </div>

            <div class="eye_2">

                <div class="eye_2_1"></div>

                <div class="eye_2_2"></div>

            </div>

            <div class="zui"></div>

            <div class="tou_2"></div>

        </div>

        <!-- 围巾 -->

        <div class="weijin">

            <div class="weijin_left"></div>

            <div class="weijin_content"></div>

            <div class="weijin_right"></div>

            <div class="weijin_bottom"></div>

            <div class="weijin_1"></div>

        </div>

        <!-- 身体 -->

        <div class="body">

            <div class="duzi"></div>

            <div class="hand"></div>

            <div class="hand_2"></div>     

        </div>

        <!-- 脚 -->

        <div class="footer"></div>

    </div>

css样式部分

      .qie{

          margin-left: auto;

          margin-right: auto;

          width: 200px;

      }

      .tou{

          height: 80px;

          width: 120px;

          background-color: #000;

          border-radius: 60px 60px 0px 0px;

          position: relative;

      }

      .eye_1,.eye_2{

          width: 20px;

          height: 30px;

          background-color: #fff;

          border-radius: 10px 10px 10px 10px/15px 15px 15px 15px;

      }

      .eye_1{

          position: absolute;

          left: 35px;

          top: 25px           

      }

      .eye_2{

          position: absolute;

          right:35px;

          top: 25px;             

      }

      .eye_1_1{

          height: 13px;

          width: 10px;

          background-color: #000;

          border-radius: 5px 5px 5px 5px/6px 6px 6px 6px;

          position: absolute;

          left: 9px;

          top:10px;

      }

      .eye_2_1{

          height: 6px;

          width: 15px;

          background-color: #000;

          border-radius: 7px 7px 0px 0px/6px 6px 0px 0px;

          position: absolute;

          left: 2px;

          top: 12px;

      }

      .eye_2_2{

          width: 13px;

          height: 6px;

          background-color: #fff;

          border-radius: 6px 6px 0px 0px/6px 6px 0px 0px;

          position: absolute;

          left: 3px;

          top: 14px;

      }

      .zui{

          height: 20px;

          width: 72px;

          background-color: #ffad00;

          border-radius: 36px 36px 36px 36px/8px 8px 12px 12px;

          position: absolute;

          left: 23px;

          top: 58px;

      }

      .tou_2{

          height: 10px;

          width: 120px;

          background-color: #000;

          position: absolute;

          top: 80px;

          border-radius: 0 0 62px 62px/ 0 0 10px 10px;

          z-index: 3;

      }

      .weijin{

          position: relative;

          z-index: 2;

      }

      .weijin_left{

          height: 0px;

          width: 0px;

          border-style: solid;

          border-width: 10px 5px;

          border-color:  transparent #e91f1f #e91f1f transparent ;

          position: absolute;

          left: -9px;

      }

      .weijin_content{

          height: 20px;

          width: 120px;

          background-color: #e91f1f;

      }

      .weijin_right{

          height: 0px;

          width: 0px;

          border-style: solid;

          border-width: 10px 5px;

          border-color: transparent transparent  #e91f1f #e91f1f ;

          position: absolute;

          left: 120px;

          bottom:0px;

      }

      .weijin_bottom{

          height: 10px;

          width: 140px;

          background-color: #e91f1f;

          border-radius: 0 0 70px 70px/0 0 10px 10px;

          position: absolute;

          left: -10px

      }

      .weijin_1{

          height: 30px;

          width: 24px;

          background-color: #e91f1f;

          position: absolute;

          left: 20px;

      }

      .body{

          height: 85px;

          width: 120px;

          background-color: #000;

          border-radius: 0 0 60px 60px/0 0 50px 50px;

          position: relative;

          z-index: 1

      }

      .duzi{

          height: 78px;

          width: 90px;

          background-color: #fff;

          border-radius: 0 0 45px 45px/0 0 45px 45px;

          position: absolute;

          left: 15px;

      }

      .hand{

          height: 54px;

          width: 20px;

          background-color:#000;

          z-index: 4px;

          position: absolute;

          left: -18px;

          top: -4px;

          border-radius: 18px 0px 18px 2px/52px 0px 28px 2px ;

      }

      .hand_2{

          height: 54px;

          width: 20px;

          background-color:#000;

          z-index: 4px;

          position: absolute;

          right: -18px;

          top: -4px;

          border-radius:0px 18px 2px 18px / 0px 52px 2px 28px           

      } 

      .footer{

          height: 16px;

          width: 120px;

          background-color: #fcb117;

          border-radius: 40px 40px 3px 3px/13px 13px 2px 2px;

          position: relative;

          bottom: 16px;

      }

如果看的不舒服，合在一起给你看

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        .qie{

            margin-left: auto;

            margin-right: auto;

            width: 200px;

        }

        .tou{

            height: 80px;

            width: 120px;

            background-color: #000;

            border-radius: 60px 60px 0px 0px;

            position: relative;

        }

        .eye_1,.eye_2{

            width: 20px;

            height: 30px;

            background-color: #fff;

            border-radius: 10px 10px 10px 10px/15px 15px 15px 15px;

        }

        .eye_1{

            position: absolute;

            left: 35px;

            top: 25px           

        }

        .eye_2{

            position: absolute;

            right:35px;

            top: 25px;             

        }

        .eye_1_1{

            height: 13px;

            width: 10px;

            background-color: #000;

            border-radius: 5px 5px 5px 5px/6px 6px 6px 6px;

            position: absolute;

            left: 9px;

            top:10px;

        }

        .eye_2_1{

            height: 6px;

            width: 15px;

            background-color: #000;

            border-radius: 7px 7px 0px 0px/6px 6px 0px 0px;

            position: absolute;

            left: 2px;

            top: 12px;

        }

        .eye_2_2{

            width: 13px;

            height: 6px;

            background-color: #fff;

            border-radius: 6px 6px 0px 0px/6px 6px 0px 0px;

            position: absolute;

            left: 3px;

            top: 14px;

        }

        .zui{

            height: 20px;

            width: 72px;

            background-color: #ffad00;

            border-radius: 36px 36px 36px 36px/8px 8px 12px 12px;

            position: absolute;

            left: 23px;

            top: 58px;

        }

        .tou_2{

            height: 10px;

            width: 120px;

            background-color: #000;

            position: absolute;

            top: 80px;

            border-radius: 0 0 62px 62px/ 0 0 10px 10px;

            z-index: 3;

        }

        .weijin{

            position: relative;

            z-index: 2;

        }

        .weijin_left{

            height: 0px;

            width: 0px;

            border-style: solid;

            border-width: 10px 5px;

            border-color:  transparent #e91f1f #e91f1f transparent ;

            position: absolute;

            left: -9px;

        }

        .weijin_content{

            height: 20px;

            width: 120px;

            background-color: #e91f1f;

        }

        .weijin_right{

            height: 0px;

            width: 0px;

            border-style: solid;

            border-width: 10px 5px;

            border-color: transparent transparent  #e91f1f #e91f1f ;

            position: absolute;

            left: 120px;

            bottom:0px;

        }

        .weijin_bottom{

            height: 10px;

            width: 140px;

            background-color: #e91f1f;

            border-radius: 0 0 70px 70px/0 0 10px 10px;

            position: absolute;

            left: -10px

        }

        .weijin_1{

            height: 30px;

            width: 24px;

            background-color: #e91f1f;

            position: absolute;

            left: 20px;

        }

        .body{

            height: 85px;

            width: 120px;

            background-color: #000;

            border-radius: 0 0 60px 60px/0 0 50px 50px;

            position: relative;

            z-index: 1

        }

        .duzi{

            height: 78px;

            width: 90px;

            background-color: #fff;

            border-radius: 0 0 45px 45px/0 0 45px 45px;

            position: absolute;

            left: 15px;

        }

        .hand{

            height: 54px;

            width: 20px;

            background-color:#000;

            z-index: 4px;

            position: absolute;

            left: -18px;

            top: -4px;

            border-radius: 18px 0px 18px 2px/52px 0px 28px 2px ;

        }

        .hand_2{

            height: 54px;

            width: 20px;

            background-color:#000;

            z-index: 4px;

            position: absolute;

            right: -18px;

            top: -4px;

            border-radius:0px 18px 2px 18px / 0px 52px 2px 28px           

        } 

        .footer{

            height: 16px;

            width: 120px;

            background-color: #fcb117;

            border-radius: 40px 40px 3px 3px/13px 13px 2px 2px;

            position: relative;

            bottom: 16px;

        }

    </style>

</head>

<body>

    <div class="qie">

    <!-- 头部 -->

        <div class="tou">

            <div class="eye_1">

                <div class="eye_1_1"></div>

            </div>

            <div class="eye_2">

                <div class="eye_2_1"></div>

                <div class="eye_2_2"></div>

            </div>

            <div class="zui"></div>

            <div class="tou_2"></div>

        </div>

        <!-- 围巾 -->

        <div class="weijin">

            <div class="weijin_left"></div>

            <div class="weijin_content"></div>

            <div class="weijin_right"></div>

            <div class="weijin_bottom"></div>

            <div class="weijin_1"></div>

        </div>

        <!-- 身体 -->

        <div class="body">

            <div class="duzi"></div>

            <div class="hand"></div>

            <div class="hand_2"></div>     

        </div>

        <!-- 脚 -->

        <div class="footer"></div>

    </div>

</body>

</html>