第1关：CSS 元素选择器

最新推荐文章于 2024-09-09 11:03:57 发布

嵌入式Dora

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量736

点赞数 17

分类专栏：《Java web 程序设计》文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_64562382/article/details/134858620

版权

《Java web 程序设计》专栏收录该内容

27 篇文章 7 订阅

订阅专栏

任务描述

在完成本实训之后，你将掌握元素选择器、类选择器和id选择器这三种基础选择器。你将会学会独立制作如下新闻主页页面：

本关任务：熟悉元素选择器，使用属性选择器修改文档样式。

任务实现效果如图：

编程要求

使用元素选择器修改页面样式，要求如下：

设定html元素的background-color为#F0F0F0；
设定header元素的padding为40px，background-color为白色；
添加footer元素的font-size为0.6em，字体颜色为灰色(grey)。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。

生活的道路一旦选定，就要勇敢地走到底，决不回头。——左拉

开始你的任务吧，祝你成功！

如果你觉得这一关的内容对你有帮助，请你在下面点赞。

CSS元素选择器
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>元素选择器</title>
  <style type="text/css">
    /* ********** BEGIN ********** */
    /* 元素选择器 */
    html {
        background-color:#F0F0F0;
    }

    header{
      padding:40px;
      background-color:white;
    }
    footer {
      margin-top: 20px;
      font-size:0.6em;
      color:grey;
    }

    /* ********** END ********** */
  </style>
</head>
<body>

<div>

  <header>
    <li><a href="#chosen">精选</a></li>
    <li><a href="#news">时事</a></li>
    <li><a href="#finance">财政</a></li>
    <li><a href="#think">思想</a></li>
    <li><a href="#life">生活</a></li>
  </header>

  <div>
    <section>
      <h2>精选</h2>
      <li>精选新闻1</li>
      <li>精选新闻2</li>
      <li>精选新闻3</li>
    </section>
    <section>
      <h2>时事</h2>
      <li>时事新闻1</li>
      <li>时事新闻2</li>
      <li>时事新闻3</li>
    </section>
    <section>
      <h2>财政</h2>
      <li>财政新闻1</li>
      <li>财政新闻2</li>
      <li>财政新闻3</li>
    </section>
    <section>
      <h2>思想</h2>
      <li>思想新闻1</li>
      <li>思想新闻2</li>
      <li>思想新闻3</li>
    </section>
    <section>
      <h2>生活</h2>
      <li>生活新闻1</li>
      <li>生活新闻2</li>
      <li>生活新闻3</li>
    </section>
  </div>

  <footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>

</div>

</body>
</html>