第三次作业

最新推荐文章于 2024-08-14 15:45:18 发布

Csxyzj

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量132

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Csxyzj/article/details/140620703

版权

教务管理系统:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid red;
            margin: auto;
            margin-top: 200px;
            background-color: white;
            border-radius: 5%;
        }
        body{
            background-color: blue;
        }
        .class1{
            margin-left: 100px;
        }
        .class2{
            margin-left: 50px;
        }
        #kuang1{
            margin-left: 50px;
            width: 300px;
            height: 30px;
            margin-top: 20px;
        }
        p{
            margin-left: 50px;
            height: 30px;
            margin-top: 20px;
        }
        .class3{
            width: 200px;
            margin-left: 50px;
            margin-top: 100px;
            background-color: rgb(12, 12, 231);
            color: white;
        }
        .class4{
            margin-left: 50px;
            color: red;
        }
        .class5{
            margin-left: 700px;
        }
    </style>
</head>
<body>
    <img src="./d_login_banner.png" alt="" class="class5">
    <div class="box">
        <span class="class1">账号登录</span>
        <span class="class2">扫码登录</span>
        <br>
        <select name="shengfen" id="kuang1">
            <option value="">学生</option>
            <option value="">教师教辅人员</option>
            <option value="">管理人员</option>
            <option value="">门户维护员</option>
        </select>
        <p><input type="text" placeholder="请输入账号"></p>
        <p><input type="text" placeholder="请输入密码"></p>
        <p><input type="text" placeholder="验证码"></p>
        <a href="" class="class4">忘记密码?</a>
        <br>
        <button class="class3">登录</button>
    </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>测试2</title>
    <style>
        div{
            height: 150px;
            border: 1px solid red;
        }
        .div1{
            background-color:blue;             
            text-align: center;
            font-size: 100px;
            color: white;
        }
        .div2{
            height: 700px;
            width: 10%;
             background-color: rgb(86, 86, 238); 
        }
        .div3{
            height:28px;
            background-color: rgb(70, 70, 250);
            text-align: center;
            color: white;
        }
        p{
            border: 1px solid red;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="div1">教务网络管理系统</div>
    <div class="div2">
        <p>聚才网</p>
        <p>掌上校园</p>
        <p>学生学籍</p>
        <p>培养方案</p>
        <p>网上选课</p>
        <p>教学安排</p>
        <p>考试安排</p>
        <p>学生成绩</p>
        <p>教材信息</p>
        <p>网上评教</p>
        <p>其它</p>
    </div>
    <div class="div3">成都文理学院教务处</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>测试3</title>
    <style>
        .box{
            width: 100%;
        }
        .prod{
            width: 234px;
            height: 366px;
            list-style: none;
            border: 1px solid red;
            display: inline-block;
            line-height: 1.6;
            margin-left: -5px;
        }
        .pord-href{
            text-decoration: none;
        }
        .pord:hover{
            border-color: red;
        }
        .pord-intoduce-span{
            color: aqua;
            font-size: 14px;
        }
        .pord-price{
            font-size: 19px;
            color: red;
        }
        .prod-boss{
            color: red;
            font-size: 12px;
        }
        .prod-sale{
            color:red;
            font-size: 12px;
            border-top: 1px solid red;
            text-align: right;
            padding-top: 10px;
        }
        .prod-text-box{
            width: 210px;
            height: 340px;
            margin: auto;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="prods">
            <li class="prod">
             <a class="pord-href" href="">
             <div class="prod-text-box">
                <img class="prod-img" width="200px" height="200px" src="../01.html/1.3块级和行内标签/53a975421f45e5146e99f4af701bbb14_504520381810307233.jpg" alt="">
                <div class="pord-intoduce">
                    <span class="pord-intoduce-span">全店批发价</span>
                </div>
                <div class="pord-price">￥114514</div>
                <div class="prod-boss">xx公司</div>
                <div class="prod-sale">月销2000+</div>
             </div>
             </a>
            </li>
        </ul>
    </div>
</body>
</html>