美文网首页编程prog前端开发
6张思维导图,帮你搞定html、css(css画QQ企鹅)

6张思维导图,帮你搞定html、css(css画QQ企鹅)

作者: 范小饭_ | 来源:发表于2016-12-30 19:54 被阅读10317次

    想要思维导图原图的小伙伴 ,请关注公众账号“码农范er”,输入关键字,“HTML思维导图”,获取文件链接。

    先给大家看一张喜欢的图片,缓解下心情,最近敲敲代码累的时候都会看看这几个小活宝,每次都忍不住伸手去摸一下屏幕,可爱到爆,不由自主的就笑了出来。这个是电影《鼠来宝》系列的海报图。不知道有没有人喜欢这几只会唱歌的小活宝。

    鼠来宝.jpg

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

    图片比较大,建议大家看的时候先看下分支,然后点击放大查看具体,如果有Xmind软件的小伙伴也可以私聊我要文件

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

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

    基本概括.png

    第二张 html常用基本标签

    html基本标签
    已分类,需要注意的部分已标注。看完这一张,还有下一张。

    HTML标签.png

    第三张 CSS的常用属性

    主要介绍css的属性

    css属性.png

    第四张 表格和表单

    表格和表单.png

    第五张 浮动、定位、overflow

    浮动、定位、overflow.png

    第六张 补充小知识

    小知识.png

    最后给大家给大家详细说一下border-radius的用法
    普通用法不做详细介绍;
    其实我们设置border-radius参数的时候,最多可以设置8个参数,每个参数的位置和代指圆角方向已经在图上表明;简单明了。

    示意图.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>
    

    字少,图多,还请想学习的孩子耐心点。

    任何时候不要吝啬你的赞美,喜欢就点赞拉~

    相关文章

      网友评论

      • 梦想坐元:一张我都看不清
      • 南山以北诶:求源文件,1641685360@qq.com,谢谢
      • Manned:感谢。
      • 忠于人品陷于才华败于社会:这个企鹅画的可以
      • fanli66:楼主写的很好,能分享源文件吗,我有Xmind软件。452044725@qq.com
      • coffee_e50b:十分感谢,很有用;加油
      • 游离_5241:求份原图,关注公众号回复的网盘只有一张。。。1057577586@qq.com
      • 小斌的独白:能分享份原图吗?506706326@qq.com谢谢😇😇😇😇
      • aa6739cd3cef:求楼主的源文件,我有Xmind,
        2268353204@qq.com万分感谢
      • 0c45406e8da8:看到你的文章,觉得写得很不错。我们侠课岛正好在找远程录制课程视频或图文教程的朋友,我们会给到课程的需求大纲,每一节课程需要你来详细展开写一些代码举例和讲解清楚,对经验积累和创新能力有一定的要求。有兴趣联系我。微信:zhimadt
      • 随波逐liv:438579521@qq.com谢谢楼主
      • 幽灵_0975:楼主太强了,求原图181673940@qq.com
        谢谢了!
      • 7743d5eaf55c:能来份大图吗,电脑放大看不清了。。。18210620714@163.com。。谢谢了!!
      • SoaringHeart:楼主的思维导图支持本地图片,是什么工具啊?需要破解吗
      • c908fb2adc39:求源文件,谢谢啦
        1009865728@qq.com
        范小饭_:@鱼水情啊 请关注公众账号“码农范er”,输入关键字,“HTML思维导图”,获取文件链接。
      • 她有味儿:求源文件,谢谢啦
        949161289@qq.com
      • 林寻001:求一份原图~
        linxunzyf@gmail.com
        万分感谢
      • 猫咪不会喵:总结的真好,很有条理性,能发原图吗?嘿嘿,562204948@qq.com非常感谢,楼主好人
      • 风雪棉花:同求源文件528091954@qq.com谢谢
      • wendy_22d4:Xmind在PC打开模糊,发个xmind原图,yiran1030@163.com
      • a9d1baa2f4dc:大佬能不能发一份给我 谢谢啦578066229@qq.com
      • d8f9242a37e2:jiajiazm@qq.com谢谢,非常感谢
      • 朱文龙:前端达人,也给我来一份1573511441@qq.com,谢谢大人分享,,,
      • 提小莫:自己以前用代码写过大雄和哆啦A梦,大白,这个扣扣做的好看
      • 奋斗的小老鼠:求份原图819134700@qq.com非常感谢
      • 德育处主任:总结得不错,不过图片有点模糊啊大哥
      • Jiang锋时刻:可以给我发一份吗,非常感谢。jiangfengtime@gmail.com
      • 罗茂琛:求份原图 谢谢 943284338@qq.com
      • 随波逐浪_2ff2:总结的真好,求xmind原图,599189645@qq.com,谢谢
      • ead290dc051a:写的很好, 能给我发一份这篇文章里面思维导图的xmind源文件吗?, 多谢啦373134751@qq.com
      • 前端小白菜鸟:有时间也给我个原图思维导图谢谢
        1140173234@QQ.com
      • 86fc0de65fbb:前辈,能否发一份源文件呢。最近正在巩固基础, 也想借鉴着梳理一份。522917479@qq.com 感谢~
      • 苏林晨:能来分原图吗?18720866328@163.com,谢谢^ω^
      • 水杨酸_df94:求思维导图 854252262@qq.com 谢谢楼主了
      • poneding:谢大佬。med1tator@outlook.com
      • 故事和你我:小姐姐,求思维导图的源文件🙏邮箱1842729347@qq.com
      • confly:求份原图2485795703@qq.com
      • 937f829d0764:跪求思维导图源文件 大佬···· 1669091733@qq.com
      • 风清云淡_f1d7:求原图,185441053@qq.com
      • 我是怪人我也不美:kongsiwen0818@163.com,前端小白,求原图,谢谢!!!
      • Papio_y:346540974@qq.com
        求原图,谢谢大佬!!!!
      • dogST:求文档文件姐姐!m15102092814@163.com
      • 大仙儿赐教了:求原图、753638891@qq.com谢谢:pray:
      • Lovesmilecc:能给我一份吗?liangcezh@163.com
      • kingxsx:太好了,有个整体学习框架,请作者发到guowangblog@163.com,谢谢
      • iActing:大湿,能发一份吗,想在你这的基础上添加一些我自己容易记忆的笔记,十分感谢你的共享,能直观全面的了解知识点,所学知识也不会乱了思绪,十分感谢,我邮箱是758246061@qq.com
      • b186be01a347:前辈,发份思维导图的文档源文件,发1279168423@qq.com
      • 2cf36074b348:感谢大神分享,方便的请发一份思维导图的文件给我,82660835@qq.com,先谢谢了··
      • 大仙儿赐教了:求原图753638891@qq.com
      • YungFan:非常不错 谢谢 同求源文件 yangfanvw@qq.com
      • pla2017:总结的不错,正好想看看,感谢作者。给发一份思维导图的文件吧。65755464@qq.com
      • 0a8415640868:前辈,发份思维导图的xmind文件呗,跪谢啦654101809@qq.com
      • d6786b810327:总结的太好啦,求xmind源文件,感谢啦😍2992265870@qq.com
      • akumans:可以求份xmind源文件么:flushed:,自己的css很薄弱,跪求师姐,302948432@qq.com
      • b667b17b17e1:总结的真好,能给我一份文档吗?2031063699@qq.com
      • 2b64128eec8c:就不能分享到百度云盘,链接贴出来分享给大家吗?
      • 一眸嫣然:刚要学着做这个的思维导图。楼主能给我发一下思维导图和xmind的文件吗?谢谢感激不尽,1034083448@qq.com
      • bd3b62b05509:很用心的整理,对于我这个初学者来说,有很大的帮助,好文章,非常感谢!!!
        不知是否能发份导图的源文件给我,以便更好的学习巩固,谢谢!sunnyliumr@gmail.com

      • 7f1b4f146338:学姐,能发我份思维导图么 谢啦 289474253@qq.com
      • 呆呆的地瓜:707772620@qq.com 多谢了♪(๑ᴖ◡ᴖ๑)♪
      • 我在这1987:前辈,发份思维导图的文档,跪谢了1490867533@qq.com
      • Jayzen:可否发一份思维导图的源文件,感激!645112281@qq.com
      • 顽强的兜兜君:大佬,543109047@qq.com,我也想要一份,帮助挺大的
      • 续梦情媛:你好,方便发下思维导图原件?邮箱xumengqingyuan@126.com,非常感谢!
      • Trowa:谢谢 15637261076@163.com
      • 路人_Ding:前辈,原文件能发我一份吗?1150198290@qq.com
      • ce65dc397dca:前辈,再发份思维导图的文档文件呗,电脑重新装系统没了😭😭354211498@qq.com
      • f27fa6b9eeba:现在还能求到原文件吗?340551985@qq.com
      • 软泥怪艾德:前辈,可以发一份给我吗,letuzj@qq.com
      • fenxi:跪求原图。。。2412791573@qq.com..谢谢:pray:
      • 64d816ca3e5c:求原图,410986729@qq.com,蟹蟹:sunflower:
      • d376cde3dd2e:求思维导图源文件,QQ邮箱:1020976111@qq.com
      • 46917052f523:1343797071@qq.com谢谢大佬
      • Smile丶毛宁:562538831@qq.cm感谢大佬
      • JeVole_9817:能发一份源文件吗 不太清 821577389@qq.com 谢谢了!!!
      • 4a0bd6d2da7e:hansc1993@sina.com 求原图 谢谢啦:relaxed:
      • 鸭梨山大哎:Mindnode 可以在线预览 截图不好
      • 未来未必来_b584:膜拜大神了,求原图,471439864@qq.com,谢谢
      • 毁人不倦_a1ed:求份大图。。。谢谢
        125172606@qq.com
      • ee02158a69dd:替我爸爸求源文件,谢谢!他说你做的特别好!602967798@qq.com
      • hongdeng:1938045221@qq.com先谢谢了
      • 3983bfc07fda:求xmind原文件,谢谢啦!!感谢

        19059378@qq.com
      • Chainsong32:同求原图,907987330@qq.com,谢谢
      • 96c04195e09a:keycz@qq.com,大神能发我一份思维导图文件么?多谢了,敬礼!~~
      • 煮茶忘放糖:需要,能发一份吗?1647663610@qq.com
      • 悬空的水滴:求导图,305708604@qq.com
      • 唯老:269066883@qq.com
        xind导图 谢谢
      • 439f1b090110:召唤你一下:pray: 给我发一份呗。759850134@qq.com 先谢谢了
        范小饭_:请关注公众账号“码农范er”,输入关键字,“HTML思维导图”,获取文件链接。
      • 走戈:宝宝我也求原图,1750672555@qq.com
      • 侯团长:总结真的很不错,也很想存储下来将自己的一点点观点添加进去,能否求一个源文件,504502232@qq.com 非常高兴认识你。~
      • 柿子三分糖:前辈,能发一份原图吗?有些看不清诶🤗
        1432089931@qq.com
      • 落寞寞su:楼主求图求图😬1538099886@qq.com
      • 45db2eb3d0ba:1043646173@qq.com谢谢前辈
      • 45db2eb3d0ba:有xmind,求md文件,感谢。
      • 多线程进化:求思维导图源文件,谢谢。 arm7000@outlook.com
      • ee850edf4a54:前辈 求原图 谢谢 1104971871@qq.com
      • e952036f6e39:前辈,求思维导图源文件,跪谢。。。975927930@qq.com
      • 9b24e0b9c463:前辈,能发我一份xmind文件吗?谢谢
        347420070@qq.com
      • 三季人人:能发一份脑图源文件给我吗?997501850@qq.com,谢谢啦
      • 煮茶忘放糖:求原图 nocmt01@163.com

      本文标题:6张思维导图,帮你搞定html、css(css画QQ企鹅)

      本文链接:https://www.haomeiwen.com/subject/ivomvttx.html