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

最新推荐文章于 2025-05-16 16:45:46 发布

转载最新推荐文章于 2025-05-16 16:45:46 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qisq/p/7660507.html

本文展示了一个使用HTML和CSS构建的基本登录页面示例，并通过实际应用演示了下拉列表选择框、无序列表、有序列表及定义列表等元素的使用。

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MIS</title>
</head>
<body>
<h1>MIS2017</h1>
<h2>广州商学院</h2>

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

    <div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;"align="center">
         <form>
            账号:<input type="text" name="账号"placeholder="请输入用户名"><br>
             密码:<input type=" password" name="密码"placeholder="请输入密码"><br>
            <input type="button" value="登录" style="margin-right:10px;font-size:15px;">
            <input type="button" value="取消" style="font-size:15px"><br>
             <input type="radio">学生
             <input type="radio">教师
             <input type="radio">管理员
        </form></div>
    <div id="footer" style="background-color:lavender;clear:both;text-align:center;">版权@duym</div>

</div>

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

    <div id="head" style="background-color:#EEEEEE;height:40px;width:400px;float:left;"align="center">
         <select>
             <option>问题</option>
             <option>答案</option>
             <option>收藏</option>
         </select>
    <div id="footer" style="background-color:cornflowerblue;clear:both;text-align:center;">版权@duym</div>


<div  id="container" style="width:400px " >
    <div id="header" style="background-color:darkseagreen;"><h2 style="margin-bottom:0;">相关栏目</h2></div>

    <div id="xglm" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
         <ul>
             <li>专业与课程建设</li>
             <li>人才培养方案</li>
             <li>教学通讯</li>
         </ul>
         <ol>
             <li>校   历</li>
             <li>尔雅通识课</li>
             <li>教务系统</li>

        </ol></div>
    <div id="footer" style="background-color:darkseagreen;clear:both;text-align:center;">版权@duym</div>

<div  id="container" style="width:400px " >
    <div id="header" style="background-color:plum;"><h2 style="margin-bottom:0;">学院信息</h2></div>

    <div id="content" style="background-color:#EEEEEE;height:150px;width:400px;float:left;">
              <dl>
                  <dt>学院</dt>
                      <dd>信息学院</dd>
                      <dd>会计学院</dd>
                      <dd>金融学院</dd>
     </dl>
        </div>
    <div id="footer" style="background-color:plum;clear:both;text-align:center;">版权@duym</div>

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