随笔分类 -  html+css3

15.变形：平移、旋转与缩放
摘要：变形就是指通过 css 来改变元素的形状或位置 变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 translateX() 沿着由方向平移 translateY() 沿着 y 轴方向平移 translateZ() 沿着 z 轴方向平移平移元素 百分比是相对于自身计算的 几 阅读全文
posted @ 2022-03-26 01:26 随遇而安== 阅读(118) 评论(0) 推荐(0)
14.过渡与动画
摘要：过渡与动画 1、过渡 过渡（transition） 通过过渡可以指定一个属性发生变化时的切换方式 通过过渡可以创建一些非常好的效果，提升用户的体验 属性值 transition-property：指定要执行过渡的属性 多个属性间使用,隔开； 如果所有属性都需要过渡，则使用all关键字； 大部分属性都 阅读全文
posted @ 2022-03-26 01:23 随遇而安== 阅读(66) 评论(0) 推荐(0)
13.表格
摘要：1、表格 在现实生活中，我们经常需要使用表格来表示一些格式化数据： 课程表、人名单、成绩单... 同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格 在table中使用tr表示表格中的一行，有几个tr就有几行 在tr中使用td表示一个单元格，有几个 td就有几个单元格 rowspa 阅读全文
posted @ 2022-03-26 01:20 随遇而安== 阅读(43) 评论(0) 推荐(0)
12.雪碧图与渐变
摘要：1. 雪碧图 解决图片闪烁的问题： 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片 这样图片会同时加载到网页中就可以有效的避免出现闪烁的问题 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图 雪碧图的使用步骤： 阅读全文
posted @ 2022-03-26 01:17 随遇而安== 阅读(44) 评论(0) 推荐(0)
11.背景
摘要：1. PS 的基本设置 工欲善其事，必先利其器 在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置 这里就不详细介绍 PS 的安装了，因为网上一抓一大把，主要介绍 PS 的基本设置 左侧工具栏 调成 2 列，更方便使用 右侧工具栏 不需要的视图统统关掉 修改单位为像素 由于一般默认的单位是 阅读全文
posted @ 2022-03-26 01:14 随遇而安== 阅读(88) 评论(0) 推荐(0)
10.字体
摘要：1. 字体相关的样式 我们前面讲过字体的两个属性 color用来设置字体颜色 font-size字体的大小 em 相当于当前元素的一个font-size rem 相对于根元素的一个font-size 当然，字体的属性并不止这些 2. font-family font-family 字体族（字体的格式 阅读全文
posted @ 2022-03-26 01:12 随遇而安== 阅读(78) 评论(0) 推荐(0)
9.定位的简介
摘要：需求分析 按照我们之前所学知识，可以怎么实现呢？ 应该来说不难，很容易实现 CSS .box2 { width: 200px; height: 200px; background-color: yellow; /* 左外边距、上外边距 */ margin-left: 200px; margin-to 阅读全文
posted @ 2022-03-26 01:07 随遇而安== 阅读(107) 评论(0) 推荐(0)
8.高度塌陷与BFC
摘要：1. 高度塌陷 在浮动布局中，父元素的高度默认是被子元素撑开的 当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱 所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理 阅读全文
posted @ 2022-03-26 01:03 随遇而安== 阅读(52) 评论(0) 推荐(0)
7.浮动
摘要：1. 浮动的简介 通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性来设置于元素的浮动 none 默认值，元素不浮动 left 元素向左浮动 right 元素向右浮动 注意 元素设置浮动以后，水平布局的等式便不需要强制成立 元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位 阅读全文
posted @ 2022-03-26 00:11 随遇而安== 阅读(59) 评论(0) 推荐(0)
6.盒模型补充
摘要：盒模型补充 1. 盒子大小 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定 box-sizing用来设置盒子尺寸的计算方式（设置 width 和 height 的作用） .box { width: 200px; height: 200px; background-color: yello 阅读全文
posted @ 2022-03-26 00:07 随遇而安== 阅读(32) 评论(0) 推荐(0)
5.盒模型
摘要：1. 文档流（normalflow） 网页是一个多层的结构，一层摁着一层 通过 CSS 可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流 文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列 对于我们来元素主要有两个状态 在文档流中 不在文档流中（ 阅读全文
posted @ 2022-03-20 09:19 随遇而安== 阅读(63) 评论(0) 推荐(0)
4.样式继承与其他概念
摘要：1. 继承 样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上 继承是发生在祖先后后代之间的，继承的设计是为了方便我们的开发 利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式 注意，并不是所有的样式都会被继承： 比如背景相关 阅读全文
posted @ 2022-03-20 09:13 随遇而安== 阅读(41) 评论(0) 推荐(0)
3.CSS语法与选择器
摘要：1. CSS 简介 层叠样式表 网页实际上是一个多层的结构，通过 CSS 可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层 总之一句话，CSS 用来设置网页中元素的样式 使用 CSS 来修改元素样式的方式大致可以分为 3 种 内联样式（行内样式） 在标签内部通过style属性 阅读全文
posted @ 2022-03-20 09:10 随遇而安== 阅读(48) 评论(0) 推荐(0)
2.字符实体与语义标签
摘要：1. 字符实体 有些时候，在 HTML 中不能直接书写一些特殊符号，如： 多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格） 比如字母两侧的大于小于号（可能会被认为是标签并解析） 如果我们需要在网页中书写这些特殊的符号，则需要使用 html 中的实体（转义字符）实体的语法： 阅读全文
posted @ 2022-03-20 09:07 随遇而安== 阅读(151) 评论(0) 推荐(0)
1.前端简介
摘要：1. 软件的分类 1.1. 系统软件 Windows Linux macOS 1.2. 应用软件 Office QQ 1.3. 游戏软件 绝地求生 王者荣耀 2. 客户端与服务器 通常情况下，现在的软件一般由两个部分组成： 客户端：用户通过客户端来使用软件。 服务器：服务器负责在远程处理业务逻辑。 阅读全文
posted @ 2022-03-20 09:01 随遇而安== 阅读(141) 评论(0) 推荐(0)