用html和css制作学校官网

最新推荐文章于 2024-07-23 22:09:24 发布

怎么都跑不快

最新推荐文章于 2024-07-23 22:09:24 发布

阅读量319

点赞数 3

文章标签： html5 css

本文链接：https://blog.csdn.net/yfy0308/article/details/137287319

版权

效果展示：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学校官网</title>
    <style>
      .D{
  
        margin: auto;
      }
      .d1{
        margin-top: 20px;
        width: 1160px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        color: #1069a4
      }
      .d2{
        width: 1160px;
        height: 522px;
        margin-top: 40px;
        border-radius: 5PX;
        border: 4px solid #ededed;
        background: #f5f5f5;
        
      }
      .d3{
        width: 1160px;
        height: 40px;
        text-align: center;
        color: #8099af;
        font-size: 12px;
        line-height: 40px;
      }
      .img1{
        float: left;
        margin-right: 15px;
       
      }
      .dimg{
        width: 768px;
        height: 419px;
        float: left;
      }
      .img2{
             width: 748px;
             height: 418px;
             margin-left: 10PX;    
      }
      .d2-1{
        width: 384px;
        height: 514px;
        float: left;
        background: white;
      }
      .DI{
          width: 309PX;
          height: 33.5PX;
          border: 1px solid rgb(122, 119, 119);
          border-radius: 5PX;
          margin-top: 5px;
          margin-bottom: 5px;
      }
      input{
        width: 251px ;
        height: 30px;
        border: 1px solid white;
        border-radius: 5PX;
      }
      .dinput{
        float: left;
        width: 50px;
        height: 33.5px;
        border-right: 1PX solid rgb(122, 119, 119);
      }
      .img3{
        margin: 10px 15px;
      }
      button{
        margin-top: 10px;
        width: 309px;
        height: 30px;
        background-color: #337ab7;
        color: #ededed;
        border: 0px;
        border-radius: 5px;
      }
      a{
        color: #337ab7;
        margin-left: 220px;
        text-decoration: none;
      }
      .div-ts{
        width: 310px;
        height: 130px;
        border-radius: 5px;
        font-size: 14px;
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
        margin-top: 10px;
      }
      .dts{
        width: 275px;
        height: 100px;
         margin: auto;
         padding-top: 10px;
      }
      .img-erweima{
        float: left;
        margin-top: 40px;
      }
      .diverweima{
        float: left;
        margin-top: 55px;
        margin-left: 5px;
      }
      .div-biaodan{
        width: 320px;
        margin: auto;
      }
    </style>
<body>
    
    <div class="D d1">
        <img class="img1" src="d:\浏览器下载\dlycssz_cxDlycsszZp.html">
        延安大学教学管理信息服务平台
    </div>
    <div class="D d2">
        <div class="dimg"><img class="img2" src="d:\浏览器下载\dlycssz_cxDlycsszZp (1).html"></div>
        <div class="d2-1">
          <div class="div-biaodan">
            <form>
              <div>
                <h5>用户登录</h5>
                <div class="DI">
                    <div class="dinput"><img class="img3" src="./img/log_ic01.png"></div>
                    <input type="text" placeholder="用户名">
                </div>

                <div class="DI">
                    <div class="dinput"><img class="img3" src="./img/log_ic02.png"></div>
                    <input type="text" placeholder="密码">
              </div>
              <div><a href="#">忘记密码了？</a></div>
              <div><button>登录</button></div>
              <div class="div-ts">
                <div class="dts">“圣地教务”公众号非任何学校官方公众号,<br>请立即取消关注，谨防受骗或个人信息泄露<br>务管理系统途径<br>1.访问http://jwglxt.yau.edu.cn/jwglxt<br>2.登录学校网办大厅后选择教务系统登录</div>
              </div>
              <div>
                <img class="img-erweima" src="d:\浏览器下载\二维码.html">
                <div class="diverweima">
                用手机扫一扫,<br>
                安全、便捷登录
                </div>
              </div>
            </div>
            </form>
          </div>
        </div>
    </div>
    <div class="D d3">
      版权所有：延安大学教务处 电话：0911-2650133 传真：0911-2650131 电子信箱：ydjwc@yau.edu.cn   版本V8.3.14
    </div>
</body>
</html>