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

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

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

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

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MIS0060</title>
</head>
<body>

<p></p>
<div  id="container" style="width:400px " >
    <div id="header" style="background-color:#EEEEEE;"><h2 align="center" style="margin-bottom:0;">登录</h2></div>

    <div id="content" style="background-color:#blue;height:150px;width:400px;float:left;">
        <form action="">
            用户名:<input type="text" name="user"><br>
            密码:<input type="password" name="password">
           <form><br>
    <input type="radio" name="role" value="stu">学生
    <input type="checkbox" name="vehicle" value="Bike">老师
</form>
            <br>
            <input type="button" value="登陆">
            <input type="button" value="取消">
        </form>


    </div>
    <div id="footer" style="background-color:eeeeee;clear:both;text-align:center;"></div>

</div>

<hr>


<p></p>
<div  id="container" style="width:400px " >
    <div id="header" style="background-color:hotpink;"><h2 align="center" style="margin-bottom:0;">Test</h2></div>

    <div id="content" style="background-color:#EEEEEE;height:700px;width:400px;float:left;">
<ul>
    <li>red</li>
    <li>green</li>
    <li>yellow</li>
</ul>

<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>草莓</li>
</ol>>

<dl>
      <dt>苹果</dt><br>
    　<dd>红色，酸甜</dd>
      <dd>香蕉</dd><br>
　  　<dt>黄色，弯月状</dt>
    　<dd>草莓</dd><br>
      <dd>红色，酸甜</dd>
</dl>
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
</dl>
<table border="1">
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    <tr>
        <td>表格数据</td>
        <td>表格数据</td>
        <td>表格数据</td>
    </tr>


</table>
    </tr>
<form action="demo_form.php"method="post/get">
    <input type="text" name="email" size="40" maxlength="50">
    <input type="password">
    <input tyoe="checkbox" checked="checked">
    <input tyoe="radio" checked="checked">
    <input tyoe="submit" value="Send">
    <input tyoe="reset">
    <input type="hidden">
    <select>
        <option>Apple</option>
        <option selected="selected">Banana</option>
        <option>Mango</option>
        <option>Peach</option>
    </select>
    <textarea name="comment" rows="6" cols="20"><</textarea>


</form>

    </div>
    <div id="footer" style="background-color:skyblue;clear:both;text-align:center;">版权 © Mars</div>

</div>

</body>
</html>

 

posted @ 2017-10-13 14:27  105杨捷丽  阅读(124)  评论(0)  编辑  收藏  举报