- 博客(66)
- 收藏
- 关注
RSS订阅原创 移动端布局——移动端基础知识
一、移动端特点PC端网页和移动端网页有什么不同？PC屏幕大，网页固定版心 手机屏幕小，网页宽度多数为100%如何在电脑里面边写代码边调试移动端网页效果？谷歌模拟器1.1 屏幕尺寸（了解）屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量1.2 分辨率PC分辨率1920*1080 1366*768 .....缩放150%(1920/150%)*(1080/150%)总结硬件分辨率（出厂设置） 缩放调节的分辨率（软件设置）分辨率分类物理...
2022-03-31 13:35:42
324
原创 移动web网页开发——动画
一、动画1.1 动画使用animation添加动画效果思考：过渡可以实现什么效果？答：实现2个状态间的变化过程动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 构成动画的最小单元：帧或动画帧1.2 动画的实现步骤实现步骤1、定义动画两个状态之间的变化：@keyframes 动画名称 { from {} to {} }多个状态之间的变化：...
2022-03-30 16:37:52
3355
原创 移动web网页开发——3D转换
一、空间转换空间：是从坐标轴角度定义的。x、y、和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同 空间转换也叫3D转换 属性：transform 1.1 空间位移语法transform:translate3d(x,y,z); transform:translateX(值); transform:translateY(值); transform:translateZ(值);取值（正负均可）像素单位数值 百分比1.2 透视使用perspecti...
2022-03-29 20:36:50
639
原创 移动web网页开发——2D转换
一、平面转换1.1 平面转换概念平面转换改变盒子在平面内的形态（位移、旋转、缩放） 2D转换平面转换属性transform1.2 位移语法transform:translate(水平移动距离，垂直移动距离 );取值（正负均可）像素单位数值 百分比（参照物为盒子自身尺寸）注意：x轴正向为右，Y轴正向为下技巧translate()如果只给出一个值，表示x轴方向移动距离 单独设置某个方向的移动距离：translateX() & translateY..
2022-03-29 14:11:03
596
原创 移动Web网页开发——字体图标
一、字体图标1.1 字体图标的具体使用将iconfont文件夹放在代码根目录步骤：引样式表 调用类名注意：如果是通过类名来实现字体的效果，就不能使用标签选择器来设置字体了，因为标签选择器的权重小于类选择器 案例：淘宝购物车布局标签li > span*3字体图标引入字体图标样式表 购物车和箭头span调用字体图标类名1.2 上传矢量图思考：如果图标库没有项目所需的图标怎么办答：IconFont网...
2022-03-27 16:05:54
558
原创 小兔鲜儿案例
三、项目结构搭建注意点：将基础公共样式base.css写在index.css下面，可以使后面自己写的样式覆盖基础的样式一、header部分开发注意点：logo部分通常使用h1标签包裹，来提高权重...
2022-03-26 19:58:43
998
原创 项目前置知识
二、项目前置认知1.1 生活中的例子网页:相当于每页纸网站：相当于一本书籍用户翻阅的时候，看的是每页纸上的内容 由多页纸整合在一起，就是完整的一本书籍了1.2 网页与网站的关系在互联网中，网站类似于是一本书，网页就是这本书的每一页比如：淘宝、京东等就是一个网站，类似于是一本书 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸 多个同主题的网页整合在一起，就称之为网站1.3 网页与网站的概念网页：网站中的每一“页”。例如：淘宝.
2022-03-20 17:24:49
393
原创 CSS样式补充
一、项目样式补充1.1 精灵图的介绍场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度例如：需要在网页中展示8张小图片8张小图片分别发送 ->发送8次 合成一张精灵图发送 ->发送1次1.3 精灵图的使用步骤 创建一个盒子 通过PxCook量取图片大小，将小图片的宽高设置给盒子 将精灵图设置为盒子的背景图片 通过PxCook测量小图片左上角坐标，分别取负
2022-03-20 16:05:07
90
原创 CSS进阶
二、装饰1.1 认识基线（了解）基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）1.2 文字对齐问题场景：解决行内/行内块元素垂直对齐问题问题：当图片和文字在一行中显示时，其实底部不是对齐的，而是图片底部和文字基线是对齐的1.3 垂直对齐方式属性名：vertical-align（设置行内、行内块元素的垂直对齐方式）属性值：属性值 效果 baseline 默认，基线对齐 top 顶部对齐 middle ...
2022-03-20 13:24:59
506
原创 CSS定位
一、定位1.1 网页常见布局方式1.标准流块级元素独占一行 ->垂直布局 行内元素/行内块元素一行显示多个 ->水平布局2.浮动 可以让原本垂直布局的块级元素变成水平布局 3.定位 可以让元素自由的摆放在网页的任意位置 一般用于盒子之间的层叠情况 1.2 定位的常见应用场景1、可以解决盒子与盒子之间的层叠问题定位之后的元素层级最高，可以层叠在其他盒子上面2、可以让盒子始终固定在屏幕中的某个位置2.1 定位初体验1.需...
2022-03-19 13:49:13
472
原创 浮动及应用案例
三、标准流目标：能够认识标准流的默认排布方式及其特点标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素常见标准流排版规则：块级元素：从上往下，垂直布局，独占一行 行内元素 或行内块元素：从左往右，水平布局，空间不够自动折行四、浮动1.1 浮动的作用早期的作用：图文环绕现在的作用：网页布局 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右 2.1 浮动的代码属性名：float属性值：.
2022-03-17 22:18:59
1008
原创 伪类和伪类元素
一、结构伪类选择器目标：能够使用结构伪类选择器在HTML中定位元素1、作用与优势：作用：根据元素在HTML中的结构关系查找元素 优势：减少对于HTML中类的依赖，有利于保持代码整洁 场景：常用于查找某父级选择器中的子元素2、选择器选择器 说明 E:first-child { } 匹配父元素中第一个子元素，并且是E元素 E:last-child { } 匹配父元素中最后一个元素，并且是E元素 E:nth-child(n) { } 匹配父
2022-03-15 16:08:03
399
原创 CSS盒模型
三、盒子模型1.1 盒子模型的介绍1.盒子的概念页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角更方便的进行布局 浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子2、盒子模型CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距（margin）构成，这就是盒子模型３、记忆：可以联想现实中的包装盒２.1内容的宽度和高度作用：利用width和height属.
2022-03-13 21:28:44
612
原创 CSS三大特性
四、CSS三大特性1.1 继承性的介绍特性：子元素有默认继承父元素样式的特点（子承父业）可以继承的常见属性：color font-style、font-weight、font-size、font-family text-indent、text-align line-height ......注意点：可以通过调试工具判断样式是否可以继承拓展 继承的应用好处：可以在一定程度上减少代码常见应用场景：可以直接给ul设置list-style...
2022-03-12 16:15:36
388
原创 综合案例——普通导航、五彩导航
<!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>D.
2022-03-12 09:27:27
272
原创 元素显示模式及转换
三、元素显示模式1.1 块级元素属性：display:block显示特点：独占一行（一行只能显示一个） 宽度默认是父元素的宽度，高度默认由内容撑开 可以设置宽高代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....2.1 行内元素属性：display:inline;显示特点：一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高代表标签：a、span、b、u、i、s、strong、in...
2022-03-11 20:53:09
567
原创 CSS背景相关属性
1.1 背景颜色属性名：background-color(bgc)属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制.....注意点：背景颜色默认值是透明：rgba(0,0,0,0)、transparent 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中习惯先给盒子设置背景颜色 <style> div { width: 400px; height: 400px; ...
2022-03-11 17:08:38
662
原创 CSS复合选择器
一、选择器进阶1.1 后代选择器：空格作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素选择器语法：选择器1 选择器2 { css }结果：在选择器1所找到的标签的后代（儿子、孙子、重孙子...）中，找到满足选择器2的标签，设置样式 <style> .father p { color: red; } </style><body> <!-- 需求：只让小姐姐变红（
2022-03-11 14:01:44
335
原创 小米官网卡片案例
<!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>D.
2022-03-10 20:44:46
359
原创 综合案例--新闻网页案例
<!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>D.
2022-03-10 20:17:38
346
原创 Chrome调试工具
四、Chrome调试工具1.1 Chrome调试工具操作打开方式：1、右击-->检查 2、看哪里选择元素两种常见方法：1、在Elements中点击 2.单击这个标志之后再网页中点击相应元素控制样式1、修改属性值 2、添加属性 3、控制样式生效特殊情况1、出现删除线 2、出现小三角形 出现删除线：当前属性处于失效状态（元素被覆盖或者注释） 出现三角形：出现语法问题...
2022-03-10 19:49:38
221
原创 font字体
三、字体和文本样式1.1 字体大小属性名：font-size 取值：数字+px注意点：谷歌浏览器默认文字大小是16px 单位需要设置，否则无效<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
2022-03-10 17:41:49
1246
原创 CSS初识和CSS基本选择器
一、基础认知1.1 CSS的介绍CSS（Cascading style sheets）：层叠样式表CSS作用是什么？给页面中的HTML标签设置样式1.2 CSS语法规则写在哪里？css写在style标签中，style标签一般写在head标签里面，title标签下面怎么写？<style> 选择器{ css的属性名:属性值; //样式的键值对 }</style><style> ..
2022-03-06 20:33:07
273
原创 HTML基础——列表和表格标签
一、列表标签1.列表的应用场景场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等 特点：按照行的方式，整齐显示内容 种类：无序列表、有序列表、自定义列表2、无序列表2.1 无序列表场景：在网页中表示一组无顺序之分的列表，如：新闻列表标签组成：标签名 说明 ul 表示无序列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 显示特点：列表的每一项前默认显示圆点标识注意点：ul标签中只允许包含l.
2022-03-03 21:39:52
2319
原创 HTML初识
一、基础认知1.3.2 Web标准的构成web标准中分成三个构成：构成 语言 说明 结构 HTML 页面元素和内容 表现 CSS 网页元素的外观和位置等页面样式 行为 Javascript 网页模型的定义与页面交互 二、HTML标签学习1.1 排版标签1.1.1标题标签<h1>~<h6>特点：文字都有加粗 文字都有变大，并且从h1到h6逐渐减小 独占一行注意点：h1标签对于网页尤为.
2022-03-03 12:28:49
72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人