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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title>
</head>
<body>
      <h1>欢迎您的到来！</h1>
      <br>
      <div id="container" style="width: 400px">
          <div id="header"
      style="background-color: antiquewhite" ><h2 align="center" style="margin-bottom: 0">登录</h2></div>
          <div id="content" style="background-color:aqua";height: 150px;width: 500px;float: left;>
          用户名：<input type="text"name="username"placeholder="请输入用户名"><br>
          密码：  <input type="text"name="password"placeholder="请输入密码"><br>
          <input type="radio"name="教师">教师 <input type="radio"name="学生">学生<br>
          <input type="button"value="确定">   <input type="button"value="重置"><br>
      </div>
          <div id="footer" style="background-color: antiquewhite;clear:both;text-align: center;">版权_zsy</div>
      </div>
      <h5>------------------------------------------------------</h5>
      <div id="container"style="width: 400px">
          <div id="header"
               style="background-color: aqua"><h2 align="center"style="margin-bottom: auto" >相关栏目/Relater sections</div>
          <div id="content"style="background-color: antiquewhite;height:150px;width:400px;float:left">
              <from>
                  <select>
                      <option>疑问</option>
                      <option>提问</option>
                  </select>
              </from>
              <ul>
                  <li>教师常用表格</li>
                  <li>学生常用表格</li>
                  <li>教学管理表格</li>
                  <li>教学管理文件</li>
                  <li>参考资料</li>
              </ul>
          </div>
      </div>
      <div id="container"style="width:400px">
          <div id="header"
               style="background-color: crimson"><h2 align="center"style="margin-bottom: auto" >办事指南</h2></div>
          <div id="content"style="background-color: peachpuff;height: 200px;width: 400px;float: left">
              <ol>
                  <li>教学处会议组织流程示意图</li>
                  <li>教师工作量审核流程示意图</li>
                  <li>教学处印章管理示意图</li>
              </ol>
              <dl>
                  <dt>学生会</dt>
                      <dd>外联部</dd>
                  <dt>团委</dt>
                      <dd>组织部</dd>
              </dl>
          </div>
          <div id="footer" style="background-color: crimson"><h2 align="center"style="margin-bottom: auto">版权_zsy</h2></div>
      </div>
      <p>
          <a href="http://www.gzcc.cn/">进入广州商学院<img src="http://www.gzcc.cn/2016/images/banner.png" height=50,width=200></a>
      </p>
</body>
</html>

posted @ 2017-10-13 15:07 088郑淑莹阅读(118) 评论(0) 收藏举报

刷新页面返回顶部

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

公告