第二次作业

最新推荐文章于 2024-08-21 11:04:16 发布

xu159236

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量183

点赞数 3

文章标签： css javascript css3

本文链接：https://blog.csdn.net/xu159236/article/details/139757090

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业一</title>
    <style>
     
        .game{
            box-shadow: 10px 10px 10px gray;
            margin:auto;
            width: 800px;
            height: 40px;
            background-color: rgb(82, 74, 110);
            text-align:center;
            border-radius: 18px;
        }
        a{  text-decoration: none;
            font-size: 30px;
            color: white;
        }
        a:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="game"> 
        <a href="">游戏1</a>
        <a href="">游戏2</a>
        <a href="">游戏3</a>
        <a href="">游戏4</a>
        <a href="">游戏5</a>
        <a href="">游戏6</a>
        <a href="">游戏7</a>
        <a href="">游戏8</a>
        <a href="">游戏9</a>
    </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>work2(1)</title>
    <style>
        body,div,dl,dt,p,dd,ul,ol,li,pre,form,fieldset,input{
            padding: 0;
            margin: auto;
            font-family: "微软雅黑";
        }
        .wapbg{
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/tpbg.gif);
            height: 446px;
        }
        .wap{
            margin: auto;
            width: 955px;
        }
        .top{
            padding-left: 85px;
            height: 150px;
        }
        .middle{
            background-image: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/bgtp.gif);
            height: 296px;
            position: relative;
            width: 955px;
        }
        .dl{
            width: 312px;
            height: 230px;
            position: absolute;
            right: 60px;
            top: 30px;
        }
        .dlti{
            color: #333;
            font-size: 24px;
            position: absolute;
            top: 5px;
        }
        .dlmi{
            float: left;
            width: 312px;
            line-height: 45px;
            font-size: 17px;
            color: #333;
            position: absolute;
            top: 70px;
        }
        .dlmi input{
            float: right;
            height: 28px;
            width: 228px;
            border: 1px solid #DDDDDD;
            position: absolute;
            left: 77px;
        }
        .dlau{
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/dlau.gif) no-repeat;
            position: absolute;
            left: 240px;
            top: 171px;
            height: 45px;
            width: 45px;
            font-size: 16px;
        }
        .dlau a{
            display: block;
            width: 45px;
            height: 45px;
        }
        .dlaul{
            position: absolute;
            left: 263px;
            top: 171px;
            height: 45px;
            width: 45px;
            font-size: 16px;
        }
        .dlaul a{
            background: url(http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/dlau1.gif) no-repeat;
            display: block;
            width: 45px;
            height: 45px;
        }
        .end{
            position: absolute;
            font-size: 15px;
            color: #999;
            float: left;
            width: 809px;
            left: 85px;
            top: 304px;
        }
        .end span{
            float: right;
        }
        .end span a{
            color: #999;
            text-decoration: none;
        }
    </style>
</head>
<body>
        <div class="wapbg">
            <div class="wap">
                <div class="top">
                    <img style="padding-top: 80px ; margin: auto; " src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index/index_02.png"
                    width="474px" height="61px">
                </div>
                <div class="middle" height="296px" width="955px">
                    <div class="dl">
                        <div class="dlti">用户登录</div>
                        <div class="dlmi">
                            <p>用户名:</p>
                            <input type="text" id="userAccount" value style="position:absolute; top:7px">
                            <p>密码:</p>
                            <input type="password" id="userPassword" value style="position: absolute;  top: 54px; ">
                            <input type="hidden" name="encoded" id="encoded">
                            <font style="display: inline; " color="red"></font>
                        </div>
                        <div class="dlj" style="display: none;">
                            <input style="margin-right: 5px;" name="jzmmid" id="jzmmid" type="checkbox" value="1">
                            "记住用户名"
                        </div>
                        <input type="submit" id="btnSubmit" class="dlau" title="点击登录" value style="border: 0px;">
                        <div class="dlaul" style="margin-left: 35px">
                        <a href="#"></a>
                        </div>
                    </div>
                    <div class="end">
                        湖南强智科技发展有限公司 版权所有
                        <span>
                            <a href="#">隐私声明</a>
                            
                            <a href="#">设为首页</a>
                        </span>
                    </div>
                </div>
            </div>
        </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>work2(2)</title>
    <style>
        [class]{
            border-width: 0px;           
            border-color: black;
            border-style: solid;
            line-height: 2.5;
            background-color: rgb(46, 90, 201);
        }
        span:hover{
            background-color: rgb(65, 135, 216);
        }
        span{
            display: inline-block;
            color: white;
            position: relative;
            left: 80px;
        }   
        /* [id]{
            position: relative;
            left: 400px;
        } */
        p{
            color: gray;
            position: relative;
            left: 350px;
        }
    </style>
</head>
<body>
    <div id="">
        <img src="http://zswxyjw.yinghuaonline.com/znlykjdxswxy_jsxsd/framework/images/index_logo.gif" alt="">
    </div>
    <div class="">
        <span><b>我的桌面</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><b>学籍成绩</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><b>培养管理</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><b>考试报名</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><b>教学评价</b></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div><br>
    <div id="">
        <table border="0px" width="1000px" height="600px" >
            <tr>
                <td rowspan="2" colspan="2"><img src="./个人信息.png" alt=""></td>
                <!-- <td></td> -->
                <td rowspan="2"><img src="./选课中心.png" alt=""></td>
                <td><img src="学生评教.png""></td>
                <td colspan="2"><img src="./已收留言.png" alt=""></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- <td></td>
                <td></td> -->
                <!-- <td></td> -->
                <td><img src="./培养方案.png" alt=""></td>
                <td colspan="2"><img src="./已收公告.png" alt=""></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td><img src="./课堂成绩查询.png" alt=""></td>
                <td><img src="./教学周历.png" alt=""></td>
                <td><img src="./授课计划查询.png" alt=""></td>
                <td><img src="./未获得学分成绩查询.png" alt=""></td>
                <td><img src="./学籍卡片.png" alt=""></td>
                <td><img src="./修改密码.png" alt=""></td>
            </tr>
        </table>
    </div><hr>
    <p>Copyright (C) 湖南强智科技发展有限公司 All Rights Reserved 湘ICP 备12010071号</p >
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>work2(3)</title>
    <style>
        .photo{
            text-align: center;
        }
        .mi{
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <a>新闻</a>
            <a>hao123</a>
            <a>地图</a>
            <a>贴吧</a>
            <a>视频</a>
            <a>图片</a>
            <a>网盘</a>
            <a>文库</a>
            <a>更多</a>
        </div>
        <div class="photo">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
        </div>
        <div class="mi">
            <input type="search" name="" id="" >
            <button type="button">百度一下</button>
        </div>
        <div class="photo">
            <img src="./屏幕截图 2024-06-17 232149.png" >
        </div>
    </div>
</body>
</html>