CSS选择器练习

简介: 本页为CSS选择器实战练习,含两个HTML示例:①用类选择器设置div尺寸与背景色;②用class、后代、标签等选择器布局“淄博烧烤”页面,涵盖盒模型、文本样式及语义化结构,适合初学者巩固基础语法。(239字)

CSS选择器练习

代码

day03/03-css选择器练习1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day03/03-css选择器练习1.html</title>
    <style>
        /* rgb 三原色: r red,g green, b blue */
        .div1 {
            width: 200px;
            height: 200px;
            background-color: rgb(165, 42, 42);
        }
        .div2 {
            width: 400px;
            height: 400px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- 需求1:按照右图所示设置两个div的宽高和背景色。 -->
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

day03/04-css选择器练习2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day03/03-css选择器练习1.html</title>
    <style>
        /* 需求2:请用一个类名为box的div,把淄博烧烤页面包含进去。设置宽度为800px,高度不用设置。 */
        .box {
            width: 800px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>淄博烧烤是凭什么突然爆火的?</h1>
        <hr>
        <p>
            今年春天,<span
                class="title">淄博烧烤</span> 爆火,一个月上的热搜比过去一年都多;淄博高铁站比春运还忙,当地烧烤店门前更是人山人海。淄博烧烤的爆火,可能在很多人意料之外,但中国人对于烧烤的热情,却从未冷却。谁能拒绝吃一顿 <span
                class="price">¥1888</span> ¥188的烧烤呢?
        </p>
        </p>
        <h3>烧烤?DNA动了</h3>
        <p>
            烧烤的出现,大概比智人还要早。它就一个条件——火。老祖宗们给动物褪了毛,往坑里一扔,点上火,就能美美地吃顿烤肉了。 学会用火,改变了人类的命运。熟食让人类避开了寄生虫,减少了牙齿的磨损。延长寿命,知识和智慧才有条件获得传承。可以说,烧烤不仅在烹饪史上的地位重要,对人类进化和文明发展也影响深远。 当烧烤让人类的文明之树开花结果之后,人类就开始了对烧烤的改造。
        </p>
        <h3>炭烤为啥更香?</h3>
        <p>
            每种食材都有自己的味道, 而不同的烹饪方式,又会产生不同的口感和味道 。尤其烧烤,在明火上直接烹饪,食材不仅能吸收厨具传递的热量,还能直接和火焰接触。两种加热方式,使烹饪温度的范围大大拓宽。 不同的温度使得食材产生了不同风味和香气的新物质,混合在一起,就是烧烤诱人的香气。 云南火塘烧烤。直接把食材放在明火上方,表面温度可以达到260℃—370℃,远离明火,就会降到95℃—150℃ 在烧烤的过程中,肉类表面水分迅速干燥,进而使蛋白质和糖类受热,发生美拉德反应。食物表面变成褐色,不同的氨基酸和糖生成不同气味的物质,使食物有了可口的风味和诱人的色泽。 蔬菜在烧烤过程中,大量水分迅速蒸发,高温促进焦糖化反应,将碳水化合物和糖转化为较小的化合物,如麦芽酚(具有烤面包味)和呋喃(尝起来像坚果类,带肉味)。
        </p>
        <div style="height: 50px;">
            <span class="last">责任编辑:黑马程序员</span>
        </div>
    </div>
</body>
</html>
目录
相关文章
|
10天前
|
人工智能 JavaScript Linux
【Claude Code 全攻略】终端AI编程助手从入门到进阶(2026最新版)
Claude Code是Anthropic推出的终端原生AI编程助手,支持40+语言、200k超长上下文,无需切换IDE即可实现代码生成、调试、项目导航与自动化任务。本文详解其安装配置、四大核心功能及进阶技巧,助你全面提升开发效率,搭配GitHub Copilot使用更佳。
|
4天前
|
JSON API 数据格式
OpenCode入门使用教程
本教程介绍如何通过安装OpenCode并配置Canopy Wave API来使用开源模型。首先全局安装OpenCode,然后设置API密钥并创建配置文件,最后在控制台中连接模型并开始交互。
1880 6
|
12天前
|
存储 人工智能 自然语言处理
OpenSpec技术规范+实例应用
OpenSpec 是面向 AI 智能体的轻量级规范驱动开发框架,通过“提案-审查-实施-归档”工作流,解决 AI 编程中的需求偏移与不可预测性问题。它以机器可读的规范为“单一真相源”,将模糊提示转化为可落地的工程实践,助力开发者高效构建稳定、可审计的生产级系统,实现从“凭感觉聊天”到“按规范开发”的跃迁。
1894 18
|
10天前
|
人工智能 JavaScript 前端开发
【2026最新最全】一篇文章带你学会Cursor编程工具
本文介绍了Cursor的下载安装、账号注册、汉化设置、核心模式(Agent、Plan、Debug、Ask)及高阶功能,如@引用、@Doc文档库、@Browser自动化和Rules规则配置,助力开发者高效使用AI编程工具。
1347 7
|
14天前
|
IDE 开发工具 C语言
【2026最新】VS2026下载安装使用保姆级教程(附安装包+图文步骤)
Visual Studio 2026是微软推出的最新Windows专属IDE,启动更快、内存占用更低,支持C++、Python等开发。推荐免费的Community版,安装简便,适合初学者与个人开发者使用。
1349 13
|
9天前
|
人工智能 JSON 自然语言处理
【2026最新最全】一篇文章带你学会Qoder编辑器
Qoder是一款面向程序员的AI编程助手,集智能补全、对话式编程、项目级理解、任务模式与规则驱动于一体,支持模型分级选择与CLI命令行操作,可自动生成文档、优化提示词,提升开发效率。
821 10
【2026最新最全】一篇文章带你学会Qoder编辑器
|
14天前
|
人工智能 测试技术 开发者
AI Coding后端开发实战:解锁AI辅助编程新范式
本文系统阐述了AI时代开发者如何高效协作AI Coding工具,强调破除认知误区、构建个人上下文管理体系,并精准判断AI输出质量。通过实战流程与案例,助力开发者实现从编码到架构思维的跃迁,成为人机协同的“超级开发者”。
1102 96
|
8天前
|
云安全 安全
免费+限量+领云小宝周边!「阿里云2026云上安全健康体检」火热进行中!
诚邀您进行年度自检,发现潜在风险,守护云上业务连续稳健运行
1182 2

热门文章

最新文章