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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小说中心</title>
</head>
<body>
<p>
    <h1 align="center">小说排行榜第一</h1>
    <div style="width: 334px;height:387px; text-align: center;">
        <div id="header" style="background-color: cornflowerblue"><h2 align="center">登录</h2></div>
        <div id="content" style="background-color: darkgrey">
            <form>
                username:<input type="text" name="firstname" placeholder="请输入用户名"><br>
                password:<input type="password" name="password" placeholder="请输入密码"><br>
                <input type="radio" name="role" value="stu">student
                <input type="radio" name="role" value="tea">teacher<br>
                <input type="checkbox" value="true"><span>记住我</span><a href="">登录遇到问题</a><br>
                <input type="button" value="login" onclick="alert('登录验证')">
            </form>
        </div>
        <div id="footer" style="background-color: cornflowerblue;text-align: center;"><i>版权@006琪</i></div>
    </div>
    <div>
        <select>
            <option>收藏</option>
            <option>点赞</option>
            <option>评论</option>
            <option>打赏</option>
        </select>
        <ul>
            <li>作者排行榜</li>
            <li>作品排行榜</li>
        </ul>
        <ol>
            <li>收藏排行榜</li>
            <li>评论排行榜</li>
            <li>点赞排行榜</li>
            <li>打赏排行榜</li>
        </ol>
        <dl>
            <dt>最爱小说</dt>
                <dd>玄幻</dd>
      
        </dl>
    </div>
<br>
<hr>
    <div>
        <p align="center">
        <img src="https://qidian.qpic.cn/qdbimg/349573/1209977/180 ">
        </p>
    </div>
    <div>
        <p align="center">
            <a href="https://book.qidian.com/info/1209977"><img src="URL" alt="斗破苍穹"></a>
        </p>
    </div>
</p>

</body>
</html>

 

posted @ 2017-10-17 09:59  lililililililli  阅读(618)  评论(0)  编辑  收藏  举报