第二次作业

最新推荐文章于 2024-10-08 17:48:41 发布

不会敲代码的吗喽

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量98

点赞数 3

文章标签：前端 css

本文链接：https://blog.csdn.net/2301_79878463/article/details/139453613

版权

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
/*.c{
      margin:auto;
      padding-top:100px;
    }*/
.a{
    padding:0px;
    margin:auto;
    background:url("教学一体化.png")no-repeat scroll;
    width:500px;
    height:60px;
    background-size:500px,60px;
    margin-top:100px;
    margin-left:300px;
}
.b{
    padding:0px;
    margin:0px;
    background:url("背景.gif")no-repeat scroll;
    width:1000px;
    height:300px;
    background-size:1000px,300px;
    margin:auto;
    position:static;
}
.d{
    padding:0px;
    margin:0px;
    background-color:rgba(237,237,237,0.692);
}
.c{
    margin-left:500px;
    margin-bottom:00px;
    padding-top:20px;
    line-height:2;

}
/*input[type="text"],[type="password"]{*/
input{
    width:250px;
    height:30px;
    position:static;
}

[type="submit"]{
    width:50px;
    height:50px;
    background-image:url(./箭头.png);
    background-size:cover;
    border:0px;
    margin-left:200px;
}


[type="reset"]{
    width:50px;
    height:50px;
    background-image:url(./问号.png);
    background-size:cover;
    border:0px;
}
.e{
    width: 400px;
    height: 20px;
    color:darkcyan;
    padding-left: 90px;
    display: inline-block;
}
.sign{
    width: 80px;
    height: 30px;
    background-color: cornflowerblue;
}
 </style>
</head>
<body>
 <div class="a"></div>
 <div class="d">
 <div class="b">
 <div class="c">



 <form action="https://swxy.csuft.edu.cn/xsgzc/" >
 <h1>用户登录</h1>
 <p>用户名:&nbsp;&nbsp;&nbsp;<input type="text" required ></p >
 <p>密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" required></p >
 <!-- <button class="sign">登录</button> -->
 <button type="submit"></button>
 <button type="reset"></button>

 </form>
</div>
</div>
 </div>
 <div class="e"><span>湖南强智科技发展有限公司||版权所有</span></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>
       
        .A{
            width: 1000px;
            height: 75px;
            background-color: white;
            margin: 0px;
            border: 2px solid white;
        }
        .B{
            width: 1000px;
            height: 35px;
            background-color: hsl(219, 79%, 66%);
            border: 1px solid black;
            margin-top: 0px;
            
        }
        .C{
            width: 1000px;
            height: 450px;
            /* border: 3px solid white; */
        }
        .D{
            align: center;
        }
        ul{
            margin-top: 0px;
            padding-inline-start: 0%;

        }
        .B>ul>li{
            /* 垂直排列变水平 */
            float: left;
            list-style: none;
            text-align: center;
            height: 35px;
            /* 边距 */
            line-height: 35px;
            /* 间距 */
            width: 125px;
            /* 字体大小 */
            font-size: 20px;
            font-family: 楷体;
        }
        ul>li:hover{
            /* 光标 */
            background-color: hsl(219, 79%, 80%)
        }
        .Bb{
            color: white;
            text-decoration: none;
            font-weight:600
        }
        .name{
            width: 400px;
            height: 30px;
            float: right;
        }
        .C1{
            width: 100%;
            height: 66%;
            background: white;
            margin-top: 25px;
        }
        .C2{
            width: 100%;
            height: 33%;
            background-color: white;
            border: 5px;
        }
        [title ^= "C2"]{
            float: left;
            list-style: none;
            text-align: center;
            line-height: 5px;
        }
        .C21,.C22,.C23,.C24,.C25,.C26{
            width: 16%;
            height: 100%;
            float: left;
            margin: 3.2px;
        }
        /* .C21{
            background-color:cadetblue;
        }
        .C22{
           background-color:yellowgreen;
        }
        .C23{
            background-color:orange;
        }
        .C24{
            background-color:azure;
        }
        .C25{
           background-color:mediumorchid;
        }
        .C26{
           background-color:darkblue;
        } */
        .C11,.C12,.C13{
            float: left;
            margin: 3.2px;
        }
        .C11{
            width: 290px;
            height: 300px;
            /* background-color: azure; */
        }
        .C12{
            width: 190px;
            height: 300px;
            /* background-color: blanchedalmond; */
        }
        .C13{
            width: 490px;
            height: 300px;
            /* background-color: brown; */
        }
        .C131,.C132{
            float:left;
            /* margin: 0.6px; */
        }
        .C131{
            width: 190px;
            height: 300px;
            /* background-color: chartreuse; */
        }
        .C132{
            width: 300px;
            height: 300px;
            /* background-color: pink; */
        } 
    </style>
