前端学习打卡Day11

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量90 收藏
点赞数
文章标签： 前端 学习 css Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74363523/article/details/128762494
版权

CSSⅡ

目标

  • 能够使用emmet语法

  • 能够使用CSS复合选择器

  • 能够写出伪选择器的使用规范

  • 能够说出元素有几种显示模式

  • 能够写出元素显示模式的相互转化代码

  • 能够写出背景图片的设置方式

  • 能够计算CSS的权重

目录

  • Emmet语法

  • CSS的复合选择器

  • CSS的元素显示模式

  • CSS的背景

  • CSS的三大特性

  • CSS的注释

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度。

（VScode内部已经集成该语法）

快速生成HTML结构语法

快速生成CSS样式语法

CSS基本采取简写形式即可，如：

  1. w200 按tab 可以生成width：200px；

  1. lh26 按tab 可以生成line-height：26px；

快速格式化代码

VScode快速格式化代码：shift+alt+f

也可以设置 当我们保存页面的时候自动格式化代码：

Caramel Macchiato*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小白的20天Java学习打卡day1
12-22
【小白的20天Java学习打卡day1】 学习Java编程的第一步通常是理解基本概念，包括软件的本质、操作系统、编程语言的作用以及如何在Windows系统中进行基础操作。在本篇学习笔记中，我们将探讨这些关键点。 1. **什么...
小白的20天Java学习打卡day2
12-22
太原理工大学机器人团队20天学习打卡day2 学习内容：Java 学习网站：b站 day02 今天的内容比昨天多很多，也更难理解，希望能坚持下去 1、打开DOS命令窗口，执行java HelloWorld,执行原理 java.exe命令会启动JVM JVM...
前端学习打卡day2
2301_80024722的博客
10-19 361
我的第一个html页面
前端学习打卡day3
2301_80024722的博客
10-20 154
其中图片名是img.jpg。target后面跟的东西可以是_self，意思是打开的新标签会替代掉原来的标签页，还有一种是_blank，这种打开标签页的方法是再建一个新的标签页。eg.腾讯中的。eg.第2集
前端学习打卡Day10
Narcissus__的博客
03-22 709
1.响应式布局 pc优先和移动端优先，临界点/断点，媒体查询 竖屏 orientation：portrait 横屏 orientation：landscape @media screen and (max-width:px) and (min-width:px){} 2.rem，em，px px：50px em：相对单位，相对于父元素的字体大小，div width：10em，10倍大小 rem：相对单位，相...
前端学习打卡Day06
Narcissus__的博客
03-16 1044
1.浮动元素高度自适应 1）设置父盒子高度为定值，缺点：如果浮动过多，换行，就出现问题 2）在子盒子后加一个空div，clear：both，缺点：增加了新的空标签，降低了浏览器性能 3）溢出隐藏 overflow：hidden，缺点：会隐藏溢出的元素，例如下拉二级菜单 4）伪元素 ：：双冒号，代码如下 .box::after{ content: ""; clear: both;...
前端学习打卡Day09
Narcissus__的博客
03-21 239
1.移动端布局 模拟器上显示分辨率 css像素：设备的独立像素，物理分辨率：设备像素 设备像素比（dpr）= 物理像素/css像素 设计稿给一份物理分辨率的 采用1）百分比，2）弹性盒布局，3）rem布局 2.采用弹性布局的盒子，会继承父代的宽高，会延展某一方向的宽高，在后代中仍然可以使用继承值 3.设置flex数值后，如果flex内部的空间超过窗口大小，则会将未设置flex属性数值的空间挤压，形成适应内容大小的状态，如果没...
前端学习打卡Day08
Narcissus__的博客
03-21 353
1.阴影 文本阴影text-shadow: 10px 10px 1px red; 盒子阴影box-shadow: 10px 10px 10px （10px） red （inset）; 参数1：水平方向位移参数2：竖直方向位移 参数3：模糊程度/模糊距离 px参数4：阴影颜色 盒子阴影中括号内分别为阴影大小和内阴影属性 都支持多重阴影，用逗号隔开即可 2.圆角 ...
前端学习打卡Day5
Narcissus__的博客
03-14 188
1.定位 position 1）static 默认值 2）absolute 绝对定位，脱离文档流，偏移位置相对父元素（父存在且有定位），否则参照物是浏览器窗口的第一屏（子绝父相），滚动窗口，定位随第一屏滑走 3）relative 相对定位 不脱离文档流，偏移位置相对自身，可设置top为负值实现下移 4）fixed 固定定位，脱离文档流，偏移位置相对于浏览器的当前窗口 5）sticky 粘性定位，可以做吸顶效果，css3.0新增的...
前端学习打卡Day1
Narcissus__的博客
03-07 289
一、认识前端，前端是什么，大前端能做什么 网站、管理系统、app、小程序 、数据可视化、智能电视、桌面应用、网页游戏、工具和后端 蒂姆.伯纳斯.李 W3C 1.网页是前端开发人员写的，通过浏览器转成美丽的页面 2.网页的拓展名是.html 3.Html使用标记标签来描述网页，包含音频、视频、图片等等 https://caniuse.com 一个查版本兼容性的好网站 W3C制定了HTML、CSS和JS行为的规范 1.文档声明与字符编码 <!DOCTYPE> 2.<html
前端学习打卡Day4
Narcissus__的博客
03-10 175
1.溢出 1）overflow: visible;默认溢出 2）overflow: hidden;溢出文本隐藏，文本裁切 3）overflow: scroll;溢出滚动 4）overflow: inherit;继承父元素的效果 5）overflow: auto;/*溢出自动滚动，未超过不显示滚动，常用*/ 6）overflow-x:auto overflow-y:hidden只设置一个方向自动滚动 ...
小白的20天Java学习打卡day3
01-20
太原理工大学机器人团队20天学习打卡day3 1、数据类型​ ①数据类型的作用 程序当中有很多数据，每一个数据都是有相关类型的，不同数据类型的数据占用空间大小不同。 数据类型的作用是指导JVM在运行程序的时候给该...
小白的20天Java学习打卡day8
12-22
太原理工大学机器人团队20天学习打卡day8 今天继续昨天方法基础语法的学习，主要是用通过写代码来理解和记忆，所以今天的代码会比较多 也就没有小结了，多多练习！！ 话不多说，直接献上笔记！ 实例 //public表示...
小白的20天Java学习打卡day18【完结撒花】
12-22
太原理工大学机器人团队20天学习打卡day18 今天是学习java基础的最后一天，比计划中少用了两天，由于我是因为兴趣才学java的，目前还不打算往这方面发展，所以学完java基础也不会深入下去了，我打算明天回顾一下这...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 382
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1217
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1707
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
前端性能优化--懒加载
weixin_43799793的博客
07-19 158
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
绘制学习打卡软件的构件图
06-01
好的，以下是绘制学习打卡软件的构件图： ![构件图](https://i.imgur.com/5PpEMEz.png) 该软件的主要构件包括：用户界面、打卡记录管理模块、学习计划管理模块、用户信息管理模块、打卡提醒模块、数据统计模块和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值