![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 60
hello_sunny123
这个作者很懒,什么都没留下…
展开
-
HTML自闭合(self-closing)标签
HTML自闭合(self-closing)标签标签:设置页面元信息的:设置网页所有链接的相对目录(如根目录)的:换行:水平线:图像:表单元素:在表格table中定义一个或多个列的属性:定义框架的一个窗口(已遗弃):定义文档与外部资源的关系的链接: 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像)。:元素允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 或者 标签提供参数。: HTML5 中新增的,标签定义了一个容器,用来原创 2021-12-03 21:59:21 · 1521 阅读 · 0 评论 -
前端中的X,Y坐标
`clientX` 返回触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.`clientY` 返回触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化.pageX触点相对于HTML文档左边沿的的X坐标. 和 clientX 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏原创 2021-12-04 18:03:18 · 922 阅读 · 1 评论 -
58 精灵图技术
1.为什么需要精灵图?一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加速度,出现了CSS精灵技术(也称CSs Sprites. CSS 雪碧)。 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。精灵技术目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度2.精灵图的使用使用精灵原创 2021-08-09 23:04:37 · 364 阅读 · 0 评论 -
57 元素的显示隐藏
元素的显示与隐藏类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!本质:让一个元素在页面中隐藏或者显示出来。一. display显示隐藏(重点) -----人死了钱也没了display属性用于设置一个元素应如何显示。display: none ;隐藏对象display : block ;除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后(记住这里不是删除),不再占有原来的位置。后面应用及其广泛,搭配JS可以做很多的网页特效。代码:<!DOC转载 2021-08-09 15:17:23 · 113 阅读 · 0 评论 -
56 案例淘宝焦点图布局 网页布局总结
案例淘宝焦点图布局如图所示:案例:淘宝焦点图布局制作1.大盒子我们类名为: tb-promo 淘宝广告2.里面先放一张图片。3.左右两个按钮用链接就好了。左箭头prev右箭头next4.底侧小圆点u继续做。类名为promo-nav代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib原创 2021-08-09 14:22:51 · 1891 阅读 · 0 评论 -
55 定位
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2021-08-07 17:35:46 · 93 阅读 · 0 评论 -
53 PS切图
一.图层切图步骤:(1)首先用PS软件打开一张后缀名为.psd的图图(2)选图---->点击小眼睛看是不是所需要的全部图,如果是全部就快速导出为png;如果部分图,就把其他的找出来,全选他们(按住shift不动+鼠标右键),在工具栏选中图层,合并图层,合并后快速导出为png---->保存到文件夹二.切片贴图...原创 2021-08-05 14:48:31 · 159 阅读 · 0 评论 -
52 常见的网页布局 、浮动的两个注意点 、清除浮动
一.常见的网页布局代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-08-03 16:18:22 · 157 阅读 · 0 评论 -
51 浮动
不用浮动的代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...原创 2021-08-02 21:44:50 · 63 阅读 · 0 评论 -
50 圆角边框 、盒子阴影、 文字阴影
0代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <原创 2021-07-29 21:09:33 · 94 阅读 · 0 评论 -
38 块级元素和行内元素的转换模式
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g.原创 2021-07-27 16:48:19 · 94 阅读 · 0 评论 -
49 综合案例-box布局
代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <.原创 2021-07-26 16:04:52 · 193 阅读 · 0 评论 -
48 PS基本操作
下载PS(1)PS2020链接:链接:https://pan.baidu.com/s/1GlFZfvClQsK7JH8eFY0mnQ提取码:flcc(2)PS2019链接:https://pan.baidu.com/s/1IjdKfVf53Nhez24HY3K54Q提取码:qn3i原创 2021-07-25 20:02:10 · 93 阅读 · 0 评论 -
47 盒子模型--外边距合并
原始代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title.原创 2021-07-23 13:00:38 · 168 阅读 · 1 评论 -
46 盒子模型外边距margin
一.盒子模型外边距margin代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-12 20:57:21 · 109 阅读 · 4 评论 -
45padding不会撑开盒子的情况
padding不会撑开盒子的情况代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-07-12 20:30:35 · 181 阅读 · 0 评论 -
44 新浪导航 ,小米边栏 练习
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2021-07-12 19:26:21 · 134 阅读 · 0 评论 -
43 盒子模型
一.边框代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2021-07-12 17:16:03 · 86 阅读 · 2 评论 -
42 CSS的三大特性
一.层叠性代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-07-12 11:14:52 · 86 阅读 · 0 评论 -
41 图片背景综合-五彩导航图
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&.原创 2021-07-11 20:08:20 · 1606 阅读 · 0 评论 -
40 CSS的背景
一.背景颜色代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-07-09 15:02:53 · 101 阅读 · 0 评论 -
39 简洁版小米侧边栏练习
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title..原创 2021-07-09 14:49:42 · 90 阅读 · 0 评论 -
37 元素模式(行内元素,块元素,行内块元素)
CSS的元素显示模式了解元素的显示模式可以更好的让我们布局页面.1.什么是元素的显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>.HTML元素一般分为块元素和行内元素两种类型。2.元素显示模式的分类3.元素显示模式的转换一.块元素常见的块元素有<hl>~<h6>、<p>、&原创 2021-07-08 21:20:01 · 585 阅读 · 1 评论 -
36 CSS 复合选择器
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签)复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。一.后代选择器(重要)后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代原创 2021-07-08 09:25:02 · 113 阅读 · 0 评论 -
35 快速格式化代码
VScode 保存代码时自动格式化代码(1)安装插件 vetur(2)文件-----首选项-----设置;(3)工作区-----文本编辑器-----正在格式化-----Format On Save(勾选);测试代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="原创 2021-07-07 20:13:06 · 163 阅读 · 0 评论 -
34 emmet 语法快速生成CSS样式
快速生成 CSS 样式语法CSS 基本采取简写形式即可1. 比如 w200 按 tab 可以生成 width: 200px;2. 比如 lh26 按 tab 可以生成 line-height: 26px;代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-07-07 17:16:36 · 171 阅读 · 0 评论 -
33 emmet 语法生成 html标签
快速生成 HTML 结构语法1. 生成标签直接输入标签名按 tab 键即可,比如 div 然后 tab 键,就可以生成2. 如果想要生成多个相同标签,加上 * 就可以了,比如 div*3 就可以快速生成3个 div3. 如果有父子级关系的标签,可以用 > 比如 ul>li 就可以了4. 如果有兄弟关系的标签,用 + 就可以了,比如 div+p5. 如果生成带有类名或者id名字的,直接写 .demo 或者 #two ,tab键就可以了6. 如果生成的 div 类名是有顺序的,可以用自增原创 2021-07-07 16:47:56 · 186 阅读 · 0 评论 -
32 chrome调试工具的使用
Chrome 调试工具Chrome 浏览器提供了一个非常好用的调试工具,可以用来调试我们的 HTML 结构和 CSS 样式。使用调试工具1. Ctrl+滚轮 可以放大开发者工具代码大小。2. 左边是 HTML 元素结构,右边是 CSS 样式。3. 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。4. Ctrl+0 复原浏览器大小。5. 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。6. 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。原创 2021-07-07 14:38:02 · 86 阅读 · 0 评论 -
31 CSS 综合案例新闻
写一个新闻网页,要求和所给的网页一样文本北方高温明日达鼎盛 京津冀多地地表温度将超60℃2019-07-03 16:31:47 来源: 中国天气网 搜索中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。气温41.4℃!地温66.5!转载 2021-07-07 13:44:56 · 2551 阅读 · 0 评论 -
30 CSS的引入方式
按照 CSS 样式书写的位置(或者引入的方式) , CSS样式表可以分为三大类:1.内部样式表(嵌入式)内部样式表(内嵌样式表)是写到html页面内部,是将所有的 CSS 代码抽取出来,单独放到一个<style>标签中。<style> div{ color: red; font-size: 12px; }</style><style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的原创 2021-07-05 15:18:27 · 59 阅读 · 0 评论 -
29 CSS 文本属性
CSS Text (文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。一.文本颜色color 属性用于定义文本的颜色。div { color: red;}开发中最常用的是十六进制.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c原创 2021-07-04 21:25:21 · 113 阅读 · 2 评论 -
28 CSS字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。一.字体属性CSS 使用 font-family 属性定义文本的字体系列p { font-family: "微软雅黑";}div { font-family: Arial,'Microsoft YaHei',"微软雅黑";}代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-07-04 14:24:03 · 152 阅读 · 2 评论 -
27 选择器的分类
一:选择器分类选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。基础选择器是由单个选择器组成的基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器...原创 2021-07-03 16:38:46 · 595 阅读 · 0 评论 -
26 CSS介绍
一.CSS 语法规范使用 HTML 时,需要遵从一定的规范, CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰,首先需要了解 CSS 样式规则。CSS 规则由两个主要的部分构成:选择器以及一条或多条声明。(1)选择器是用于指定CSS样式的 HTML 标签,花括号内是对该对象设置的具体样式(2)属性和属性值以"键值对"的形式出现(3)属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等(4)属性和属性值之间用英文":"分开(5)多个"键值对"之间用英文";"进行区分代码:&l原创 2021-07-01 10:53:58 · 93 阅读 · 0 评论 -
25 CSS简介
CSS的主要使用场景就是美化网页,布局页面的.1. HTML的局限性说起HTML,这其实是个非常单纯的家伙,他只关注内容的语义。比如<h1>表明这是一个大标题,<p>表明这是一个段落, <img>表明这儿有一个图片, <a>表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐……2. CSS-网页的美容师CSS 是层叠样式表( Cascading Style原创 2021-07-01 09:50:28 · 78 阅读 · 0 评论 -
24 查阅文档
经常查阅文档是一个非常好的学习习惯。推荐的网址:(1)百度:http://www.baidu.com(2)W3C: http://www.w3school.com.cn/(3)MDN: https://developer.mozilla.org/zh-CN/原创 2021-06-30 20:11:54 · 59 阅读 · 0 评论 -
23 表单标签综合案例
做一个表单如图代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-06-30 19:38:55 · 516 阅读 · 0 评论 -
22 表单标签
表单组成:在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。一:表单域表单域是一个包含表单元素的区域。在 HTML 标签中, 标签用于定义表单域,实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器.<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件</form>常见属性基础班来说,我们暂时不用表单域提交数据,只需要写上 form 标原创 2021-06-28 17:05:49 · 391 阅读 · 0 评论 -
21 列表标签
表格是用来显示数据的,那么列表就是用来布局的。列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。根据使用情景不同,列表可以分为三大类:无序列表、有序列表和自定义列表。1.无序列表(重点)<ul>标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。无序列表的基本语法格式如下:<ul> <li>列表项1</li> <li>列表项2</li>原创 2021-06-25 16:17:08 · 75 阅读 · 1 评论 -
20 表格标签案例
制作一个表格(1)先书制作表格的结构.1.第一行里面是th表头单元格2.第二行开始里面是td普通单元格3.单元格里面可以放任何元素,文字、链接、图片等都可以(2)后书写表格属性.1.用到宽度、高度、边框cellpadding和celspacing2.表格浏览器中对齐align代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2021-06-25 10:26:01 · 144 阅读 · 1 评论