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

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

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

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1031353319qq/p/7660361.html

本文解析了一个简单的广州商学院登录页面源代码，介绍了页面的基本结构，包括登录表单元素及部分学校概况链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广州商学院</title><br><div id="banner">
      <div class="container">
         <div class="row">
            <div class="col-xs-12">
               <img src="http://www.gzcc.cn/2016/images/banner.png">
            </div>


         </div>
      </div>
   </div>
</head>
<body>
<p></p>


<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: antiquewhite;height: 150px;width: 400px;float: left;">
    <form action="">
      学号:<input type="text" name="user"><br>
            密码:<input type="password" name="password">
            <br>
            <input type="button" value="登陆">
            <input type="button" value="注销">
    </form>
</div>
    <div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 © duym</div>
</div>
<div id="container" style="width: 400px">


<div id="content" style="background-color: antiquewhite;height: 600px;width: 800px;float: left;">
    <form action="">

            <br><a class="list-group-item active" >
                <h4 class="list-group-item-heading">
                   学校概况                </h4>
             </a>

             <a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/" class="list-group-item">
                <h4 class="list-group-item-heading">
                   学校简介                </h4>
             </a>

             <a href="http://www.gzcc.cn/html/xygk/xrld/" class="list-group-item">
                <h4 class="list-group-item-heading">
                   现任领导                </h4>
             </a>

             <a href="http://www.gzcc.cn/html/xygk/xhxx/" class="list-group-item">
                <h4 class="list-group-item-heading">
                   校徽校训                </h4>
             </a>

             <a href="http://www.gzcc.cn/html/xygk/bxll/" class="list-group-item">
                <h4 class="list-group-item-heading">
                   办学理念                </h4>
             </a>

             <a href="http://www.gzcc.cn/html/xygk/dsj/" class="list-group-item">
                <h4 class="list-group-item-heading">
                   大 事 记                </h4>
             </a>

             <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/" class="list-group-item">
                <h4 class="list-group-item-heading">
                   画说校园                </h4>
             </a>

             <a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html" class="list-group-item">
                <h4 class="list-group-item-heading">
                   全景校园                </h4>
             </a>

    </form>
</div>
    <div id="footer" style="background-color: aliceblue;clear: both;text-align: center;">版权 © duym</div>
</div>
<div class="col-sm-3 hidden-xs">
          <div class="list-group">

                                    </div>
        </div>

<hr>

</body>

</html>

转载于:https://www.cnblogs.com/1031353319qq/p/7660361.html