web基础，用html元素制作web页面

用div,form制作登录页面，尽可能做得漂亮。

<div  id="container" style="width:400px " >
    <div id="header" style="background-color:skyblue;"><h2 align="center" style="margin-bottom:0;">狼人杀用户登录</h2></div>
    <div id="content" style="background-color:#EEEEEE;height: 210px;width:400px;float:left;text-align:center;">
        <form>
            <br>用户名<input type="text" name="user" placeholder="请输入用户账号"><br>
            <br>密码<input type="password" name="pass"><br>
            <br><input type="radio">普通用户
            <input type="radio">VIP用户<br>
            <br><input type="button"value="登录">
            <input type="button"value="注册">
        </form>
    </div>
    <div id="footer" style="background-color:skyblue;clear:both;text-align:center;">版权*liuda</div>
</div>

 

练习使用下拉列表选择框，无序列表，有序列表，定义列表。

<div  id="container" style="width:400px " >
    <div id="afd" style="background-color:coral;"><h2 align="center" style="margin-bottom:0;">角色选取</h2></div>
    <div id="content" style="background-color:#EEEEEE;height:330px;width:400px;float:left; text-align:center;" >
        <form>
            <br> 是否愿意当上帝？
            <select>
                <option>相当愿意！</option>
                <option>不行！丑拒！</option>
            </select>
            <br>
            <br><dl>
                <dt>昨晚是个神马夜？</dt>
                <dd>昨晚是个平安夜！</dd>
                <dd>昨晚滥杀无辜啦！</dd>
            </dl>
            <ul style="text-align:left">
                <li>狼人</li>
                <li>女巫</li>
                <li>预言家</li>
            </ul>
            <ol style="text-align:left">
                <li>猎人</li>
                <li>盗贼</li>
                <li>平民</li>
            </ol>
        </form>
    </div>
    <div id="footer" style="background-color:coral;clear:both;text-align:center;">版权&liuda</div>
</div>>

 

观察常用网页的HTML元素，在实际的应用场景中，用已学的标签模仿制作。

 ok！