网易极客战记官方攻略_网页开发1_通缉令

发布于 2020年3月24日

关卡概览和解法

用 HTML 和 CSS 设计一个通缉令。

简介

修改 <img> 的属性、文字、样式,自定义一幅对 CodeCombat 无恶不作,为非作歹的罪犯的通缉令。

默认代码

<style>
    h1 {
        color: red;
    }
    h1 {
        font-size: 7em;
    }
    h2 {
        /* Change the number to change the size of the header text. */
        font-size: 3em;
    }
    h3 {
        font-size: 1.5em;
    }
    li {
        font-size:1.5em;
    }
</style>
<h1>Wanted</h1>
<!-- Find an image from the Image Gallery above, or use your own image link -->
<img src="/file/db/thang.type/53ed1d9c2b65b0e32b9c96a9/portrait.png">
<!-- Who is wanted? -->
<h2>Who?</h2>
<!-- What are they wanted for? -->
<h3>For Reckless, Inhuman Crimes:</h3>
<ul>
    <li>Crime 1</li>
    <li>Crime 2</li>
</ul>
<!-- What is the reward? -->
<h2>Reward: What?</h2>
<!-- Who are their partners in crime? -->
<h3>Known Accomplices</h3>
<div>
    <div>
        <img src="/file/db/thang.type/53ed1d9c2b65b0e32b9c96a9/portrait.png">
        <h3>Who?</h3>
    </div>
&lt;div&gt;
    &lt;img src="/file/db/thang.type/53ed1d9c2b65b0e32b9c96a9/portrait.png"&gt;
    &lt;h3&gt;Who?&lt;/h3&gt;
&lt;/div&gt;

&lt;!-- Add a third accomplice here. Choose whether they are class "captured". --&gt;

</div> <!-- How do want them captured? --> <h2>Capture Alive Only</h2>

概览

这是个开放性的项目!尝试完成目标,向你的家人和朋友炫耀你的成果。

如果你觉得这不合常理,那你真正懂得网页开发的意义!

img

通缉令 解法

<style>
    h1 {
        color: red;
    }
    h1 {
        font-size: 7em;
    }
    h2 {
        /* Change the number to change the size of the header text. */
        font-size: 3em;
    }
    h3 {
        font-size: 1.5em;
    }
    li {
        font-size:1.5em;
    }
</style>
<h1>Wanted</h1>
<!-- Find an image from the Image Gallery above, or use your own image link. ·-->
<img src="https://www.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png" id="most
    -wanted">
<!-- Who is wanted? ·-->
<h2>Bomb Bill</h2>
<!-- What are they wanted for? ·-->
<h3>For Reckless, Inhuman Crimes:</h3>
<ul>
    <li>Exploding</li>
    <li>Rolling</li>
    <li>Priming</li>
    <li>Smoldering</li>
</ul>
<!-- What is the reward? ·-->
<h2>Reward: Some Gold</h2>
<!-- Who are their partners in crime? ·-->
<h3>Known Accomplices</h3>
<div>
    <div>
        <img src="https://www.codecombat.com/file/db/thang.type/5432f9d18364d30000d1f943/portrait.png">
        <h3>Chest o' Gems</h3>
    </div>
&lt;div&gt;
    &lt;img src="https://www.codecombat.com/file/db/thang.type/53024c7b27471514685d5397/portrait.png"&gt;
    &lt;h3&gt;The Hand&lt;/h3&gt;
&lt;/div&gt;

&lt;!-- Add a third accomplice here. Choose whether they are class "captured". --&gt;
&lt;div&gt;
    &lt;img src="http://direct.codecombat.com/file/db/thang.type/52e95a5022efc8e709001743/portrait.png"
        &gt;
    &lt;h3&gt;cow&lt;/h3&gt;
&lt;/div&gt;

</div> <!-- How do want them captured? ·--> <h2>Capture Alive Only</h2>