Web系统开发第一次小作业

题目要求:

a5ecbf8e5c4d4c7f935f5471b155a482.png

实现代码:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<img src="zhuce.gif"/>
<form action="" method="post" >
    <div>
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username">
    </div>
    <br>
    <div>
        <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
        <input type="password" name="password" id="password">
    </div>
    <br>
    <div>
        <label>性&nbsp;&nbsp;&nbsp;别:</label>
        <input type="radio" name="gender" value="male" style="display: inline">男
        <input type="radio" name="gender" value="female" style="display: inline">女
    </div>
    <br>
    <div>
         <label for="username">邮&nbsp;&nbsp;&nbsp;箱:</label>
        <input type="text" name="username" id="username">
    </div>
    <br>
    <div>
         <label for="hobby">学&nbsp;&nbsp;&nbsp;历:</label>
        <select name="hobby" id="hobby">
            <option value="大专">大专</option>
            <option value="本科">本科</option>
            <option value="研究生">研究生</option>
        </select>
    </div>
    <br>
    <div>
        <div>
            <label for="intro">备 注</label>
            <textarea name="intro" id="intro" cols="30" rows= "4" id="remark"> </textarea>
        </div>

    </div>
    <div>
        <div style="display: flex; justify-content: center;">
        <input type="submit"name="Submit"value= "提交">
        </div>
    </div>
</form>

</body>
</html>

题目要求:

0f29e578a70e4d9caa47f13a65d8ee0f.png

实现代码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读书会网站</title>
    <style>
        header, nav, section, article, footer {
            border: 1px solid red;
            margin: 5px;
            padding: 8px;
            text-align: center;
            width: 650px;
        }


        article {
            width: 620px;
        }

        nav ul {
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin: 5px;
        }
    </style>
</head>

<body>
        <div style="display: flex; justify-content: center;">
            <header><h1 class="header">读书会</h1></header>
        </div>


         <div class="nav">
            <div style="display: flex; justify-content: center;">
            <nav>
                <ul>
                    <li><a href="https://www.fanshu.cn/">首页</a></li><li><a href="https://www.fanshu.cn/intro/read">小说</a></li><li><a href="https://www.fanshu.cn/intro/publish">出版</a></li><li><a href="https://www.fanshu.cn/intro/learn">排行榜</a></li>
                </ul>
            </nav>
            </div>
        </div>


        <div class="section">
            <div style="display: flex; justify-content: center;">
                <div style="text-align: center;">
            <section>
                <h1>读书活动</h1>
                <article>
                    <h2>书香威海阅读行</h2><p>与作家体验诗意的栖居,以阅读为指引,通过行走的方式参阅威海最具代表的文化坐标,最重要的历史事件,以及最具特色的人文景观。</p>
                </article>
                <article>
                    <h2>“走进北京名人故居”马拉松游读活动</h2><p>迎接世界读书日,“走进北京名人故居”马拉松游读活动即将在2019年4月13日举行。本次活动是2019年新路线,意味着这个路线讲会陪伴读者一年。</p>
                </article>
            </section>
            </div>
        </div>


        <div class="footer">
            <div style="display: flex; justify-content: center;">
                <footer>© 2019 lgl.All rights reserved</footer>
            </div>
</body>
</html>

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值