快速回顾-CSS3

2024-09-04 19:52
文章标签 快速 回顾 frontend css3

本文主要是介绍快速回顾-CSS3，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

回顾 1

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS66</title><style>/* 选择器 *//* h4 {color: red;}.classSelector {color: blue;}#idSelector {color: green;} *//* 类选择器分配样式 *//* .purple {color: purple;}.pink {color: pink;}.red {color: red;} *//* 布局 */.inline {display: inline;}.block {display: block;background-color: pink;width: 400px;height: 100px;}.inline-block {display: inline-block;width: 260px;}.none {display: none;}</style>
</head><body><!-- 选择器 --><!-- <h4>元素选择器</h4><p class="classSelector">类选择器</p><p id="idSelector">id选择器</p> --><!-- 类选择器分配样式 --><!-- <p class="purple">我希望这段文字是紫色的</p><p class="pink">我希望这段文字是粉红的</p><p class="red">我希望这段文字是红色的</p> --><!-- 布局 --><div>我独占一行</div><div>我独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><hr><span>我不独占一行</span><span>我不独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><hr><div class="inline-block">我不独占一行，且可以调节宽高</div><div class="inline-block">我不独占一行，且可以调节宽高</div><hr><div class="none">你看不到我</div><hr><div class="flex"><div class="item">项目</div><div class="item">项目</div><div class="item">项目</div></div></body></html>

