用html画一个企鹅图案的代码,6张思维导图,帮你搞定html、css(css画QQ企鹅)
想要思维导图原图的小伙伴 ,请关注公众账号“码农范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标签部分
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;
}
如果看的不舒服,合在一起给你看html>
Document
.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;
}
字少,图多,还请想学习的孩子耐心点。
作者:范小饭_
链接:https://www.jianshu.com/p/19cd9400a917
用html画一个企鹅图案的代码,6张思维导图,帮你搞定html、css(css画QQ企鹅)相关推荐
- 思维导图网页版、临时使用推荐工具——画图本
日常生活和工作中,我们经常需要通过思维导图和流程图的形式来理清思路,今天介绍一个免费的网页服务 -- 画图本. 画图本是一个可以免登录就能任意画脑图.流程图的网页服务,并具有以下特点: 1 免费,界面 ...
- 思维导图使用技巧:手把手教你怎么画思维导图 #CSDN博文精选# #系统化学习# #IT技术# #知识图谱#
大家好~我是小C,又见面啦!"文章过滤器"精选大咖干货.助力学习之路. <5天20篇CSDN精选博文带你掌握系统化学习方法>专栏将挑选有关"系统化学习方法&q ...
- 计算机英语第一张思维导图,小学语文、数学、英语思维导图模板集合,怎么画好看的思维导图...
原标题:小学语文.数学.英语思维导图模板集合,怎么画好看的思维导图 小学的孩子成绩不理想.注意力不集中,使很多家长苦恼.爱玩.好动是每个孩子的天性,面对枯燥的文字,缺乏形象化的内容难以引起孩子的学习兴 ...
- 你真的会画思维导图吗?猿辅导教你3分钟画出一张思维导图
思维导图的使用范围可以说是非常广泛了:上课看书时,来一张图做笔记:考试复习时,来一张图串联一下知识点:工作时,来一张图做计划:思路凌乱时,来一张图做整理--总之,思维导图可以应用到学习.工作.生活中的 ...
- 画思维导图的注意事项有哪些?怎样画思维导图?
思维导图的绘制时围绕中心主图进行展开的,并且在绘制的过程中要注意上下级节点的位置从而进行搭建,思维导图的优势有很多,他可以培养我们的思维能力,逻辑能力以及创造能力,这些都是在绘制过程中培养出来的,那在 ...
- 思维导图怎么画:多方法绘制自己喜欢的思维导图技巧
我们在上班或整理思路的时候,可能会绘制思维导图以便更好地了解整个流程的走向.但是在绘制流程图的时候,很多用户都不知道应该如何绘制才好.那么,接下来就要为大家讲讲怎么通过多个方法来绘制思维导图. 一.直 ...
- 6张思维导图搞定html、css(画QQ企鹅)
第一张 HTML基本结构与css选择器 主要介绍html的基本结构和css选择器,话不多说,都在图里. 基本概括.png 第二张 html常用基本标签 html基本标签 已分类,需要注意的部分已标注. ...
- Linux内核代码 分析大纲思维导图
- 用计算机软件绘制思维导图和手绘思维导图,原来手绘思维导图的好处这么多,你还在用软件画导图吗?...
原标题:原来手绘思维导图的好处这么多,你还在用软件画导图吗? 思维导图在快速阅读和记忆训练中具有重要作用.通常能否手绘思维导图成为了是否学会思维导图的标志. 有些初学者会说,现在科技发展了,有很多思维 ...
最新文章
- adf的主要功能之一是_浅析高性能纤维纸基功能材料
- c++socket模型之我见
- linux c 复制拷贝文件
- 安装nvm-nvm: command not found
- Pandas必知必会的使用技巧,值得收藏!
- hibernate之生成的和默认的属性值(使用generated刷新实体) .
- php轻博客社区视频教程,轻博客主题 - SEO极致优化的ZBLOG轻博客主题
- c#语言规范所在文件夹,C#规范整理·语言要素
- 【POJ2411】Mondriaan's Dream
- 【面试经典】redis 常见数据结构以及使用场景分析
- 1008. 数组元素循环右移问题 (20)-PAT乙级真题
- python有趣小程序-Python里的17个quot;骚操作”好玩有趣
- echo, print, printf 和 sprintf 区别(PHP)
- android UI进阶之布局的优化
- 飞利浦 f718 java 微信_第一次使用飞利浦F718手机感觉怎么样及优缺点
- 2020华为软挑总结——baseline
- 为什么Multi-DRM如此重要?
- 无需代码,1秒搞定QQ和微信多开!
- 利用Flash制作一个可以自由拨动的时钟模具
- 使用ShellJS提升你的开发效率(一)
热门文章
- antd mobile在微信公众号开发中使用笔记
- Python提取视频帧图片
- C语言 | 什么是ANSI C标准?
- #微软MVP分享# WP手机使用记录
- ac68u 搭建php,华硕RT-AC68U无线路由器深度体验
- Kuberneters企业级容器云平台落地实践之二
- 1.函数的结构,调用,传参,形参,实参,args,kwargs,名称空间,高阶函数
- 四极管:京东物流“后牌照”战略:8月底开放 或分拆
- “双一流”哈尔滨工程大学成立人工智能有关学院,打造一流学科群!
- [NOI2008] 糖果雨