</head>
<body>
    <div class="A">
        <img src="教学一体化.png" alt="loge" class="loge">
        <img src="用户.png" alt="name" class="name">
    </div>
    <div class="B">
        <ul>
            <li class="Bb"><span>我的桌面</span></li>
            <li class="Bb"><span>学籍成绩</span></li>
            <li class="Bb"><span>培养管理</span></li>
            <li class="Bb"><span>考试报名</span></li>
            <li class="Bb"><span>教学评价</span></li>
        </ul>
    </div>
    <div class="C">
        <div class="C1">
            <div class="C11"><img src="个人信息.png" alt="" width="290px" height="300px"></div>
            <div class="C12"><img src="选课中心.png" alt="" width="190px" height="300px"></div>
            <div class="C13">
                <div class="C131">
                    <div class="C1311"><img src="学生评教.png" alt="" width="185px" height="150px"></div>
                    <div class="C1312"><img src="培养方案.png" alt="" width="185px" height="145px"></div>
                </div>
                <div class="C132">
                    <div class="C1321"><img src="已收留言.png" alt="" width="300px" height="150px"></div>
                    <div class="C1322"><img src="已收公告.png" alt="" width="300px" height="145px"></div>
                </div>
            </div>
        </div>
        <div class="C2">
            <div class="C21"><img src="课程成绩查询.png" alt="" width="160px" height="148.5"></div>
            <div class="C22"><img src="教学周历.png" alt="" width="160px" height="148.5"></div>
            <div class="C23"><img src="授课计划查询.png" alt="" width="160px" height="148.5"></div>
            <div class="C24"><img src="未获得学分成绩查询.png" alt="" width="160px" height="148.5"></div>
            <div class="C25"><img src="学籍卡片.png" alt="" width="160px" height="148.5"></div>
            <div class="C26"><img src="修改密码.png" alt="" width="150px" height="148.5"></div>
        </div>
    </div>
    <p>&nbsp;<hr></p>
    <div class="D">Copyright (C) 湖南强智科技发展有限公司  All Rights Reserved 湘ICP 备12010071号</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>
        .A{
            width: 1000px;
            height: 75px;
            background-color: white;
            margin: 0px;
            border: 2px solid white;
        }
        .B{
            width: 1000px;
            height: 35px;
            background-color: hsl(219, 79%, 66%);
            border: 1px solid black;
            margin-top: 0px;
            
        }
        
        ul{
            margin-top: 0px;
            padding-inline-start: 0%;

        }
        .B>ul>li{
            /* 垂直排列变水平 */
            float: left;
            list-style: none;
            text-align: center;
            height: 35px;
            /* 边距 */
            line-height: 35px;
            /* 间距 */
            width: 125px;
            /* 字体大小 */
            font-size: 20px;
            font-family: 楷体;
        }
        ul>li:hover{
            /* 光标 */
            background-color: hsl(219, 79%, 80%)
        }
        .Bb{
            color: white;
            text-decoration: none;
            font-weight:600
        }
        .name{
            width: 400px;
            height: 30px;
            float: right;
        }
        .C{
            width: 1000px;
            height: 800px;
            float: left;
            /* background-color: aquamarine; */
        }
        .C1{
            width: 200px;
            height: 800px;
            background-color: white;
            /* border: 1px solid cornflowerblue; */
        }
        /* .table1,.table2,.table3{
            border: 1px solid cornflowerblue;

        } */
        .C2{
            width: 800px;
           height: 800px;
           /* background-color: pink; */
          }
         .C1,.C2{
            float: left;
         }
         /* .C1>ul>li{
            background-color:floralwhite;
            border: 1px solid black;
            margin-top: 0px;
        } */
    </style>
</head>
<body>
    <div class="A">
        <img src="教学一体化.png" alt="loge" class="loge">
        <img src="用户.png" alt="name" class="name">
    </div>
    <div class="B">
        <ul>
            <li class="Bb"><span>我的桌面</span></li>
            <li class="Bb"><span>学籍成绩</span></li>
            <li class="Bb"><span>培养管理</span></li>
            <li class="Bb"><span>考试报名</span></li>
            <li class="Bb"><span>教学评价</span></li>
        </ul>
    </div>
    <div class="C">
        <div class="C1">
            <h3>培养方案</h3>
            <ul class="table1">
                <li><a href="">教学查询进程</a></li>
                <li><a href="">执行计划</a></li>
                <li><a href="">培养方案明细</a></li>
            </ul>
                <h3>我的课表</h3>
            <ul class="table2">
                <li><a href="">学期理论课表</a></li>
                <li><a href="">实验课表查询</a></li>
            </ul>
            <ul class="table3">
                <h3>选课管理</h3>
                <li><a href="">学生选课中心</a></li>
                <li><a href="">学生预选管理</a></li>
                <li><a href="">学生预选查询</a></li>
            </ul>
        </div>
        <div class="C2"><img src="第三页面.png" alt="" width="1000px" height="800px"></div>
    </div>
</body>
</html>