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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录|哈哈书院</title>
</head>
<body style="background-color: khaki">
<div  id="container" style="width:400px;margin:0px auto;" >
     <div id="header" style="background-color:aquamarine"><h2 align="center" style="margin-bottom: 0;"><font face="华文新魏" color="#ffc0cb" size="12" >哈哈书院 </font></h2></div>
         <div id="content" style="background-color:peachpuff;width:400px;float:left;line-height:40px;">
    <form action="">
      Username:<input type="text" name="user" 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

    <input type="checkbox" name="vehicle" value="Bike">记住密码<br><br>

            <input type="button" value="login">
            <input type="button" value="cancel">
    </form>
</div>
    <div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 © duym</div>
</div>
<div  id="container" style="width:400px;margin:0px auto;" >
     <div id="header" style="background-color:aquamarine"><h2 align="center" style="margin-bottom: 0;"><font face="华文新魏" color="#ffc0cb" size="12" >问答平台</font></h2></div>
         <div id="content" style="background-color:peachpuff;width:400px;float:left;line-height:40px;">
    <from>
        <select>
            <option>--请选择--</option>
             <option>问答</option>
            <option>收藏</option>
        </select>
    </from>
    <ul>
        <li>哈哈书院简史</li>
        <ol><li>建院之初</li><li>建院那些事</li><li>桃李满天下</li></ol>
    </ul>
             <ul>
        <li>哈哈书院招生简介</li>
        <ol><li>爱笑的人运气不会差</li><li>喜欢你的颜，想要你的钱</li><li>哈哈哈哈哈</li><br></ol>
    </ul>
<div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 © duym</div>

</div><hr>

<a href="http://www.gzcc.cn/">哈哈学院<br>
</body>
</html>

 

posted @ 2017-10-13 20:44  阿植  阅读(176)  评论(0)  编辑  收藏  举报