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