作业css+html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>中南林业科技大学</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .a{

            height: 40px;

        color: dimgrey;

      background: black;

        }

        span{

            font-size: 16px;

            line-height: 40px;

            text-align: center;

        }

       

        .b a{

           

            list-style: none;

            text-decoration: none;

            height: 50px;

            background: rgb(33, 46, 189);

            text-align: center;

        }

         .bli a{

           

            float: left;

            text-align: center;

            line-height: 50px;

            display: block;

            width: 137.7px;

            color: #fbf9f9;

        }

        .bli {

            color: rgb(253, 251, 251);

        }

        .bli a:hover{

            background: #3b0fff;

        }

        .tuipian{

            background-color: blue;

            text-align: center;

        }

       .tt{

        height: 500px;

        width: 1440px;

       }

    </style>

</head>

<body>

   

    <div class="a">

        <span class="a1">欢迎来到中南林业科技大学!</span>

        &nbsp;&nbsp;&nbsp;&nbsp;

        <span >在线教育平台|</span>

        <span>办公OA|</span>

        <span>董事长信箱|</span>

        <span>院长信箱</span>

    </div>

    <div class="tuipian">

        <img src="./logo-swxy.png" alt="" >

    </div>

    <div class="b">

        <ul type="none">

            <li class="bli"> <a href="#">首页</a></li>

            <li class="bli"> <a href="#">学院概括</a></li>

            <li class="bli"> <a href="#">机构院系</a></li>

            <li class="bli"> <a href="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/">教务系统</a></li>

            <li class="bli"> <a href="#">国际教育</a></li>

            <li class="bli"> <a href="#">招生就业</a></li>

            <li class="bli"> <a href="#">学生工作</a></li>

            <li class="bli"> <a href="#">党建工作</a></li>

            <li class="bli"> <a href="#">公开招标</a></li>

            <li class="bli"> <a href="#">仿真实训</a></li>

        </ul>

    </div>

    <div class="tt">

<img src="./W020230607326950890730.jpg" alt="" width="1400px" height="600px">

    </div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .nav{

            height: 40px;

            background: rgb(31, 19, 77);

            text-align: center;

            border-radius: 20px;

        }

         span{

            float: left;

            display: block;

            line-height: 40px;

            text-align: center;

            color: aliceblue;

            width: 120px;

            text-shadow: 5px 5px 5px gray;

        }

        span:hover{

            background: red;

         

        }

        span{

            display:block;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="nav">

        <span>王者荣耀</span>

        <span>刺激战场</span>

        <span>金铲铲之战</span>

        <span>三国杀</span>

        <span>天天酷跑</span>

        <span>欢乐钓鱼大师</span>

        <span>原神</span>

        <span>明日之后</span>

        <span>穿越火线</span>

        </ul>

    </div>

   

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>学校官网t</title>

    <style>

        *{

            /* border: 1px solid red; */

            margin: 0%;

        }

        .a {

            width: 800px;

            height: 60px;

            text-align: center;

        }

        .b img{

            margin: 0px;

            width: 600px;

            height: 300px;

        }

    .b img,.b1{

        float: left;

        /* height: ; */

    }

        .b1{

            background-color: rgb(226, 224, 224);

            width: 780px;

            height: 300px;

            line-height: 50px;

            text-align: center;

        }

        .c1,.c3{

            float: left;

            height: 30px;

            margin-left: 10px;

           

        }

        .c1{

            width: 600px;

            text-align: center;

         

        }

       

    </style>

</head>

<body>

    <div class="a">

        <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png" alt="">

       

    </div>

    <div class="b">

        <div><img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif" alt="">

            <div class="b1">

           

                <h1>登录</h1>

                        用户名:<input type="text" name="useaname" id="useaname" value=""><br>

                        密&nbsp;&nbsp;&nbsp;码: <input type="password" id="password" name="password"><br>

                        <button type="submit">用户名</button>

                        <button type="reset">reset</button>

            </div>

        </div>

       

    </div>

    <div class="c">

        <div class="c1">鸡汤来罗发展有限公司 版权所有  </div>

        <div calss="c3"> 隐私声明 </div>

    </div>

</body>

</html>

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值