前端学习
文章平均质量分 68
超级爱喝奶茶~
这个作者很懒,什么都没留下…
展开
-
CSS入门基础知识(十五)——清除浮动
CSS标签入门基础知识浮动(float)清除浮动额外标签法额外标签法也称为隔墙法,是W3C推荐的做法额外标签法会在浮动元素末尾添加一个空的标签。例如< div style = " clear:both " >< /div>,或者其他标签(如 < br />等)优点:通俗易懂,书写方便缺点:添加许多无意义的标签,结构化较差注意:要求这个新的空标签必须是块级元素清除浮动——父级添加overflow可以给父级添加overflow属性,将其属性值设置为hidd原创 2020-11-10 15:53:07 · 162 阅读 · 0 评论 -
CSS入门基础知识(十四)——浮动(二)
CSS标签入门基础知识网页布局常见网页布局浮动布局主义点浮动和标准流的父盒子搭配先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置一个元素浮动了,理论上其余的兄弟元素也要浮动一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防引起问题浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流清除浮动为什么清除浮动由于符集盒子很多情况下,不方便给高度,但是子盒子浮动不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子由于浮动元素原创 2020-11-10 14:25:53 · 157 阅读 · 0 评论 -
CSS入门基础知识(十三)——浮动(一)
CSS标签入门基础知识浮动(float)传统网页布局的三种方式网页布局的本质——用css来摆放盒子。把盒子摆放在相应的位置。CSS提供了三种传统布局方式:1、普通流(标准流)2、浮动3、定位标准流(普通流/文档流)所谓的标准流:就是标签按照规定好默认方式排列1、块级元素会独占一行,从上向下顺序排列2、行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行3、常用元素这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了注意:实际开发中,一个页面基本包含了着原创 2020-11-05 17:38:27 · 215 阅读 · 0 评论 -
CSS入门基础知识(十二)——圆角边框和盒子阴影
CSS标签入门基础知识圆角边框和盒子阴影圆角边框在CSS3中,新增了圆角边框的样式,盒子可以变成圆角了。boder-radius属性用于设置元素的外边框圆角语法:radius半径原理:(椭)圆与边框的交际形成圆角效果例子:注意:1、参数值可以为数值也可以为百分比形式2、如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%3、如果是矩形,设置为高度的一半4、该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角盒子阴影css原创 2020-11-04 17:33:14 · 405 阅读 · 0 评论 -
CSS入门基础知识(十一)——CSS盒子模型(二)
CSS标签入门基础知识CSS盒子模型内边距内边距(padding)属性用于设置内边距,即边距和内容之间的距离。内边距的复合写法:padding简写属性属性可以有一到四个值。注意:内边距一样会影响盒子的实际大小,为保证盒子和效果图保持一致,让高和宽减去多出来的内边距大小即可。如果盒子没有指定盒子宽度高度属性,padding不会撑开盒子的大小。外边距margin属性用于设置外边距,即控制盒子和盒子之间的距离。margin简写方式和padding一样。外边距典型应用:外边距可以让块原创 2020-11-04 12:54:48 · 304 阅读 · 1 评论 -
CSS入门基础知识(十)——CSS盒子模型(一)
CSS标签入门基础知识CSS盒子模型网页布局过程网页布局过程1、先准备好相关网页元素,网页元素基本都是盒子Box2、利用CSS设置号盒子样式,然后拜访到相应的位置3、往盒子里面装内容网页布局核心:利用CSS摆盒子盒子模型(Box Model)组成盒子模型:就是吧html页面的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器盒子模型本子上是一个盒子,封装周围的html元素,它包括边框、外边距、内边距、和实际内容边框(border)boder可以设置元素的边框边框有三部分组成:原创 2020-11-04 12:33:54 · 200 阅读 · 0 评论 -
CSS入门基础知识(九)——CSS三大特性
CSS标签入门基础知识CSS的三大特性css有三个非常重要的三个特性:层叠性、继承性、优先级。层叠性相同的选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:1、样式冲突,遵循的原则是后来居上,哪个样式离结构近,就执行哪个样式2、样式不冲突,不会层叠继承性一般继承性css中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。1、恰当的使用继承可以简化代码,降低css样式的复杂程度2、子元素可原创 2020-11-03 17:17:36 · 225 阅读 · 0 评论 -
CSS入门基础知识(八)——CSS的背景
CSS标签入门基础知识CSS的背景通过css背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。背景颜色background-color属性定义了元素的背景颜色一般情况下元素背景颜色默认值是tranparent(透明)背景图片...原创 2020-11-03 15:19:00 · 389 阅读 · 0 评论 -
CSS入门基础知识(七)——元素显示模式
CSS标签入门基础知识元素显示模式元素显示模式就是元素(标签)以什么方式进行显示,比如< div>自己独占一行,比如一行可以放多个< span>html元素一般分为块元素和行元素块元素常见的块元素有< h1>~< h6>、< p>、< div>等等,其中< div>标签是最典型的块元素1、自己独占一行2、高度、宽度、内外边距边距都可以控制3、宽度默认是容器的100%4、是一个容器及盒子,里面可以放行内或者块原创 2020-09-03 09:46:19 · 199 阅读 · 0 评论 -
CSS入门基础知识(六)——复合选择器
CSS标签入门基础知识Emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度。快速生成html结构语法1、生成标签直接输入标签名按tab键即可2、生成多个相同标签,加上*即可3、生成父子级关系的标签,可以用>4、生成兄弟关系的标签,可以用+5、生成带有类名的或者id名字的,直接写.demo或者#demo6、生成div类名有顺序,加上自增符号$7、生成标签的内部写内容,用{}表示快速生成css结构语法css基本采取简写形式即可1、比原创 2020-09-02 15:28:58 · 320 阅读 · 0 评论 -
CSS入门基础知识(五)——引入方式
CSS标签入门基础知识CSS引入方式css的三种样式表按照css样式书写的位置(或者引入的方式),css样式可以分为三大类:1、行内样式表(行内式)2、内部样式表(嵌入式)3、外部样式表(链接式)内部样式表内部样式表(内嵌样式表)是写到html页面内部,是将所有的css代码抽出来,单独放到一个< style>标签中。例子:1、内部样式表理论上< style>标签可以放在html文档的任何地方,但一般会放在文档的< head>标签中。2、通过这种方式原创 2020-09-01 17:00:23 · 272 阅读 · 0 评论 -
CSS入门基础知识(四)——文本属性
CSS标签入门基础知识CSS文本属性CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色color属性用于定义文本的颜色。对齐文本text-align属性用于设置元素内文本内容的水平对齐方式。装饰文本text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。例子:删除链接的下划线文本缩进text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。通过设置该属性,所原创 2020-08-31 22:20:24 · 266 阅读 · 0 评论 -
CSS入门基础知识(三)——字体属性
CSS标签入门基础知识CSS字体属性CSS Fonts(字体)属性用于定义字体系列、大小、粗细、文本样式。字体系列CSS使用font-family属性定义文本的字体系列。1、各种字体之间必须使用英文状态下的逗号隔开。2、一般情况下,如果有空格隔开多个的单词组成的字体,加引号。3、尽量使用系统默认自带字体,保证任何用户的浏览器中都能正确显示。字体的大小CSS使用font-size属性来定义大小。1、px(像素)大小是我们网页的最常用单位。2、谷歌浏览器默认的文字大小为16px。3、原创 2020-08-30 01:44:20 · 293 阅读 · 0 评论 -
CSS入门基础知识(二)—— 基础选择器
CSS入门基础知识(二)CSS标签入门基础知识CSS基础选择器CSS选择器的作用选择器的分类标签选择器类选择器类选择器类选择器-多类名id选择器id选择器id选择器和类选择器的区别通配符选择器基础选择器的总结CSS标签入门基础知识CSS基础选择器CSS选择器的作用选择器(选择符)就是根据不同的需求把不同标签选出来。以上css做了俩件事:1、找到所有的h1标签。(选对人)2、设置这些标签的样式,比如颜色改为红色。(做对事)选择器的分类选择器分为基础选择器和复合选择器俩大类。基础选择器:原创 2020-08-11 21:01:14 · 460 阅读 · 0 评论 -
CSS入门基础知识(一)
CSS入门基础知识(一)CSS标签入门基础知识CSS简介html的局限性css-网页的美容师CSS标签入门基础知识CSS简介html的局限性html是非常单纯的,只关注内容的语义。例如:< h1>表明这只是一个大标题,< p>表明这只是一个段落,< img>表明这里有一个图片,< a>表示此处有链接。html可以做简单的样式,但会非常的繁琐。css-网页的美容师css是层叠样式表(Cascading Style Sheels)的简称。也称为c原创 2020-08-10 16:58:28 · 358 阅读 · 0 评论 -
HTML入门基础知识(六)
HTML入门基础知识(六)html标签入门基础知识HTML常用标签(五)< label>标签html标签入门基础知识HTML常用标签(五)< label>标签< label>标签为input元素定义标注(标签)。< label>标签常与表格标签一起使用...原创 2020-08-09 21:33:46 · 122 阅读 · 0 评论 -
HTML入门基础知识(五)
HTML入门基础知识(五)html标签入门基础知识HTML常用标签(四)列表标签无序列表有序列表自定义列表三种列表总结:表单标签为什么需要表单表单的组成表单域表单控件(表单元素)html标签入门基础知识HTML常用标签(四)列表标签表格是用来显示数据的,那么列表就是用来布局的。列表的最大特点就是整齐、整洁、有序,它作为布局会更加自由和方便。根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。无序列表< ul>标签表示html页面中项目的无序列表,一般会以项目符原创 2020-08-09 14:31:58 · 219 阅读 · 0 评论 -
HTML入门基础知识(四)
HTML入门基础知识(四)html标签入门基础知识HTML常用标签(三)表格标签表格的主要作用表格的基本语法表头单元格标签表格的属性表格结构标签合并单元格html标签入门基础知识HTML常用标签(三)表格标签表格的主要作用表格主要用于显示、展示数据。一个清爽简约的表格能够把复杂的数据表现得很有条,表格不用用来布局页面的,是用来展示数据的。例子:表格的基本语法1、< table>< /table>用于定义表格的标签。2、< tr> < /tr&g原创 2020-08-08 17:56:03 · 185 阅读 · 0 评论 -
HTML入门基础知识(三)
HTML入门基础知识(二)html标签入门基础知识HTML常用标签(二)图像标签和路径图像标签图像路径目录文件夹和根目录图片路径超链接标签超链接的语法规范链接的分类html中的注释和特殊字符注释特殊字符html标签入门基础知识HTML常用标签(二)图像标签和路径图像标签在html标签中,< img>标签用于定义html页面中的图像。单词image的缩写,意思为图像。例子:src是< img>标签的必须属性,它用于指定图像文件的路径和文件名。(属性简单理解为就是属于原创 2020-08-07 16:47:54 · 290 阅读 · 0 评论 -
HTML入门基础知识(二)
HTML入门基础知识(二)html标签入门基础知识开发工具生成的骨架标签< !DOCTYPE>标签lang 语言种类字符集html标签入门基础知识开发工具生成的骨架标签< !DOCTYPE>标签< !DOCTYPE>文档类型声明,主要是告诉浏览器使用哪种html版本显示网页。注意:< !DOCTYPE>声明位于文档的最前位置,处于< html>标签之前。< !DOCTYPE>不是html标签,只是一个文档声明标签。lan原创 2020-08-06 13:26:08 · 706 阅读 · 1 评论 -
HTML入门基础知识(一)
HTML入门基础知识(一)html标签入门基础知识html语法规范基本语法概述标签关系html基本结构标签开发工具html常用标签html中的注释和特殊字符html标签入门基础知识html语法规范基本语法概述1.html 标签是在尖括号包围的关键词,例如< html>2.双标签:标签是包含在<>中的并且是成对出现例如:< html>< /html>(正式代码中<后的空格需要删去)< html> 为开始标签 <原创 2020-07-27 16:53:47 · 1769 阅读 · 4 评论 -
开始学习前端知识
开始学习前端的知识~了解网页的相关概念网页什么是网页什么是html网页的形成常用浏览器常用浏览器浏览器内核web的标准欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入了解网页的相关概念网页原创 2020-07-24 17:04:45 · 1968 阅读 · 1 评论