前端基础
关注
分享
扫一扫
文章平均质量分 51
这里面的内容来自我的钟老师，怕丢了就写在博客上，方便以后自己看，我要把它们留在我的博客里
Ctrl_CV攻城狮
乱写的，自娱自乐自看
展开
-
jquery手风琴显示图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手风琴显示图片2</title> <script src="../js/jquery-3.3.1.js"></script> <script> $(function () { //当鼠标移入.原创 2021-10-21 22:52:52 · 110 阅读 · 0 评论 -
JavaScript基础第01天
01.目标02. rem单位1.em相对于父元素的字体大小来说的2.rem相对于html元素字体大小来说的3.rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制03.媒体查询语法简介p442...翻译 2022-05-20 17:15:32 · 102 阅读 · 0 评论 -
移动WEB开发rem适配布局
1.rem单位rem即root em，是一个相对单位，类似于em，em是父元素字体大小，不同的是rem的基准是根元素 ——html元素的字体大小。 比如根元素（html）设置font-size=12px；非根元素设置width: 2rem；则换成px表示就是24px。 使用rem可以很好来控制整个页面的元素大小2.媒体查询2.1 什么是媒体查询？媒体查询(Media Query )是CSS3新语法。 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏翻译 2022-05-14 20:29:17 · 131 阅读 · 0 评论 -
制作移动端静态网页（房屋装饰网站）
1.创建house.html效果图如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <!-- width=device-width 当前窗口宽度等于100% initial-scale=1 缩放级别为1--> <!-- 步骤一：适配移动端视口 --> <meta name="viewport" content="..原创 2022-04-28 14:58:47 · 2637 阅读 · 0 评论 -
开心消消乐方法3
这里是制作简易版开心笑笑乐的第三种方法代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>开心消消乐</title> <script src="js/jQuery.js"></script> <style> table { /* 调居中偏移 */ widt原创 2022-03-17 10:45:32 · 978 阅读 · 0 评论 -
开心消消乐方法2
这里是第二种开心消消乐的效果1.这种方法方便维护2.刷新一下就可以改变图形的位置代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>原创 2022-03-17 10:40:19 · 1171 阅读 · 0 评论 -
用table做开心消消乐效果方法1
完成后的效果图原创 2022-03-17 10:25:49 · 169 阅读 · 0 评论 -
CSS高级技巧
1. CSS布局的三种机制翻译 2022-04-25 17:28:30 · 384 阅读 · 0 评论 -
盒子模型(CSS重点)
一：盒子模型(CSS重点)1. 网页布局的本质2. 盒子模型(Box Model)所谓盒子模型:标准盒子模型3. 盒子边框(border)边框的样式：none：没有边框即忽略所有边框的宽度(默认值)solid：边框为单实线(最为常用的)dashed：边框为虚线dotted：边框为点线3.1 边框综合设置3.2 盒子边框写法总结表3.3 表格的细线边框<style>table {width: 50...翻译 2022-04-25 16:19:22 · 154 阅读 · 0 评论 -
CSS复合选择器/标签显示模式/行高/背景/三大特性
一. CSS复合选择器1. 后代选择器(重点)2. 子元素选择器3. 交集选择器4. 并集选择器（重点)测试题<!--主导航栏--><div class="nav"><ul><li><a href="#">公司首页</a></li><li><a href="#">公司简介</a></li><li&...翻译 2022-04-25 15:49:22 · 492 阅读 · 0 评论 -
四. CSS外观属性
1. color:文本颜色注意 我们实际工作中，用16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色2. text-align:文本水平对齐方式3. line-height:行间距4. text-indent:首行缩进5. text-decoration文本的装饰text-decoration通常我们用于给链接修改装饰效果6. CSS外观属性总结...翻译 2022-04-25 14:55:09 · 79 阅读 · 0 评论 -
三. CSS字体样式
1. font-size:字号2. font-family:字体3. Unicode字体4. font-weight:字体粗细5. font-style:字体风格6. font:综合设置字体样式(重点)翻译 2022-04-24 15:33:21 · 144 阅读 · 0 评论 -
二. CSS基础选择器
1. 选择器的作用找到特定的HTML页面元素2. 标签选择器3. 类选择器3.1 类选择器特殊用法-多类名4. id选择器5. id选择器和类选择器区别6. 通配符选择器7. 基础选择器总结...翻译 2022-04-24 15:22:02 · 73 阅读 · 0 评论 -
一. CSS层叠样式表
1. html局限性2. CSS作用3. CSS初识4. 引入css样式表（书写位置）4.1 行内式(内联样式)4.2 内部样式表(内嵌样式表)4.3 外部样式表(外链式)4.4 三种样式表总结(位置)5.CSS样式规则总结...翻译 2022-04-24 15:18:05 · 82 阅读 · 0 评论 -
链接标签
1. 链接标签2. 锚点(难点)3. a伪类翻译 2022-04-24 11:34:39 · 253 阅读 · 0 评论 -
表格标签
1. 创建表格总结：表格的主要目的是用来显示特殊数据的一个完整的表格有表格标签(table)，行标签(tr)，单元格标签(td）组成，没有列的标签<tr></tr>中只能嵌套<td></td> 类的单元格<td></td>标签，他就像一个容器，可以容纳所有的元素2. 表格属性3. 表头单元格标签th4. 表格标题caption5. 合并单元格5.1 合并...翻译 2022-04-24 11:22:49 · 350 阅读 · 0 评论 -
HTML5简介(补充. 浏览器私有前缀)
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。1. 私有前缀2. 提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;一. HTML5简介html5是超文本标记语言(HyperText Mark Language)的第5代版本，也是目前最新的html版本。作为新 HTML语言，具有新的元素，属性和行为。翻译 2022-04-24 11:04:26 · 378 阅读 · 0 评论 -
VS Code简介
1. VS Code简介2. VS Code安装官网下载地址：https://code.visualstudio.com/3. 文件目录管理File (文件) --- open floder(打开文件夹)4. 颜色主题5. 其他操作6. VS Code使用总结7. VS Code插件7.1安装方法7.2 推荐安装插件...翻译 2022-04-24 10:20:09 · 546 阅读 · 0 评论 -
九. 多列布局
1. 多列布局，常用属性翻译 2022-04-24 10:13:30 · 87 阅读 · 0 评论 -
八. 定位
1. 为什么使用定位2. 定位详解2.1 边偏移2.2 定位模式(position)2.2.1 静态定位(static)-了解2.2.2 相对定位(relative)-重要相对定位是元素相对于它原来在标准流中的位置来说的。(自恋型)效果图：2.2.3 绝对定位(absolute)-重要2.2.4 定位口诀2.2.5 固定定位(fixed)-重要3. 绝对定位的盒子居中4. 堆叠...翻译 2022-04-24 10:03:07 · 89 阅读 · 0 评论 -
七. 浮动
1. CSS布局的三种机制网页布局的核心——就是用CSS来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流)、浮动和定位，其中：1. 普通流(标准流)块级元素会独占一行，从上向下顺序排列;常用元素: div、hr、p、h1~h6、ul、ol、dl、form、table 。行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行;常用元素: span、a、i、em 等2. 浮动 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。3. 定位翻译 2022-04-23 18:01:10 · 161 阅读 · 0 评论 -
六. 弹性布局
1. Flex弹性布局特点1. 操作方便，布局极为简单，移动端应用很广泛；2. PC端浏览器支持情况较差；3. IE11或更低的版本，不支持或仅部分支持。建议：1. 如果是PC端页面布局，我们还是做传统布局（兼容性好，布局繁琐，局限性：不能在移动端很好的 布局）；2.如果是移动端或者不考虑兼容性问题的PC端页面布局，还是推荐使用 flex 弹性布局的。2. Flex布局原理1.flex 意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局翻译 2022-04-13 18:49:31 · 1598 阅读 · 0 评论 -
五. css3 2D转换
转换( transform )是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果转换( transform )你可以简单理解为变形移动：translate 旋转：rotate 缩放：scale 1. 二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系 2. 2D转换之移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。1.语法transform: translate(x, y翻译 2022-04-13 16:32:55 · 143 阅读 · 0 评论 -
四. css3动画
动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画， 常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果.1. 动画的基本使用制作动画分为两步︰1．先定义动画2．再使用(调用）动画1.1 用keyframes定义动画(类似定义类选择器)@keyframes 动画名称{0%{width: 100px;}100%{width: 200px; }}动画序列0%是动画的开翻译 2022-04-13 16:05:10 · 78 阅读 · 0 评论 -
三. css3新增选择器
1. 属性选择器2. 结构伪类选择器nth-child ( n )n可以是数字、关键字和公式 n如果是数字，就是选择第几个 常见的关键词有 even偶数 odd奇数 常见的公式如下（如果n是公式，则从0开始计算 但是第0个元素 或者超出了元素的个数会被忽略 3. 伪元素选择器注意: before和after必须有content属性before在内容的前面，after在内容的后面before和after创建一个元素，但是属于行内元素因为在dom里面看不见..翻译 2022-04-13 15:56:34 · 57 阅读 · 0 评论 -
二. css3新增颜色表达式
选择器{background-color: rgba(199, 166, 4, 0.1);} /* rgb 红绿蓝 0-255 a 透明度 0-1 */1.color:文本颜色作用: color 属性用于定义文本的颜色其取值方式有如下3种:表示：注意 我们实际工作中，用16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色...翻译 2022-04-13 15:50:24 · 165 阅读 · 0 评论 -
一.css字体样式
*CSS属性书写顺序(重点)建议遵循以下顺序: 1.布局定位属性： display / position / float / clear / visibility / overflow (建议 display 第 一个写，毕竟关系到 模式)2.自身属性： width / height / margin / padding / border / background3.文本属性： color / font / text-decoration / text-align / vertical-alig翻译 2022-04-12 17:59:37 · 2472 阅读 · 0 评论