随笔分类 -  HTML5+CSS3

响应式布局
摘要：响应式布局 一、媒体查询 <style> /* 使用媒体查询 语法： @media 查询规则{} 媒体类型： all：所有设备 print：打印设备 screen：带屏幕的设备 speech：屏幕阅读器 */ /* 媒体特性： width：视口宽度 height：视口高度 min-width：视口的 阅读全文
posted @ 2020-11-25 12:06 娜豆 阅读(140) 评论(0) 推荐(0)
视口及媒体查询
摘要：一、像素及视口 1.1 像素 像素 - 屏幕是由一个个发光的小点构成，即像素构成 - 分辨率：1920 x 1080 指的是屏幕中小点的数量 - 前端中像素有：css像素 和 物理像素 - 物理像素：上述所说的小点点就属于物理像素 - css像素：编写网页时，用的是css像素 - 浏览器在显示网页时 阅读全文
posted @ 2020-11-12 10:14 娜豆 阅读(424) 评论(2) 推荐(0)
弹性盒flex
摘要：一、弹性盒（伸缩盒） /* flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变 */ /* 块级弹性盒 */ display: flex; /* 行内弹性盒 */ display: inline-flex; 二、弹性容器 2.1 flex-direction：指定容器中弹性元素的排列方 阅读全文
posted @ 2020-11-07 17:57 娜豆 阅读(130) 评论(0) 推荐(0)
less——css预处理语言
摘要：一、less的由来 若页面多处使用同一属性的同个值，为了便于维护代码，需要采用变量的形式来解决。 虽然css原生也支持变量的设置还有计算函数，但是这些兼容性不太好（针对ie8及以下的版本），因此产生了less。 <!DOCTYPE html> <html lang="en"> <head> <met 阅读全文
posted @ 2020-11-06 14:48 娜豆 阅读(308) 评论(0) 推荐(0)
过渡/动画/变形
摘要：一、过渡（transition） 1.1 transition-property：指定要执行过渡的属性 1.2 transition-duration: 指定过渡效果的特效时间 1.3 transition-timing-function 过渡的时序函数 1.4 transition-delay：过 阅读全文
posted @ 2020-11-04 16:57 娜豆 阅读(130) 评论(0) 推荐(0)
列表/表格/表单
摘要：一、列表（list） 1.1 HTML中的list有三种： 有序列表（ol > li） 无序列表（ul > li） 定义列表（dl > dt > dd） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lis 阅读全文
posted @ 2020-11-03 21:52 娜豆 阅读(158) 评论(0) 推荐(0)
渐变
摘要：一、渐变 - 渐变可以实现从一个颜色向其它颜色过渡，需要设置background-image 二、线性渐变（linear-gradient） 语法： background-image: linear-gradient(位置, 颜色 位置, 颜色 位置...); ① 渐变的方向： - to left 阅读全文
posted @ 2020-10-31 10:58 娜豆 阅读(268) 评论(0) 推荐(0)
背景background
摘要：一、background 1.1 基本属性 background-color：设置背景颜色 background-image：设置背景图片 background-repeat：设置背景的重置方式 - repeat：默认值，背景会沿着x轴、y轴双方向重复 - repeat-x：沿着x轴方向重复 - r 阅读全文
posted @ 2020-10-30 12:50 娜豆 阅读(196) 评论(0) 推荐(0)
文本的样式
摘要：一、text-align（文本水平对齐） - left：左对齐 - right：右对齐 - center：居中对齐 - justify：两端对齐 二、vertical-align（垂直对齐） - baseline：默认值，基线对齐 - top：顶端对齐 - bottom：底部对齐 - middle： 阅读全文
posted @ 2020-10-29 13:59 娜豆 阅读(167) 评论(0) 推荐(0)
字体font
摘要：一、字体 1.1 相关样式 color：设置字体颜色 font-size：字体大小 与font-size相关单位 em：相当于当前元素的一个font-size rem：相当于根元素的一个font-size font-family：字体族（字体的格式） - 可选值： serif：衬线字体 sans-s 阅读全文
posted @ 2020-10-29 13:08 娜豆 阅读(488) 评论(0) 推荐(0)
定位position
摘要：一、定位 - 定位可以对页面元素进行微调（页面大都使用float进行布局，定位进行微调） - position的属性值： static：默认值，元素是静止的，没有开启定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 sticky：粘滞定位 二、相对定位（relati 阅读全文
posted @ 2020-10-29 13:00 娜豆 阅读(139) 评论(0) 推荐(0)
float引起的高度塌陷问题
摘要：一、float布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> /* 设置float会使元素脱离文档流 脱离文档流的特点： 块元素： 1、块元素不再独占页面的一 阅读全文
posted @ 2020-10-29 12:59 娜豆 阅读(402) 评论(0) 推荐(0)
盒子大小 轮廓阴影 圆角
摘要：一、盒子大小（box-sizing） - 默认情况下，盒子可见框大小由内容区、内边距和边框组成 box-sizing：用来设置盒子尺寸的计算方式（设置width和height的作用） 可选值： content-box：默认值，宽度和高度用来设置内容区域 border-box：宽度和高度用来设置整个盒 阅读全文
posted @ 2020-10-29 12:56 娜豆 阅读(155) 评论(0) 推荐(0)
文档流 颜色单位
摘要：一、文档流（normal flow） - 网页是一个多层的结构，一层摞着一层 - 最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列 - 所创建的元素主要有两种状态 在文档流中 脱离文档流 二、颜色单位 2.1 RGB值 - RGB通过三种颜色的不同浓度来调配出不 阅读全文
posted @ 2020-10-29 12:54 娜豆 阅读(83) 评论(0) 推荐(0)
长度单位 盒子模型
摘要：一、长度单位 长度单位 解析 像素 ① 屏幕（显示器）实际上是由一个个的小点点构成的 ② 不同的屏幕像素大小是不同，像素越小的屏幕显示的效果越清晰 ③ 相同像素在不同的设备下显示效果不同 百分比 设置百分比可以使子元素跟随父元素的改变而改变 em ① em是相对于元素的字体大小来计算的 ② 1 em 阅读全文
posted @ 2020-10-29 12:52 娜豆 阅读(218) 评论(0) 推荐(0)
选择器及优先级
摘要：一、选择器 1. 基本选择器 ① 元素选择器（标签） ② ID选择器（唯一性 ） ③ 类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /* 元素选择器 * 阅读全文
posted @ 2020-10-29 12:40 娜豆 阅读(303) 评论(0) 推荐(0)
<img> 标签 元素形式
摘要：一、<img>的属性 1.1 src：图片路径 1.2 alt：对图片进行描述，一般不显示，若无法显示，则会出现（一些浏览器会显示） 主要用法：搜索引擎会根据alt中的内容来识别图片；如果不写alt属性则图片不会被搜索引擎所收录 注意： 一般情况在PC端，不建议修改图片的大小（由美工进行裁定）。 但 阅读全文
posted @ 2020-10-29 10:53 娜豆 阅读(394) 评论(0) 推荐(0)
音视频标签
摘要：一、音频 1.1 属性 controls：是否显示控制条 autoplay：是否自动播放 一般的浏览器并不支持（第一次打开时并没有自动播放，播放之前再刷新就有了；这是由于若第一次播放，但是如果客户端的音量过大，则造成用户体验不佳） loop：是否循环播放 1.2 写法 第一种： <audio src 阅读全文
posted @ 2020-10-29 10:18 娜豆 阅读(86) 评论(0) 推荐(0)
<meta>标签
摘要：一、<meta>的概念和作用 meta主要设置网页的一些元数据，是针对搜索引擎或者浏览器的解析而设置的 位置：放在<head>标签中 二、属性attribute ① charset：指定网页的字符集（一般的软件之类的默认都是UTF-8，但是最好还是标上；这是由于以前平台间的兼容性导致的），用于解决乱 阅读全文
posted @ 2020-10-29 10:11 娜豆 阅读(83) 评论(0) 推荐(0)