极客战记通缉令怎么制作?

发布于 2020年2月18日

通缉令的制作是极客战记网页开发1地图的最后一个关卡

关卡概览和解法

用 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>

    <div>
        <img src="/file/db/thang.type/53ed1d9c2b65b0e32b9c96a9/portrait.png">
        <h3>Who?</h3>
    </div>

    <!-- Add a third accomplice here. Choose whether they are class "captured".-->

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

概览

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

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

通缉令 解法

<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>

    <div>
        <img src="https://www.codecombat.com/file/db/thang.type/5432f9d18364d30000d1f943/portrait.png">
        <h3>Chest o' Gems</h3>
    </div>

    <div>
        <img src="https://www.codecombat.com/file/db/thang.type/53024c7b27471514685d5397/portrait.png">
        <h3>The Hand</h3>
    </div>

    <!-- Add a third accomplice here. Choose whether they are class "captured".-->

    <div>
        <img src="http://direct.codecombat.com/file/db/thang.type/52e95a5022efc8e709001743/portrait.png">
        <h3>cow</h3>
    </div>

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