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

最新推荐文章于 2024-03-14 14:47:59 发布

1361976860

最新推荐文章于 2024-03-14 14:47:59 发布

阅读量51

点赞数

原文链接：http://www.cnblogs.com/ffr0068/p/7661907.html

版权

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教务系统</title>
</head>
<body>




<hr>

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

<div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;">
    <form action="">
            <select>
              <option>校内入口</option>
              <option>校外入口</option>


          </select><br>
      账号:<input type="text" name="账号"placeholder="请输入学号"><br>
            密码:<input type="password" name="密码"placeholder="请输入密码">
            <br>
        <input type="radio"name="role"value="stu">学生
            <input type="checkbox"name="vehicle"value="tea">教师<br>

            <input type="button" value="登录">
            <input type="button" value="取消">
            <input type="button" value="刷新">

    </form>





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

<div id="content" style="background-color: #EEEEEE;height: 150px;width: 400px;float: left;">
    <form action="">
        <ul>
            <li>交通指南</li>
            <li>人才招聘</li>
            <li>合作院校</li>
            <li>信息公开</li>
      </ul>
        <dl>
          <dt>版权所有:广州商学院  地址:广州市黄浦区九龙大道206号</dt>
            </div>
    <div id="footer" style="background-color: #FFA500;clear: both;text-align: center;">版权 © duym</div>
</div>


<hr>
<P>友情链接</P>
  <a href="http://www.gzcc.cn/">广州商学院<br>
<img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"/></a>






</body>
</html>