01 2021 档案
摘要：一、步骤： 或者直接去别的公司官网下载：例如小米： https://www.mi.com/favicon.ico 二、自己制作图标： 1、切下一张png格式图片。 2、去转换网站在线转换，例如：比特虫：http://www.bitbug.net/ 3、将转换好的图片放到文件根目录下。 4、代码引入：
阅读全文
摘要：一、 二、小米logo案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
阅读全文
摘要：一、字体图标： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D
阅读全文
摘要：一、特点： 仅支持IE9以上浏览器。 二、新增伪类选择器： 第二个伪类选择器：nth-of-type:
阅读全文
摘要：一、HTML新增标签仅支持IE9及以上浏览器。 二、新增语义标签： ①、<header>：头部标签。 ②、<nav>：导航标签。 ③、<article>：内容标签。 ④、<section>：某个区域。 ⑤、<aside>：侧边栏标签。 ⑥、<footer>：尾部标签。 二.1：语义标签特点。 ①、可
阅读全文
摘要：一、代码： div { width: 150px; height: 59px; /意思：文字显示不开也必须强制一行显示/ white-space: nowrap; /溢出部分隐藏/ overflow:hidden; /文字溢出省略号显示/ text-overflow: ellipsis: }
阅读全文
摘要：一、bug:图片底侧会有一个空白缝隙，原因是行内块元素会和文字基线对齐。 二、解决方法： ①、给图片添加 vertical-align：middle 、top、bottom。（推荐使用） ②、把图片转换为块级元素。
阅读全文
摘要：一、行内块元素和文字垂直居中对齐：vertical-align 二、图片、表单都属于行内块元素。 三、只要给图片表单的 vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。
阅读全文
摘要：一、取消表单轮廓 outline：none； 二、防止文本域拖拽： resize：none；
阅读全文
摘要：一、代码： cursor：属性值； 二、属性值： ①、default：默认白色箭头； ②、pointer：小手 ③、move：移动 ④、text：文本 ⑤、not-allowed：禁止。
阅读全文
摘要：一、原理：只给盒子设置边框，不设置宽高。 二、代码： .box { width:0; height:0; border: 10px solid transparent; border-left-color: pink; }
阅读全文
摘要：一、阿里网址 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 二、选择适合的图标 》 收藏 》 添加到项目 》下载图标 三、代码引用三种方式： ①、unicode引用 第一步：拷贝项目下面生成的font-face @
阅读全文
摘要：一、精灵图：将多张小背景图合为一张图，减少服务器压力。 二、使用： 1、使用ps打开精灵图 》右击“裁剪工具“” 》选择其中的切片工具” 》框选需要使用的区域 》右击选择“编辑切片选项”，获取图片位置。2、给一个盒子添加精灵图，精灵图默认是贴在盒子左上角对齐。3、图片左移是负值。4、在样式中输入以下
阅读全文
摘要：一、display属性： ①、display:none； 隐藏对象； display:block;显示对象。 ②、特性：display隐藏元素后，不再占有原先的位置。 二、visibility可见性： ①、visibility：visible；元素可见； hidden：元素不可见。 ②、特性：隐藏元
阅读全文
摘要：一、相对定位：相对于自己原来的位置移动。 ①、position: relative; top: 30px . left: 30px; ②、移动之后原来的位置继续占有，后面的盒子不会移动。 ③、相对定位经常用于给绝对定位当爹。 二、绝对定位： ①、position：absolute； ②、绝对定位移动
阅读全文
摘要：一、原因： 很多时候是无法给父盒子一个高度的，如果无法给高度的话，里面的子盒子浮动字后后面的元素就会挤过来，影响结构布局，所以需要清除浮动，让父盒子的高度与子盒子高度一样。 二、方法： ①、额外标签法： 在最后一个浮动元素后面添加一个 块级空标签：<div class='clear'></div>
阅读全文
摘要：一、浮动： ①、float：left/ right； 二、浮动特性： ①、浮动的元素不占有原先位置，后面没有浮动的元素会挤过来压住浮动的元素。 ②、添加了浮动的元素具有了行内块元素的特性： a、不论什么元素都可以设置宽高。 b、所有浮动元素都在一行显示。 c、没有浮动的块级盒子如果没有设置宽度，他的
阅读全文
摘要：一、圆角边框： ①、border-radius：10px / 20%; 后面可以跟四个、三个、两个数值。 ②、圆形： 一个正方形盒子: border-radius： 边框一半/50%; ③、圆角矩形： border-radius: 高度一半； ④、单独一个角：border-top-left：这是左上
阅读全文
摘要：一、步骤： ①、打开 文件 首选项 设置 用户 扩展 live server config setting: use browser preview(勾选)。 ②、安装扩展 ：browser preview插件。 ③、在编辑页面右击 open with live server。
阅读全文
摘要：一、两个块级盒子嵌套，如何让小盒子在大盒子里面居中： 水平居中： ①、给小盒子添加： margin: 0 auto; ②、给小盒子添加：margin-left: 大盒子剩余距离一半。 垂直居中： ①、使用margin 二、块级盒子里面嵌套行内元素或者行内块元素： 水平居中： ①、给大盒子添加; te
阅读全文
摘要：一、边框：border ①、复合写法：border: 1px solid #ccc; ②、边框会撑大盒子的大小。 二、内边距：padding ①、复合写法：padding: 10px 5px; 上下10，左右5. ②、padding是内容与盒子边框之间的距离，给内容的父亲添加。 ③、padding会
阅读全文
摘要：一、background-color: 背景颜色 二、background-image: url() 背景图片 三、background-repeat:背景是否平铺 ①、repeat：平铺 ②、no-repeat：不平铺 ③、repeat-x: x轴平铺； repeat-y：y轴平铺 四、backg
阅读全文
浙公网安备 33010602011771号