CSS
文章平均质量分 92
kuiini
fortunate enough
展开
-
移动Web学习05
五、响应式网页解决方案:媒体查询@media (条件) { html { background-color: green; }}Bootstrap1、媒体查询@media (媒体特性) { 选择器 { 样式 }}媒体特性:max-width: 最大宽度min-width: 最小宽度示例:<!DOCTYPE html><html lang="en"><head&g原创 2024-03-09 16:34:32 · 948 阅读 · 1 评论 -
移动Web学习04
* vw 和 vh 是相对视口宽高计算结果,可以直接实现移动端适配效果 */(1/100 视口宽度)(视口宽度)→ 确定。原创 2024-03-08 00:12:14 · 292 阅读 · 1 评论 -
移动Web学习03
* 1.使用媒体查询,给不同视口的屏幕设置不同的HTML字号 */initial-scale=1.0:缩放1倍(不缩放)/* 视口宽度是375,网页背景色是绿色 */作用:防止图片在高分辨率频幕下模糊失真。/* 2.使用rem单位书写尺寸 *//* 1.给HTML标签加字号 *//* 使用rem单位书写尺寸 */作用:导入 less 公共样式文件。概念:设计稿里面每个元素的尺寸的。写法:在 less 文件的。提示:文件夹名称后面添加。份,HTML标签的字号为。写法:在 less 文件。原创 2024-03-07 00:13:15 · 1002 阅读 · 1 评论 -
移动Web学习02
backwards:开始状态 *//* 动画二:从 200*100 变化到 300*300 变化到 800*500 *//* 当动画的开始状态样式跟盒子默认样式相同时,可以省略动画开始状态的代码 *//* steps:分布动画,工作中,配合精灵图实现精灵动画 *//* 百分比:表示的意思是动画时长的百分比 *//* 重复次数:infinite:无限循环 *//* 动画一:宽度从200变化到800 *//* alternate:反向 *//* linear:匀速 *//* 动画名称 *//* 动画时长 */原创 2024-03-05 14:22:54 · 294 阅读 · 1 评论 -
移动Web学习01
* 多重转换:以第一种转换形态的坐标轴为准 *//* 鼠标移入到父级盒子,son 改变位置 *//* 百分比:参照盒子自身尺寸计算结果 *//* 鼠标悬停到图片上面,添加旋转效果 *//* 修改宽高尺寸,从左上角开始缩放 *//* 鼠标移入box,图片边走边转 *//* 向左向上移动自身尺寸的一半 *//* 鼠标悬停时的动态效果 *//* 旋转会改变坐标轴向 *//* 大于1,表示放大 *//* 小于1,表示缩小 *//* 先平移再旋转 *//* 等于1,不变 *//* 有层叠性 */原创 2024-03-03 14:56:56 · 979 阅读 · 0 评论 -
CSS高级技巧【学习笔记】
CSS 高级技巧:定位、CSS 精灵以及其他 CSS 属性原创 2024-01-25 18:55:58 · 703 阅读 · 1 评论 -
学习制作网页——学成在线首页
一、准备工作1、项目目录网站根目录是指存放网站的第一层文件夹,内部包含当前网站的所有素材,包含 HTML、CSS、图片、JavaScript等等。建立文件夹:studyimages 文件夹:存放固定使用1的图片素材,例如:logo、样式修饰图等等uploads 文件夹:存放非固定使用的图片素材,例如:商品图、宣传图需要上传的图片css 文件夹:存放 CSS 文件(link 标签引入)base.css:基础公共样式,例如:清除默认样式、设置网页基本样式index.css:首页 C原创 2023-12-19 22:44:54 · 1081 阅读 · 1 评论 -
CSS 基础知识【学习笔记】03
第五周前端学习笔记(主要为CSS盒子模型的学习)原创 2023-12-01 20:53:32 · 709 阅读 · 1 评论 -
CSS 基础知识【学习笔记】02
本周继续学习CSS基础知识,并记录学习笔记。原创 2023-11-25 01:58:13 · 812 阅读 · 2 评论 -
CSS 基础知识【学习笔记】01
本周进入CSS基础知识的学习,结合HTML运用与CSS学习所做笔记原创 2023-11-18 21:41:54 · 141 阅读 · 0 评论