![](https://img-blog.csdnimg.cn/20201120093033164.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
前端(html、css、js、jq)
包小黑
悲催打工人记录学习中
展开
-
新手项目:黑马blog (适合刚接触node和数据库MongoDB)
来源:黑马前端难度:⭐⭐(基础)——的新适合刚接触node和数据库MongoDB手小白所需知识:第三方模块:express框架(用于创建网站服务器以及路由)moogoose(连接数据库和操作数据库)art-template、express-art-template(渲染模板)数据库:MongoDB教程视频、源码和素材:链接: 链接: https://pan.baidu.com/s/1YGyZQOgDq-nq2LHAJ5agaQ 提取码: b2et1. 项目环境..原创 2020-12-27 18:42:57 · 1391 阅读 · 0 评论 -
CSS基础汇总——点击标题跳转详细博客【学习笔记】
CSS 网页的美容师理想中的结果: 结构(html)与样式(css)相分离1.引入CSS样式表(书写位置)行内式(内联样式)内部样式表(内嵌样式表)外部样式表(外链式)(1)行内式(内联样式)概念: 称行内样式、行间样式. 是通过标签的style属性来设置元素的样式其基本语法格式如下:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>实际上任何HTML标签都拥有style属性,用来设置行内式。原创 2020-11-25 15:17:24 · 1208 阅读 · 0 评论 -
CSS高级技巧【学习笔记】
CSS高级技巧1. 元素的显示与隐藏目的:让一个元素在页面中消失或者显示出来场景:类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)display 设置或检索对象是否及如何显示。display: none 隐藏对象display:block 除了转换为块级元素之外,同时还有显示元素的意思。特点: 隐藏之后,不再保留位置。实际开发场景:配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单原创 2020-11-25 15:01:46 · 229 阅读 · 0 评论 -
CSS基础——定位 (position)【学习笔记】
定位(position)1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:普通流(标准流)浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位,特别是后面的 js 特效。2. 为什么使用定位我们先来看一个效果,同时思考一下用标准流或浮动能否实现类似的效果?原创 2020-11-24 10:20:35 · 356 阅读 · 0 评论 -
学成在线首页——静态页面基础项目(HTML+CSS)【学习笔记】
来源:黑马前端难度:⭐(简单)——适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: fsih效果图:1 CSS属性书写顺序(重点)建议遵循以下顺序:布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,毕竟关系到模式)自身属性:width / height / margi原创 2020-11-21 16:54:08 · 5437 阅读 · 0 评论 -
CSS基础——浮动(float)【学习笔记】
1. 浮动(float)1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流)块级元素会独占一行,从上向下顺序排列;常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;常用元素:span、a、i、em等浮动让盒子从普通流中浮起来,主要作用让多个块级原创 2020-11-21 15:25:08 · 2233 阅读 · 1 评论 -
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model)所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距(类似单元格的 cellpadding)盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)标准盒子模型1. 盒子边框(border)原创 2020-11-21 10:49:11 · 383 阅读 · 0 评论 -
CSS基础——CSS 背景(background)【学习笔记】
1 背景颜色(color)语法:background-color:颜色值; 默认的值是 transparent 透明的2 背景图片(image)语法:background-image : none | url (url) 参数作用none无背景图(默认的)url使用绝对或相对地址指定背景图像background-image : url(images/demo.png);小技巧: 我们提倡 背景图片后面的地址,url不要加引号。原创 2020-11-21 08:53:35 · 271 阅读 · 0 评论 -
CSS基础——CSS 三大特性【学习笔记】
1 CSS层叠性概念:所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉原则:样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。样式不冲突,不会层叠CSS层叠性最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上。2 CSS继承性概念:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。原创 2020-11-21 00:18:17 · 366 阅读 · 0 评论 -
CSS基础-行高(height和line-height)【学习笔记】
1 行高测量行高的测量方法:2 单行文本垂直居中行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐。文字的行高等于盒子的高度。这里情况些许复杂,开始学习,我们可以先从简单地方入手学会。行高 = 上距离 + 内容高度 + 下距离上距离和下距离总是相等的,因此文字看上去是垂直居中的。行高和高度的三种关系如果 行高 等 高度 文字会 垂直居中如果行高 大于 高度 文字会 偏下如果行高小于高度 文字会 偏上...原创 2020-11-21 00:03:48 · 449 阅读 · 0 评论 -
CSS基础-标签显示模式(display)【学习笔记】
标签的三种显示模式三种显示模式的特点以及区别三种显示模式的相互转化什么是标签显示模式什么是标签的显示模式?标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个作用:我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。标签的类型(分类)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。1 块级元素(block-level)例:常见的块元素有<h1>~<h6>、&.原创 2020-11-20 23:57:52 · 210 阅读 · 0 评论 -
CSS基础——CSS复合选择器【学习笔记】
复合选择器后代选择器并集选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的1.1 后代选择器(重点)概念:后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,在写儿子孙子。父级 子级{属性:属性值;属性:属性原创 2020-11-20 23:40:58 · 483 阅读 · 0 评论 -
CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单1. 列表标签(重点)表格是用来显示数据的,列表是用来布局的。概念:容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表特点:列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。1.1 无序列表 ul (重点)无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:<ul> <li>列表项1</li> <li>列表项2</li> <原创 2020-11-20 15:27:31 · 2244 阅读 · 0 评论 -
CSS基础——CSS字体样式属性【学习笔记】
CSS字体样式属性调试工具font字体CSS外观属性快捷操作emmet语法练习案例1.font字体1.1 font-size:大小作用:font-size属性用于设置字号p { font-size:20px; }单位:可以使用相对长度单位,也可以使用绝对长度单位。相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。注意:我们文字大小以后,基本就用px了,其他单位很少使用谷歌浏览器默认的文字大小为16px但是不同浏览器可能原创 2020-11-20 13:43:08 · 831 阅读 · 0 评论 -
CSS基础——选择器【学习笔记】
**CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 **css 就是 分两件事, 选对人, 做对事标签选择器类选择器id选择器通配符选择器CSS选择器:(1)标签选择器概念:标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。语法:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 作用:标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 spa原创 2020-11-20 12:55:16 · 418 阅读 · 0 评论 -
CSS基础——CSS样式的引入和规则【学习笔记】
1.引入CSS样式表(书写位置)行内式(内联样式)内部样式表(内嵌样式表)外部样式表(外链式)(1)行内式(内联样式)概念: 称行内样式、行间样式. 是通过标签的style属性来设置元素的样式其基本语法格式如下:<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>实际上任何HTML标签都拥有style属性,用来设置行内式。案例:<div style="color: red; font-siz原创 2020-11-19 09:21:59 · 361 阅读 · 0 评论