前端
文章平均质量分 57
闲看云起
知道的越多,知道的越少
展开
-
HTML5以及CSS3新增特性
如果我们在样式设置中进行的是nth-child的方法设置的,那么section中的子元素没有一个会改变颜色。例如n就是选择所有子元素,2n是选择偶数位的子元素,2n+1表示选择奇数,以此类推。如果我们使用的是nth-of-type来设置的,子元素中的熊大一行就会改变样式,这时因为nth-of-type是先匹配元素类型,对指定的标签中的子元素进行排序,再匹配第1个子元素的,所以就会进行样式的更改。5.before在父元素内容的前面创建元素,after在父元素内容的后面创建元素。.........原创 2022-07-16 12:56:26 · 554 阅读 · 1 评论 -
CSS高级技巧
核心:1.精灵图主要针对于小的背景图片使用。2.主要借助于背景位置来实现—background-position。3.一般情况下,盒子定义在网页上的某个位置,我们需要向四周移动我们的精灵图来使我们想要的部分展示出来。主要使用场景:用于显示网页通用、常用的一些小图标。本质:展示以图标展示,但是本质是属于字体的。所以我们可以改变其大小以及颜色等等。css三角的制作方法:类似于以下的三角形该如何制作?这时我们可以将边框的宽和高都设置为0,然后再设置边框的大小,边框的大小即是三角形的大小。如果我们只需原创 2022-07-07 16:14:21 · 368 阅读 · 0 评论 -
元素的显示与隐藏
display属性(重点):该属性用于设置一个元素该如何显示。display:none ;隐藏对象,并且隐藏后不占有原来的位置。display:block;除了转换为块级元素外,同时还可以显示对象。visibility可见性:该属性用于指定一个元素应可见还是可藏。visibility:visible;元素可见visibility:hidden;元素隐藏,元素隐藏后继续占有原来位置。overflow溢出:该属性是用于设置当内容超出了溢出的部分如何显示。...原创 2022-07-03 16:26:07 · 281 阅读 · 0 评论 -
CSS之定位
定位=定位模式+边偏移。定位模式:定位模式用于指定一个元素在文档中的定位方式。定位模式通过CSS的posotion属性来设置。静态定位:默认的定位方式,就是无定位的意思。相对定位:移动位置的参照点是自己原来的位置。并且设置移动了之后,原来的标准流位置继续占有,后面的盒子任以标准流的方式对待他。绝对定位:元素在移动位置的过程中,是先对于其父元素(包括更大的父级)来说的。1.如果没有父元素或者父元素没有定位,则以浏览器为准定位。2.如果父元素有定位(相对、绝对、固定),则以最近一级的带有定位的父元素原创 2022-07-02 14:28:36 · 220 阅读 · 0 评论 -
CSS笔记之浮动
浮动就是用来给网页进行布局设置的。浮动最典型的应用:可以让多个块级元素一行内排列显示。网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。语法格式如下:选择器 {float: 属性值;}属性值有三个,分别是none(不浮动)、left(左浮动)、right(右浮动)。1.浮动的元素会脱离标准流(脱标)。就是指定浮动的盒子会到指定位置,脱离标准流,并且不再保留原来的位置。2.如果多个盒子都设置了浮动,则它们会按照属性值一行内显示,并按顶端排列,如果显示不下,则会另起一行显原创 2022-06-25 23:01:46 · 124 阅读 · 0 评论 -
CSS笔记之盒子模型
所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛放内容的容器。CSS盒子模型本质上就是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距以及内容。边框border:border可以设置元素的边框。边框由三部分组成:边框粗细、边框样式、边框颜色。border-width:定义边框粗细。单位一般为px。border-style:定义边框样式。常用参数:solid实线边框,dashed虚线边框,dotted点线边框。border-color:定义边框颜色。边框原创 2022-06-24 18:21:42 · 492 阅读 · 0 评论 -
CSS元素显示模式
css中元素显示主要分成两大块,分别是块元素和行内元素。常见的块元素有等。块元素的特点:1.比较霸道,自己独占一行。2.高度、宽度、外边距、内边距都可以控制。3.是一个容器及盒子,里面可以放行内或者块元素。4。宽度默认是容器(父级容器)的100%。注:文字类元素内不能放块元素。例如:p或h类标签不可以放div标签。常见的行内元素有等。行内元素的特点:1.一行中可以显示多个行内元素。2.高、宽直接设置是无效的。3.行内元素只能容纳文本和其他行内元素。4.默认的宽度就是它本身的宽度。注原创 2022-06-22 00:49:01 · 111 阅读 · 0 评论 -
CSS之复合选择器
1.后代选择器(重要): 我们可以选择父元素里面的子元素进行样式声明。语法格式如下:举例说明:注:两元素需要用空格隔开,最终修改的是元素2,元素2必须是元素1的后代。2.子选择器:子选择器与后代选择器最大的区别就是子选择器只能选择作为某元素最近一级的子元素。语法格式如下:例如:注:只对最近一级的子元素有效。俗称亲儿子选择器。3.并集选择器(重要):当我们需要同时对多组标签定义样式的时候,我们就可以使用并集选择器。语法格式如下:例如:4.伪类选择器:伪类选择器用于对某些选择器添加原创 2022-06-21 11:39:00 · 1306 阅读 · 0 评论 -
emmet语法(好用方便,强推!!!)
为了使我们使用vscode编写代码更加的快捷便利,介绍emmet语法。1.生成标签:直接写下标签名按下tab键即可生成。例如:输入div按下tab后即可生成。2.如果需要生成多个标签,可以使用号来使用。例如:输入div5,就可以生成5个div标签。3.如果存在父子关系,使用>生成。例如:输入ul>li,按下tab后,就会生成。4.如果存在兄弟关系,使用+生成。例如:输入div+p,按下tab后,就会生成。5.如果生成带有类名或者id名字的,直接.类名或者#类名生成。例如:输入.demo,按下tab原创 2022-06-20 22:26:09 · 365 阅读 · 0 评论 -
CSS 引入方式总结
1.内部样式表:内部样式表是写在html页面内部,是将CSS代码抽取出来,放在style标签中。这种方法也常常被称之为嵌入式引入,理论上可以放在html文档任何地方,但是一般放在head标签中。语法格式如下:2.行内样式表:行内样式表是在标签内部的style属性中设定CSS样式,适合修改简单样式。但是比较不推荐这么写。语法格式如下:3.外部样式表(最重要):样式单独写到一个css文件中,再将该css文件引入html使用。常用于开发过程中,在css文件中,直接写样式即可,不需要写标签。在html原创 2022-06-20 21:23:55 · 297 阅读 · 0 评论 -
CSS笔记之常用属性
font-size:设置字号(字体大小)font-family:设置字体(字体种类)font-weight:设置字体粗细font-style:设置字体样式(倾斜还是正常)复合属性写法:复合式写法中上面定义的写法不能进行更改,并且size和family两属性必须按顺序出现,其他的可以省略。此写法可以大幅度节约代码,但具有限制性。color:设置文本颜色,同样可以使用十六进制或rgb来定义。text-align:设置文字水平的对齐方式(居中啥的)。text-indent:设置文本缩进。首行缩进两个原创 2022-06-20 15:46:17 · 85 阅读 · 0 评论 -
CSS基础选择器
css规则由两个主要部分构成:选择器和一条或多条声明。选择器用于指定CSS样式的HTML标签,花括号内对该对象设置具体样式。语法格式举例如下:CSS样式的为设计一般写在HTML中的head标签部分内,用style标签框住。选择器主要分成两大类:基础选择器和复合选择器这两大选择器中又分为很多类选择器,首先我们介绍基础选择器:标签选择器:类似于前面定义的语法格式,标签选择器可以快速地为页面中的某一类标签设置样式,但是却不方面差异化样式,只能选择全部当前标签。类选择器:如上所述:当我们需要对标签进行原创 2022-06-19 18:35:33 · 191 阅读 · 0 评论 -
HTML的常用标签
1.标题标签:表示字体加粗,并且每个标题标签括中的文字都显示占取一行,随着h后面的数字增大,标题也就越来越小。2.段落标签:表示标签内部的内容是以段落的形式呈现的。3.换行标签:表示前后文本强制换行。目前后面的不写同样可以表示换行。4.文本格式化标签:字体加粗:或者字体倾斜:或者字体加删除线:或者字体加下划线:或者5.和标签都是用来布局的,并没有语义,就是一个盒子,不过它们还是有区别的,内的文本内容独占一行,而一行可以有多个6. 图像标签: :图像标签是一个单标签,但是它有很多的属性来丰富原创 2022-06-18 11:41:55 · 2340 阅读 · 0 评论 -
Web标准及vscode使用技巧
Web标准的构成主要是结构、表现和行为三个方面。下面进行简要介绍:1.结构:结构用于对网页元素进行整理和分类,主要学习的是Html。2.表现:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。3.行为:行为是指网页模型的定义以及交互的编写,现阶段主要学习的是Javascript。结构写在Html文件中;表现写在CSS文件中;行为写在Javascript文件中。常见的标签一般都是双标签,也就是会前后对应。但是也有单标签的情况,常见的单标签有。同时标签之间还存在着包含关系以及并列关原创 2022-06-17 10:44:12 · 209 阅读 · 0 评论