【前端寻宝之路】总结学习使用CSS的引入方式

已于 2024-03-04 20:49:56 修改
阅读量1.7k 收藏 26
点赞数 28
分类专栏： 前端寻宝之路系列 文章标签： 前端 学习 css 运维 网络 容器 docker
于 2024-03-04 20:40:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aileenvov/article/details/136441555
版权

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
​💫个人格言:“没有罗马,那就自己创造罗马~”

bare of几乎没有,缺乏

文章目录

CSS

  • 层叠样式表(Cascading Style Sheets)
👉CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离.
  • css控制页面的展示效果
  • html 决定页面结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

<!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>
        p{
            color: red;
            font-size:  40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>

在这里插入图片描述

<!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>
        p{
            color: red;
            font-size:  40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>Aileen</p>
    <h1>你好</h1>
</body>
</html>

在这里插入图片描述

选择器+{一条/N条声明}

  • 选择器(selector)决定针对谁修改使用:区分键值对,使用:区分键(property)和值(value)
  • 声明决定修改啥
  • 声明的属性是键值对,
  • selector{ property:value }
    在这里插入图片描述

CSS引入方式

内部样式表

  • 将css嵌套到html中 (通过style)标签嵌套
  • 在这里插入图片描述

行内样式表

在这里插入图片描述

⚠ 行内样式表的优先级比内部样式表优先级高.

外部样式表

  • 1.创建一个css文件
  • 2.使用 link 标签引入 css
  • <link rel="stylesheet" href="/path/example.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo02.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>

p{
    color:crimson;
    font-size: 80px;
}

Summary

在这里插入图片描述

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

Aileen_0v0
关注
  • 28
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论
专栏目录
强化学习Q-learning实现机器人寻宝游戏.zip
04-16
从上述所列举的应用可知，机器学习正在成为各行各业都会经常使用到的分析工具，尤其是在各领域数据量爆炸的今天，各行业都希望通过数据处理与分析手段，得到数据中有价值的信息，以便明确客户的需求和指引企业的发展...
基于C#实现寻宝游戏.zip
03-08
基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip基于C#实现寻宝游戏.zip...
HarmonyOS基础（七）- 详细剖析鸿蒙引入第三方库案例篇（1）
康宝的博客
02-26 3493
详细剖析鸿蒙引入第三方库案例的两种方法。ohpm的使用，本地库开发和使用，第三方库的下载、引入和使用等
2024年【前端寻宝之路】总结学习使用CSS的引入方式，2024前端大厂面试真题
2401_84433570的博客
05-06 381
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】| — || 👉CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离. |css控制页面的展示效果html 决定页面结构
【前端寻宝之路】总结学习使用CSS的引入方式(1)，大厂面试经验分享
2401_84164721的博客
04-20 303
(img-gsj5TFXa-1713603313052)]统化的资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）**bare of几乎没有,缺乏。
HarmonyOS鸿蒙最新【前端寻宝之路】总结学习使用CSS的引入方式，工程商务面试问题
2401_84850851的博客
05-10 302
Aileen。
2024年【前端寻宝之路】总结学习使用CSS的引入方式，2024年最新京东面试真题解析
2401_84872530的博客
05-08 252
Aileen。
2024年鸿蒙最新【前端寻宝之路】总结学习使用CSS的引入方式(3)，b站面试题库
2401_84851550的博客
05-16 328
bare of几乎没有,缺乏。
2024年最全【前端寻宝之路】总结学习使用CSS的引入方式(4)，2024年最新阿里测试开发面经
2401_84850721的博客
05-16 913
Aileen。
HarmonyOS鸿蒙最新【前端寻宝之路】总结学习使用CSS的引入方式(7)，2024年最新github面经
2401_84862118的博客
05-17 409
bare of几乎没有,缺乏。
2024年鸿蒙最全【前端寻宝之路】总结学习使用CSS的引入方式(6)，2024春招面试技巧
2401_84862234的博客
05-15 276
Aileen。
前端学生作业毕设实训素材-寻宝天行触屏版手机wap游戏网站模板下载.zip
04-08
完整前端应用源码开发Demo，主要用于毕业设计学习。
【Web网页设计制作-毕业设计期末大作业源码】(FZY303)寻宝天行触屏版手机wap游戏网站模板.zip
05-10
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 ...
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 214
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
快速压缩前端项目
lyd的博客
06-15 475
作为前端开发工程师难免会遇到需要把项目压缩成压缩文件来传送的情况，这时候需要压缩软件进行压缩文件处理
netcore 生成验证码
最新发布
qq_51172697的博客
06-20 174
提供一个生成验证码和校验的接口。
Web前端写随机抽奖：技术与创意的碰撞
yvnmth_025y的博客
06-16 317
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 186
FR：徐海涛(hunkxu)
基于强化学习的迷宫寻宝
12-06
基于强化学习的迷宫寻宝是一种常见的强化学习应用。在这个应用中，智能体需要在迷宫中找到宝藏，并且需要尽可能快地找到它。在这个过程中，智能体需要学习如何在迷宫中移动，以及如何在不同的位置上采取不同的行动。这个过程可以通过两种不同的强化学习算法来实现：Sarsa和Q-Learning。 Sarsa算法是一种在线学习算法，它可以在智能体与环境交互的同时进行学习。在Sarsa算法中，智能体会根据当前状态和行动来更新它的策略，并且会在下一个状态和行动中使用这个策略。这个过程会一直持续到智能体找到宝藏或者达到了最大的迭代次数。 Q-Learning算法是一种离线学习算法，它可以在智能体与环境交互之后进行学习。在Q-Learning算法中，智能体会根据当前状态和行动来更新它的价值函数，并且会在下一个状态中选择最大的价值函数来更新策略。这个过程会一直持续到智能体找到宝藏或者达到了最大的迭代次数。 下面是一个基于Sarsa算法的迷宫寻宝的Python代码示例： ```python import numpy as np # 定义迷宫 maze = np.array([ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 1, 1, 0, 1, 1, 1, 0, 1, 0], [0, 1, 1, 0, 1, 0, 1, 0, 1, 0], [0, 1, 1, 0, 1, 0, 1, 0, 1, 0], [0, 1, 1, 1, 1, 1, 1, 0, 1, 0], [0, 1, 0, 0, 0, 0, 1, 0, 1, 0], [0, 1, 1, 1, 1, 1, 1, 1, 1, 0], [0, 1, 0, 0, 0, 0, 1, 0, 1, 0], [0, 1, 1, 1, 1, 1, 1, 0, 1, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]) # 定义起点和终点 start = (1, 1) end = (8, 8) # 定义动作和策略 actions = ['up', 'down', 'left', 'right'] policy = np.zeros((10, 10, 4)) q_table = np.zeros((10, 10, 4)) # 定义参数 alpha = 0.1 gamma = 0.9 epsilon = 0.1 max_iter = 1000 # 定义Sarsa算法 def sarsa(): for i in range(max_iter): # 初始化状态和行动 state = start action = np.random.choice(actions) while state != end: # 选择行动 if np.random.uniform() < epsilon: action = np.random.choice(actions) else: action = actions[np.argmax(q_table[state[0], state[1]])] # 更新状态和行动 next_state = tuple(np.array(state) + np.array([0, -1]) * (action == 'up') + np.array([0, 1]) * (action == 'down') + np.array([-1, 0]) * (action == 'left') + np.array([1, 0]) * (action == 'right')) next_action = np.random.choice(actions) if np.random.uniform() < epsilon else actions[np.argmax(q_table[next_state[0], next_state[1]])] # 更新Q值 q_table[state[0], state[1], actions.index(action)] += alpha * (maze[next_state[0], next_state[1]] + gamma * q_table[next_state[0], next_state[1], actions.index(next_action)] - q_table[state[0], state[1], actions.index(action)]) # 更新状态和行动 state = next_state action = next_action # 运行Sarsa算法 sarsa() # 输出策略 for i in range(10): for j in range(10): policy[i, j, np.argmax(q_table[i, j])] = 1 print(policy[:, :, 0], '\n', policy[:, :, 1], '\n', policy[:, :, 2], '\n', policy[:, :, 3]) ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aileen_0v0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值