网易极客战记官方攻略_网页开发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>
