网易极客战记官方攻略_网页开发1_优等

发布于 2020年3月24日

关卡概览和解法

获得优雅和独特风格的元素组!

简介

HTML 和 CSS 使用classes的概念。 class 是一种通过给它们一个可重复名称来分类相似元素的方法。

<style>
    /* '.' 在课程名称告诉CSS代码只编辑那些有“inner-div”* /
    .inner-div {
        color: blue;
    }
    / *'.' 在课程名称告诉CSS代码只编辑那些有“inner-div”* /
    .outer-div {
        background-color:green;
    }
    / *标签选择器将选择具有该特定标签的所有元素!*/
    p {
        color: red;
    }
</style>
<div>
    <h2>I'm a sub-title!</h2>
    <div>
        <p>Hello, world!</p>
    </div>
</div>
<div>
    <h2>I too, am a subtitle!</h2>
    <div>
        <p>Bonjour, monde.</p>
    </div>
</div>

默认代码

<!--  "class" 属性使得样式更容易。 -->
<!-- 用它来设计特定的重复元素! -->
<style>
    /* '.'告诉CSS以 "class" 名称为目标。 */
    .character {
        background-color:orange;
    }
</style>
<div>
    <h1>Romeogre and Juliet</h1>
    <h2>The Cast</h2>
</div>
<!-- class属性已被添加到这些<div>中 -->
<div>
    <img src="https://www.codecombat.com/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">
    <h3>Cindy Archer</h3>
    <p>as Juliet</p>
</div>
<!-- 包括主星 Romeogre! -->
<!-- 用 "character"类添加另一个<div>: -->

概览

#类属性

class属性用于使样式元素更容易。 通过将元素包含在元素的开始标记中来将该属性分配给元素。 在<style>元素内部,使用.+className CSS 选择器来指定特定的类。

<style>
    / *这将所有具有“整齐”类的元素设置为颜色:蓝色。*/
    .neat {
        color: blue;
    }
</style>
<!-- This <div> element has the "neat" class. -->
<div>
    <p>Hello, world!</p>
</div>

优等 解法

<!--  "class" 属性使得样式更容易。 ·-->
<!-- 用它来设计特定的重复元素! ·-->
<style>
    /* '.'告诉CSS以 "class" 名称为目标。 */
    .character {
        background-color:orange;
    }
</style>
<div>
    <h1>Romeogre and Juliet</h1>
    <h2>The Cast</h2>
</div>
<!-- class属性已被添加到这些<div>中 ·-->
<div>
    <img src="https://www.codecombat.com/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">
    <h3>Cindy Archer</h3>
    <p>as Juliet</p>
</div>
<!-- 包括主星 Romeogre! ·-->
<!-- 用 "character"类添加另一个<div>: ·-->
<div>
    <img src="https://www.codecombat.com/file/db/thang.type/529e5d756febb9ca7e00000a/portrait.png">
    <h3>Borp</h3>
    <p>as Romeogre</p>
</div>