![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
文章平均质量分 65
--believe
这个作者很懒,什么都没留下…
展开
-
小程序引用阿里巴巴矢量库
一、阿里巴巴矢量库简介阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。二、使用方法1.准备进入官网注册账号https://www.iconfont.cn/搜索选择你想要的图标,点击小车图标,添加入库将库中的图标添加到你创建的项目组在你的小程序项目中新建incon-alibaba.wxss文件如下图:将刚才浏览器打开链接里原创 2020-10-17 10:57:58 · 310 阅读 · 1 评论 -
web前端20200313学习笔记
1.精灵技术讲解CSS精灵其实是将网页中的一些背景图整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图1.1精灵技术使用核心总结首先我们知道,css精灵技术主要针对背景图片,插入的图片img是不需要这个技术的 1,精确测量,每个小背景图片的大小和位置。 2,给盒子指定小背景图片时,背景定位基本都是负数。 ...原创 2020-03-13 23:35:58 · 83 阅读 · 0 评论 -
web前端-20200311学习笔记
1.vertical-align垂直对齐 有宽度的块级元素居中对齐,是margin:0 auto 让文字居中对齐,是text-align:center vertical垂直对齐,它只针对于行内元素或者行内块元素 vertical-align:baseline|top|middle|bottom举例:<!DOCTYPE html><html l...原创 2020-03-11 23:29:09 · 80 阅读 · 0 评论 -
web前端20200310学习笔记
1.网页布局总结一个完整的网页,有标准流,浮动,定位一起完成布局的,每个都有自己的专门用法 标准流 可以让盒子上下排列或者左右排列的 浮动可以让多个块级元素一行显示或者左右对齐盒子 浮动的盒子就是按照顺序左右排列 定位定位最大的特点就是有层叠的概念,可以让多个盒子前后叠压来显示,但是每个盒子需要测量数值 2.display显示(重点) display设置或检...原创 2020-03-10 23:32:16 · 133 阅读 · 0 评论 -
淘宝轮播图--web前端20200309学习笔记
1.外边距合并问题:解决方法浮动元素,绝对定位(固定)元素都不会触发外边距合并问题2.综合案例-淘宝轮播图代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>...原创 2020-03-09 23:32:32 · 434 阅读 · 1 评论 -
web前端
1.新浪案例:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 1002px; /*height: 1760px;*/...原创 2020-03-07 23:56:22 · 100 阅读 · 0 评论 -
子绝父相及固定定位--20200306web前端学习笔记
1.定位口诀(重点)在实际开发中,父级要占有位置,子级要随意摆放这就是口诀“子绝父相”的由来1.1子绝父相的原理:举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style&...原创 2020-03-06 23:48:53 · 755 阅读 · 0 评论 -
web前端定位
一,定位 1,定位作用: 将盒子定在某一个位置,自由的漂浮在其他盒子(包括标准流和浮动)的上面 所以我们脑海中应该有三种布局机制的上下顺序标准流在最底层(海底)---浮动的盒子在中间层(海面)---定位的盒子在最上层(天空) 2,定位详解 定位也是用来布局的,它有两部分组成:定位=定位模式+变偏移2.1边偏移 简单说,我们定位的盒子,是通过边偏移来移动位置的。在CSS中,通过 top...原创 2020-03-05 22:01:35 · 880 阅读 · 0 评论 -
20200228-0229前端学习笔记
1.综合案例:(新闻)1)总结: { margin: 0; padding: 0; }用于去除默认的内边距和外边距 一般小图片可以用背景图片的方法添加:background:url(images/bg.gif); 用于消除列表默认的点点:list-style: none; 用于消除链接的下划线:text-decoration: none; 2)代码:<h...原创 2020-03-01 09:52:48 · 101 阅读 · 0 评论 -
20200227前端学习笔记
1.圆角边框 语法boder-radius:length 其中每一个值可以为数值或百分比的形式 技巧:让一个正方形变成圆形boder-radius:50% 举例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角的写法</...原创 2020-02-27 23:06:36 · 94 阅读 · 0 评论 -
20200224前端学习笔记
1.导航栏实例代码如下注意: line-height=height时候文字位于垂直中间 text-decoration:none去掉下划线<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>...原创 2020-02-25 22:25:58 · 87 阅读 · 0 评论 -
20200221前端学习笔记
1.盒子模型 所谓盒子模型:就是把html页面中的布局元素看做是一个矩形的盒子,也就是一个盛满内容的容器 总结:盒子模型有内容,边框(boder),内边距(padding),外边距(margin)组成盒子里面的文字和图片等元素是内容区域盒子的厚度我们称为边框盒子内容与边框的距离是内边距类似单元格的ceilpadding盒子与盒子之间的距离是外边距类似单元格的ceilspacing2...原创 2020-02-23 16:38:05 · 72 阅读 · 0 评论 -
20200220前端学习笔记
1.行高(line-height) 1.1单行文本垂直居中 行高=上距离+内容距离+下距离 使文字垂直居中方法:文字的行高等于盒子的高度 举例: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</ti...原创 2020-02-20 23:21:00 · 84 阅读 · 2 评论 -
20200219前端学习笔记
1.块级元素(block-level) 例:常见的块级元素有h,p,div,ul,ol,li等,其中div是最典型的块元素 块元素的特点:(1)独占一行(2)高度,宽度,外边距以及内边距都可以控制(3)宽度默认是容器(父级宽度)的100%(4)是一个容器及盒子,里面可以放行内或者块级元素 注意:只有文字才能组成段落,因此p里面不能放块级元素,特别是p不能放div同理还有...原创 2020-02-19 23:55:53 · 85 阅读 · 0 评论 -
20200218web前端学习笔记
1.后代选择器(重点) 1.1后代选择器 概念:后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间用空格隔开,先写父亲爷爷,再写儿子孙子。父级 子级 {属性:属性值;属性:属性值;} 语法: .class h3{color:red;font-size:16px;} 当标签发生嵌套时,内层标签就...原创 2020-02-18 16:57:57 · 192 阅读 · 0 评论 -
sublime常用的快捷键操作emmet语法
sublime常用的快捷键操作emmet语法生成标签直接输入标签名 按tab键即可,比如 div然后tab键就可以生成< div >< /div> 如果想要生成多个相同标签 加上*就可以了比如 div*3 就可以快速生成3个div如果有父子级关系的标签,可以用>比ul>li就可以了 如果有兄弟关系的标签,用+就可以了比如div+p 如果生成带有类名或者id...原创 2020-02-17 23:28:58 · 260 阅读 · 0 评论