摘要: 选择器(重点) 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名 阅读全文
posted @ 2020-10-13 21:47 清出于兰 阅读(122) 评论(0) 推荐(0) 编辑
摘要: 滑动门出现的背景 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和盒子paddin 阅读全文
posted @ 2020-10-13 21:20 清出于兰 阅读(87) 评论(0) 推荐(0) 编辑
摘要: CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主轴从左向右,侧轴默认从上到下 主 阅读全文
posted @ 2020-10-13 16:02 清出于兰 阅读(106) 评论(0) 推荐(0) 编辑
摘要: 精灵技术产生的背景 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的 阅读全文
posted @ 2020-10-13 14:21 清出于兰 阅读(272) 评论(0) 推荐(0) 编辑
摘要: 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画( 阅读全文
posted @ 2020-10-13 13:53 清出于兰 阅读(141) 评论(0) 推荐(0) 编辑
摘要: 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了, 这 阅读全文
posted @ 2020-10-13 13:52 清出于兰 阅读(172) 评论(0) 推荐(0) 编辑
摘要: 普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。 CSS的定位机制有3种:普通流(标准流)、浮动和定位。 html语言当中另外一个相当重要的概念 标准流!或者普通流。普通流实际上就是一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块 阅读全文
posted @ 2020-10-13 13:47 清出于兰 阅读(553) 评论(0) 推荐(0) 编辑
摘要: 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。 记忆技巧: 交集选择器 是 并且的意思。 即.. 阅读全文
posted @ 2020-10-13 13:44 清出于兰 阅读(405) 评论(0) 推荐(0) 编辑
摘要: CSS CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。 CSS以HTML为基础,提供了丰富的功能,如字体、 阅读全文
posted @ 2020-10-13 13:40 清出于兰 阅读(881) 评论(0) 推荐(0) 编辑
摘要: 表单的目的是为了跟用户进行交互,收集用户资料 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。 表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信息: 一个表单中通常还需要包含一些说明性的文字,提示用户 阅读全文
posted @ 2020-10-13 13:39 清出于兰 阅读(1017) 评论(0) 推荐(0) 编辑
摘要: 在HTML网页中,要想创建表格,就需要使用表格相关的标签。 表格包含三对HTML标签,分别为 <table></table>、<tr></tr>、<td></td>,他们是创建表格的基本标签,缺一不可 1.table用于定义一个表格。 2.tr 用于定义表格中的一行,必须嵌套在 table标签中,在 阅读全文
posted @ 2020-10-13 13:38 清出于兰 阅读(360) 评论(0) 推荐(0) 编辑
摘要: 表格 table(会使用) 表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。 创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签。创建表格的基本语法格式如下: <table> <tr> <td>单元格内的文字</td> ... </tr> ...</tab 阅读全文
posted @ 2020-10-13 13:37 清出于兰 阅读(122) 评论(0) 推荐(0) 编辑
摘要: HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 <HTML><head><title></title></head><body></body></HTML> 1 阅读全文
posted @ 2020-10-13 13:35 清出于兰 阅读(283) 评论(0) 推荐(0) 编辑
摘要: 外边距可让块级盒子水平居中,但需满足两个条件: 1、盒子必须指定宽度(width) 2、盒子左右外边距都设置为auto。 需注意: 1、使用margin定义块元素的垂直外边距时,可能会出现外边距合并 2、嵌套块元素设置垂直外边距时父元素会跟子元素一起塌陷,即父元素外边距会取最大值。 解决方案:1、为 阅读全文
posted @ 2020-10-13 13:33 清出于兰 阅读(195) 评论(0) 推荐(0) 编辑
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>产品模块</tit 阅读全文
posted @ 2020-10-13 13:32 清出于兰 阅读(200) 评论(0) 推荐(0) 编辑
摘要: mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseente 阅读全文
posted @ 2020-10-13 11:17 清出于兰 阅读(124) 评论(0) 推荐(0) 编辑
摘要: 动画函数封装 1. 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 2. 动画 阅读全文
posted @ 2020-10-13 11:16 清出于兰 阅读(82) 评论(0) 推荐(0) 编辑