![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web前端
文章平均质量分 74
Web前端
Silver Star
这个作者很懒,什么都没留下…
展开
-
Web前端入门(十九)传统网页布局式之标准流、浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘选择器 {float : 属性值;}属性值描述none元素不浮动left元素向左浮动,如左侧无浮动框,则会位于最左边,有则紧贴左边浮动框right元素向右浮动,类似于left多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动先设置盒子大小,之后设置盒子的位置。清除浮动的原因:①:父级没高度②:子盒子浮动了③:影响下面布局了,就应该清除浮动了。清除浮动方式优点缺点。原创 2022-10-26 23:36:26 · 543 阅读 · 0 评论 -
Web前端入门(十八)圆角边框及盒子阴影
半径(圆的半径) 原理:(椭)圆与边框的交集形成圆角效果参数值可以是数值或百分比的形式如果是正方形盒子,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%如果是一个矩形,设置为高度的一半就可以(圆角矩形效果)该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角2.盒子阴影CSS3 中新增了盒子阴影,可以使用 box-shadow 属性为盒子添加阴影。值描述h-shadow必需。水平阴影的位置,允许负值。阴影正值往右移动原创 2022-10-26 23:22:08 · 2305 阅读 · 0 评论 -
Web前端入门(十七)CSS盒子模型
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。网页元素很多都带有默认的内外边距,而且不同浏览器默认的也不一致。对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。使用 margin 定义块级元素的垂直外边距时,可能会出现外边距的合并。,但是必须满足两个条件。...原创 2022-08-29 23:34:41 · 807 阅读 · 3 评论 -
Web前端入门(十六)CSS三大特性
代码】Web前端入门(十六)CSS三大特性。1.层叠性相同选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就按那个样式显示。2.继承性CSS中的继承:子标签会继承父标签里面的某些样式,如文本颜色和字号等(text-,font-,line-这些元素开头的可以继承,以及color属性)想要设置一个可继承的属性,只需将它应用于父元素即可当同一个元素指定多个选择器,就会有优先级的产生...原创 2022-08-03 09:44:36 · 109 阅读 · 3 评论 -
Web前端入门(十五)CSS背景
属性作用值背景颜色预定义的颜色值/十六进制/RGB代码背景图片url(图片路径)是否平铺背景位置length/position分别是x和y坐标背景附着scroll(背景滚动)/fixed(背景固定)背景简写书写更简单背景颜色背景图片地址背景平铺背景滚动背景位置背景色半透明背景颜色半透明后面必须是四个值。...原创 2022-07-18 19:57:11 · 996 阅读 · 3 评论 -
Web前端入门(十四)元素显示模式
标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内元素。常见的块元素有等,其中 标签是最典型的块元素。块级元素的特点:①:比较霸道,自己独占一行②:高度,宽度,外边距以及内边距都可以控制③:宽度默认是容器(父级宽度)的100%④:是一个容器及盒子,里面可以放行内或块级元素注意:①:文字类的元素内不能使用块级元素②: 标签主要用于存放文字,因此里面不能放块级元素,特别是不能放③:同理,等都是文字类块级标签,里面也不能存放其他块级元素。常见的行内元素有等其原创 2022-07-06 11:26:46 · 161 阅读 · 0 评论 -
Web前端入门(十三)CSS复合选择器
总目录常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器元素1和元素2中间用空格隔开元素1是父级,元素2是子级,最终选择的是元素22.子元素选择器子元素选择器只能选择作为某元素的最近一级子元素(不包括子元素的子元素)。元素1和元素2中间用大于号隔开元素1是父级,元素2是子级,最终选择的是元素2元素2必须是直属的下一级,其下一级的下一级是不行的。3.交集选择器交集选择器是并且的意思,即所有条件都必须要满足才会生效4.并集选择器并集选择器可以选择多组标原创 2022-06-30 18:25:56 · 340 阅读 · 1 评论 -
Web前端入门(十二)CSS文本属性
总目录表示属性值预定义的颜色值red,green,blue,pink等十六进制#FF0000, #FF6600,#29D794RGB代码rgb(255,0,0) 或rgb(100%,0%,0%)注:实际开发中,最常用的是十六进制的写法、属性值解释left左对齐(默认)right右对齐center居中对齐注:是让盒子里面的文本内容水平居中, 而不是让盒子居中对齐属性值描述none默认,没有装饰原创 2022-06-13 09:31:44 · 822 阅读 · 0 评论 -
Web前端入门(十一)CSS字体属性
总目录各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号指定多个字体,如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体,如果都没有,以电脑默认字体为准。最常见的几个字体:CSS Unicode字体在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。2.font-sizeont-size属性用于设置字号(字体大小)默认的文字大小为16px不同浏览器可能默原创 2022-06-02 10:21:20 · 2505 阅读 · 0 评论 -
Web前端入门(十)CSS基础选择器
1.标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。作用:可以把某一类标签全部选择出来。优点:快速为网页中同类型的标签统一样式缺点:不能设计差异化样式。标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } /* 如下所示 */li { font-size: 36px;}2.类选择器类选择器使用"."(英文点号)进行标识,后面紧跟类名。优点:可以为元素对象定义单独或相同的样原创 2022-05-26 10:16:38 · 193 阅读 · 1 评论 -
Web前端入门(九)CSS概述
总目录文章目录1.HTML的局限性2.CSS-网页的美容师3.CSS简介4.CSS注释1.HTML的局限性HTML满足不了设计者的需求,可以将网页结构与样式相分离,这样就可以在不更改网页结构的前提下,更换网站的样式。操作html属性不方便HTML里面添加样式带来的是无尽的臃肿和繁琐2.CSS-网页的美容师让网页更加丰富多彩,布局更加灵活自如。CSS最大的贡献:让HTML从样式中脱离,实现了HTML专注去做结构呈现,样式交给CSS3.CSS简介CSS(Cascading Style原创 2022-05-23 10:03:13 · 88 阅读 · 1 评论 -
Web前端入门(八)表单
1.表单的组成在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。2.表单域表单域是一个包含表单元素的区域<form></from>标签用于定义表单域,会把它范围内的表单元素信息提交给服务器属性属性值作用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址methodget/post用于设置表单数据的提交方式,其取值为get或postnam原创 2022-05-19 22:10:40 · 957 阅读 · 0 评论 -
Web前端入门(七)列表
总目录文章目录1.无序列表2.有序列表3.自定义列表4.总结1.无序列表无序列表各个列表项之间没有顺序<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器,可以容纳所有元素<ul> <li>列表项1</li> <li>列表项2&原创 2022-05-15 22:05:34 · 527 阅读 · 0 评论 -
Web前端入门(六)表格
1.表格table 用来定义表格的标签tr 用来定义表格中的行,必须嵌套在<table></table> 标签中td 用来定义表格中的单元格,必须嵌套在<tr></tr> 标签中th 用来定义表格中的表头,表头单元格里面的内容加粗居中显示表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在 表格里面才有意义。<body> <table>原创 2022-05-15 21:25:40 · 1236 阅读 · 0 评论 -
Web前端文章目录
文章汇总持续更新,目录随文章发布补充文章链接Web前端入门(一)初识WEB文章链接Web前端入门(二)HTML入门文章链接Web前端入门(三)HTML常用标签-1文章链接Web前端入门(四)HTML常用标签-2文章链接Web前端入门(五)HTML常用特殊字符文章链接.....................原创 2022-05-12 10:17:11 · 4111 阅读 · 3 评论 -
Web前端入门(五)HTML常用特殊字符
总目录HTML常用特殊字符特殊字符描述字符代码空格符 <小于号<>大于号>&和号&¥人民币¥©版权©®注册商标®°摄氏度°±正负号±×乘号×÷除号÷²二次方&a原创 2022-05-12 10:11:19 · 865 阅读 · 0 评论 -
Web前端入门(四)HTML常用标签-2
文章目录1.图像标签2.超链接标签3.src 和 href 的区别4.锚点链接5.注释1.图像标签<img src="123.jpg" alt="123" title="123" />src是<img>标签的必须属性,它用于指定图像文件的路径和文件属性属性值说明src图片路径必须属性alt文本替换文本(当图片不能显示时候显示的文字)title文本提示文本(鼠标放到图像上,显示的文字)width宽度(单位为像素)设置原创 2022-05-12 08:47:51 · 143 阅读 · 0 评论 -
Web前端入门(三)HTML常用标签-1
1 标题标签<body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6></body>加了标题的文字会变的加粗,字号由一级到六级依次减小一个标题独占一行2 段落原创 2022-05-10 20:42:49 · 165 阅读 · 0 评论 -
Web前端入门(二)HTML入门
1.HTML概述「HTML」(Hyper Text Markup Language):超文本标记语言「所谓超文本,有2层含义:」因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制 )不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。「HTML骨架格式」<!-- 页面中最大的标签 根标签 --><html> <!-- 头部标签 --> <head> <原创 2022-05-09 15:32:12 · 100 阅读 · 0 评论 -
Web前端入门(一)初识WEB
1.认识WEB「网页」 主要是由文字、图像和超链接等元素构成,当然除了这些元素,网页中还可以包括音频、视频以及Flash等。「浏览器」 是网页显示、运行的平台。「浏览器内核」 (排版引擎、解释引擎、渲染引擎)负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。2.WEB标准「构成」 结构标准,表现标准和行为标准结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为标准用于对网页模型的定义及交互的编写(JavaScript)原创 2022-05-09 10:15:44 · 168 阅读 · 0 评论