回顾 2

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;/* 盒子尺寸计算：以边框为盒子尺寸计算依据（针对于 width、height 有效） */box-sizing: border-box;}a,li {/* 文本修饰：无 */text-decoration: none;}.box-1 {/* 1. 盒子可视化 */border: 6px solid gold;/* 2. 修改盒子内外样式 *//* 2.1 修改外部 */margin-top: 20px;/* 2.2 修改本体 *//* 盒子尺寸 */width: 300px;height: 90px;/* 盒子边框 */border-radius: 34px;box-shadow: -6px 6px 2px #666;/* 盒子背景 */background-image: url(https://img.zcool.cn/community/01c94c563736d66ac7259e0fd89fcb.jpg@2o.jpg);background-size: 180px 60px;background-repeat: no-repeat;background-origin: content-box;}.box-2 {/* 1. 盒子可视化 */border: 6px solid gold;/* 2. 修改盒子样式 *//* 2.1 修改外部 */margin-top: 20px;/* 2.2 修改本体 */width: 400px;height: 100px;/* 颜色渐变 *//* 第一种渐变方式：linear gradient 线性的渐变 */background: linear-gradient(120deg, red, blue, 50%, pink, rgba(0, 0, 0, 0.5), green);}.box-3 {/* 盒子可视化 */border: 6px solid gold;margin-top: 20px;width: 300px;height: 100px;/* 颜色渐变 *//* 第二种渐变方式：linear gradient 径向的渐变 */background: radial-gradient(ellipse, red 5%, green 15%, blue 60%);/* 重复的渐变 *//* background: repeating-radial-gradient(red, yellow 10%, green 15%) */}.box-4 {border: 6px solid gold;margin-top: 20px;width: 400px;height: 68px;/* 内容溢出盒子：隐藏 */overflow: hidden;/* 文本效果 */p:nth-child(1) {text-shadow: -5px 3px 4px #666;text-align: center;}}.box-5 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 120px;background-color: red;/* 使变形：平移(x, y) */transform: translate(68px, 0);/* 使变形：旋转(90度) */transform: rotate(90deg);/* 使变形：伸缩(1倍, 1倍) */transform: scale(1, 1);/* 使变形：倾斜(30度，-20度)*/transform: skew(30deg, -20deg);}.box-6 {border: 6px solid gold;margin-top: 40px;width: 200px;height: 120px;/* 使变化：平移 */transform: translate3d(30px, 30px, 30px);/* 使变化：旋转 */transform: rotate3d(1, 0.5, 0, -780deg);/* 使变化：伸缩 */transform: scale3d(2, 1, 1);}.box-7 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 120px;/* 过渡效果：监控某某属性 过渡时长 */transition: transform 2s, background-color 3s;}.box-7:hover {transform: scale(0.5, 0.5);background-color: pink;}/* 定义"关键帧" */@keyframes changeBoxSize {0% {width: 120px;height: 60px;}100% {width: 200px;height: 100px;}}.box-8 {border: 6px solid gold;margin-top: 20px;width: 120px;height: 60px;/* 使用"关键帧"生成动画 *//* 动画：某某关键帧 播放周期秒数 线性播放速度 延迟2s 播放次数为无限 下一周期逆向地播放 */animation: changeBoxSize 5s linear 2s infinite alternate;}.box-9 {border: 6px solid gold;margin-top: 20px;width: 500px;height: 180px;/* 文本多列 */column-count: 2;column-gap: 100px;column-rule: 3px outset black;}.box-10 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 120px;/* 调整尺寸：两边都可调整（需要配合 overflow 使用） */resize: both;/* 元素溢出时：自动 */overflow: visible;overflow: hidden;overflow: clip;overflow: scroll;overflow: auto;/* 外形修饰 */outline: 2px solid red;outline-offset: 6px;}.box-11 {border: 6px solid gold;margin-top: 40px;width: 300px;height: 180px;/* 缩略图 */img {width: 200px;height: 120px;border: 5px solid red;border-radius: 10px;padding: 18px;/* 图片滤镜：图片颜色设置为100%灰度 */filter: grayscale(100%);}}.box-12 {border: 6px solid gold;margin-top: 20px;width: 100%;height: 330px;/* =================== flex布局详解 ================ *//* 显示：启用flex布局 */display: flex;/* flex的方向：横着-反方向 */flex-direction: row-reverse;/* item 换行，溢出的 item 会被换行 */flex-wrap: wrap;/* flex-flow 只是一个简写，因此它自身的属性值就是 flex-direction 与 flex-wrap 的属性值 *//* flex-flow: row-reverse; *//* 沿着主轴（主轴默认是横轴）进行每一个 item 位置的调整 */justify-content: space-around;/* 沿着侧轴（侧轴默认是纵轴）进行每一个 item 位置的调整 */align-content: space-around;/* align-items 其实就是在父容器上统一设置所有直接子元素的 align-self 值，它本身并不具有任何的附加效果，所以我们直接看 align-self 即可 *//* align-items: flex-end; *//* gap 的作用是元素与元素之间的间距，而不是元素与容器之间的间距 *//* 间距：行 列 */gap: 60px 80px;.item {border: 1px solid red;width: 200px;height: 100px;}.item:nth-child(1) {background-color: pink;align-self: flex-end;}}.box-13 {border: 6px solid gold;margin-top: 20px;width: 100%;height: 330px;/* =================== flex布局详解 ================ */display: flex;flex-direction: row;.item {border: 1px solid red;width: 100px;height: 100px;}.item:nth-child(1) {background-color: pink;/* align-items 属性，这个属性的主要作用是控制所有的 flex 元素在“交叉轴”方向的对齐方式 *//* align-self 属性是控制单个的 flex 元素在“交叉轴”方向的对其方式 */align-self: flex-end;}.item:nth-child(2) {background-color: green;/* 所有的 flex 元素宽度总和小于 flex 容器的宽度之后，按照特定的比率去分配空间给具有 flex-grow 值的 flex 元素 *//*  flex 容器中被分配的比例值，属性值为纯数字，可以是带小数点的数字 */flex-grow: 2.5;}.item:nth-child(3) {background-color: blue;/* 续接上文 */flex-grow: 2;}.item:nth-child(4) {background-color: grey;/* 当 flex 元素之和大于 flex 容器的宽度时，具有 flex-shrink 属性的 flex 元素会根据特定的比率缩小其自身的宽度 */flex-shrink: 1;/* 在 flex 元素中使用频率较高的应该是 flex 这个属性了，该属性是一个简写属性，包含了 flex-grow、flex-shrink 以及 flex-basis 这三个属性。 *//* flex 占比空间：flex-grow: 6 && flex-shrink: 2 && flex-basis: 50%  简写成以下格式 */flex: 1 1 0%;/* order 属性规定了 flex 元素在 flex 容器中布局时的顺序。在未设置任何 order 属性值或者设置了相同的 order 属性值时，会以元素在 dom 节点中出现的顺序进行布局；而如果我们修改了 order 的属性值，就将会以递增的方式排序，数字越大，flex 元素就排得越后面。order 属性仅仅只是将 flex 元素在页面展示时的视觉效果做了位置的调整，并不会改变其自身在 dom 节点的位置以及顺序属性值可以为负值，只要是整数就可以了*/order: 99;}}/* ==================== 多媒体查询 =================== *//* 多媒体查询用于检测：viewport(视窗) 的宽度与高度设备的宽度与高度朝向 (智能手机横屏，竖屏) 。分辨率媒体类型：---------------------------------------| 值       |  描述---------------------------------------| all      |  用于所有多媒体类型设备| print    |  用于打印机| screen   |  用于电脑屏幕，平板，智能手机等| speech   |  用于屏幕阅读器---------------------------------------书写格式@media not/only 媒体类型 and (表达式) {}*/@media screen and (min-width: 600px) {.box-14 {border: 6px solid gold;margin-top: 20px;width: 200px;height: 100px;background-color: red;}}</style>
</head><body><a href="https://www.baidu.com">点击前往百度</a><ol><li>第一个li标签</li><li>第二个li标签</li><li>第三个li标签</li></ol><div class="box-1">This is box-1</div><div class="box-2">This is box-2</div><div class="box-3">This is box-3</div><div class="box-4">This is box-4<p>Hello World</p><p>This is a message for you.</p><p>How are you?</p></div><div class="box-5">This is box-5</div><div class="box-6">This is box-6</div><div class="box-7">This is box-7</div><div class="box-8">This is box-8</div><div class="box-9">This is box-9生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。</div><div class="box-10">This is box-10 万里悲秋常作客，百年多病独登台！</div><div class="box-11"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0"alt=""></div><div class="box-12"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div><div class="box-13"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div>
</body></html>

内容推荐

  • CSS 视频教程：https://www.bilibili.com/video/BV17X4y1d7mT/
  • CSS 文档教程：
    • CSS2：https://www.w3cschool.cn/css/
    • CSS3: https://www.w3cschool.cn/css3/
  • CSS 编写工具：https://css.bqrdh.com/

这篇关于快速回顾-CSS3的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1136878。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

在日常使用电脑的过程中，我们经常会遇到这样的情况：一不小心，桌面上的某个重要文件被删除了。这时，大多数人可能会感到惊慌失措，不知所措。 其实，不必过于担心，因为有很多方法可以帮助我们找回被删除的桌面文件。下面，就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件，并且还没有进行其他操作，那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
hdu 4565 推倒公式+矩阵快速幂

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值： Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中： 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令： An=(a+b√)n A_n = (a +
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
v0.dev快速开发

v0.dev快速开发

探索v0.dev：次世代开发者之利器 今之技艺日新月异，开发者之工具亦随之进步不辍。v0.dev者，新兴之开发者利器也，迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势，助汝速速上手，提升开发之效率。 何谓v0.dev？ v0.dev者，现代化之开发者工具也，旨在简化并加速软件开发之过程。其集多种功能于一体，助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2