6張思維導圖荠卷，幫你搞定html、css（css畫QQ企鵝）

先給大家看一張喜歡的圖片烛愧，緩解下心情油宜，最近敲敲代碼累的時候都會看看這幾個小活寶掂碱，每次都忍不住伸手去摸一下屏幕，可愛到爆慎冤，不由自主的就笑了出來疼燥。這個是電影《鼠來寶》系列的海報圖。不知道有沒有人喜歡這幾只會唱歌的小活寶蚁堤。

鼠來寶.jpg

這幾天看了一下之前整理的html和css的知識點醉者，發(fā)現(xiàn)很多東西都有點忘了，趁此機會违寿，復習了一下湃交，也重新整理了一下，決定放出來藤巢，也給剛入門的孩紙們一個參考搞莺，之前有簡友說圖片看不清，電腦的話可以點擊放大掂咒，或者另存為才沧，放大還是挺清楚的，手機app也可以下載圖片或者放大绍刮，其實可以下載下來温圆，地鐵上或者等人的時候，拿出手機看一看孩革，感覺還可以岁歉。

圖片比較大，建議大家看的時候先看下分支膝蜈，然后點擊放大查看具體锅移，如果有Xmind軟件的小伙伴也可以私聊我要文件

第一張 HTML基本結構與css選擇器

主要介紹html的基本結構和css選擇器，話不多說饱搏，都在圖里非剃。

基本概括.png

第二張 html常用基本標簽

html基本標簽
已分類，需要注意的部分已標注推沸”刚溃看完這一張，還有下一張鬓催。

HTML標簽.png

第三張 CSS的常用屬性

主要介紹css的屬性

css屬性.png

第四張表格和表單

表格和表單.png

第五張浮動肺素、定位、overflow

浮動宇驾、定位压怠、overflow.png

第六張補充小知識

小知識.png

最后給大家給大家詳細說一下border-radius的用法
普通用法不做詳細介紹；
其實我們設置border-radius參數(shù)的時候飞苇，最多可以設置8個參數(shù)蜗顽，每個參數(shù)的位置和代指圓角方向已經(jīng)在圖上表明；簡單明了雨让。

示意圖.jpg

下面放一張我主要用 border-radius 畫的一個小企鵝（命名比較low，可以忽略 _崔挖。）
最后的效果圖

QQ小企鵝.PNG

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>

字少捐川，圖多脓鹃，還請想學習的孩子耐心點。

任何時候不要吝嗇你的贊美古沥，喜歡就點贊拉~

最后編輯于：2020.09.25 09:40:17

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末瘸右，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子岩齿，更是在濱河造成了極大的恐慌太颤，老刑警劉巖，帶你破解...
沈念sama閱讀 206,013評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件盹沈，死亡現(xiàn)場離奇詭異龄章，居然都是意外死亡，警方通過查閱死者的電腦和手機乞封，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,205評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門瓦堵，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人歌亲，你說我怎么就攤上這事±酵裕” “怎么了陷揪？”我有些...
開封第一講書人閱讀 152,370評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長杂穷。經(jīng)常有香客問我悍缠，道長，這世上最難降的妖魔是什么耐量？我笑而不...
開封第一講書人閱讀 55,168評論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任飞蚓，我火速辦了婚禮，結果婚禮上廊蜒，老公的妹妹穿的比我還像新娘趴拧。我一直安慰自己溅漾，他們只是感情好，可當我...
茶點故事閱讀 64,153評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布著榴。她就那樣靜靜地躺著添履，像睡著了一般。火紅的嫁衣襯著肌膚如雪脑又。梳的紋絲不亂的頭發(fā)上暮胧，一...
開封第一講書人閱讀 48,954評論 1贊 283
城市分裂傳說
那天，我揣著相機與錄音问麸，去河邊找鬼往衷。笑死席舍，一個胖子當著我的面吹牛妄田，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播脚曾，決...
沈念sama閱讀 38,271評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼本讥，長吁一口氣：“原來是場噩夢啊……” “哼鲁冯！你這毒婦竟也來了？” 一聲冷哼從身側響起撞芍，我...
開封第一講書人閱讀 36,916評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤序无，失蹤者是張志新（化名）和其女友劉穎衡创，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體哟玷，經(jīng)...
沈念sama閱讀 43,382評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡巢寡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,877評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了动看。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爪幻。...
茶點故事閱讀 37,989評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡挨稿，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出篷店，到底是詐尸還是另有隱情臭家，我是刑警寧澤，帶...
沈念sama閱讀 33,624評論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布蹄殃，位于F島的核電站你踩，受9級特大地震影響诅岩，放射性物質發(fā)生泄漏吩谦。R本人自食惡果不足惜膝藕，卻給世界環(huán)境...
茶點故事閱讀 39,209評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一芭挽、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦穗慕、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,199評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽寿酌。三九已至硕蛹，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間法焰，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,418評論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工乙濒，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留颁股，地道東北人傻丝。一個月前我還...
沈念sama閱讀 45,401評論 2贊 352
代替公主和親
正文我出身青樓桑滩，卻偏偏與公主長得像，于是被迫代替她去往敵國和親运准。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 42,700評論 2贊 345

6張思維導圖，幫你搞定html废麻、css（css畫QQ企鵝）

6張思維導圖荠卷，幫你搞定html、css（css畫QQ企鵝）

第一張 HTML基本結構與css選擇器

第二張 html常用基本標簽

第三張 CSS的常用屬性

第四張表格和表單

第五張浮動肺素、定位、overflow

第六張補充小知識

推薦閱讀更多精彩內(nèi)容

6張思維導圖荠卷，幫你搞定html、css（css畫QQ企鵝）

第一張 HTML基本結構與css選擇器

第二張 html常用基本標簽

第三張 CSS的常用屬性

第四張 表格和表單

第五張 浮動肺素、定位、overflow

第六張 補充小知識

推薦閱讀更多精彩內(nèi)容

第四張表格和表單

第五張浮動肺素、定位、overflow

第六張補充小知識