第一个静态页面

没错第一个页面就是写这个东西

然后这个就是我的成果，虽然有点low，但是感觉还行哈哈哈

最后附上代码

html的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TITLE</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div class="top-content">
    <img src="pic/logo.png" class="top-img1">
    <img src="pic/logo5.png" class="top-img2">
    <img src="pic/钟.png" class="top-img3">
    <button class="top-button">考生登录地址</button>
</div>
<div class="main-div">
    <div class="left-list">
        <!--旁边的导航栏-->
        <span>
            <div>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&lt;&nbsp;&lt;&lt;</span>
            </div>
            <div>
                <img src="pic/首页.png">
                <span>首页</span>
            </div>
            <div>
                <img src="pic/考试信息.png">
                <span>考试管理</span>
            </div>
            <div>
                <img src="pic/人员管理.png">
                <span>人员管理</span>
            </div>
            <div>
                <img src="pic/学习.png">
                <span>学习</span>
            </div>
            <div>
                <img src="pic/任务.png">
                <span>自定义任务</span>
            </div>
            <div>
                <img src="pic/认证.png">
                <span>认证中心</span>
            </div>
            <div>
                <img src="pic/审核.png">
                <span>报名审核</span>
            </div>
            <div>
                <img src="pic/支付.png">
                <span>支付中心</span>
            </div>
            <div>
                <img src="pic/系统.png">
                <span>系统管理</span>
            </div>
            <div class="left-list-end3"></div>
            <div>
                <img src="pic/帮助.png">
                <span>帮助</span>
            </div>
            <div>
                <img src="pic/个人中心.png">
                <spna>Hello</spna>
            </div>
        </span>
    </div>
    <div class="content">
        <div class="content-top1">
            <label class="progress1">
                <span>&nbsp;&nbsp;在线人数<span>0/25</span>&nbsp;</span>
                <progress value="69" max="100" ></progress>
                <span class="button-increase">&nbsp;+&nbsp;</span>
            </label>
            <label class="progress2">
                <span>&nbsp;&nbsp;注册人数<span>1/25</span>&nbsp;</span>
                <progress value="10" max="100" ></progress>
                <span class="button-increase">&nbsp;+&nbsp;</span>
            </label>
            <label class="progress3">
                <span>&nbsp;&nbsp;存储空间0.0/100.0MB&nbsp;</span>
                <progress value="36" max="100" ></progress>
                <span class="button-increase">&nbsp;+&nbsp;</span>
            </label>
            <label class="progress4">
                <span>&nbsp;&nbsp;消耗流量0.0/1.0GB&nbsp;</span>
                <progress value="22" max="100" ></progress>
                <span class="button-increase">&nbsp;+&nbsp;</span>
            </label>

        </div>
        <div class="content-content2">
            <div class="content-test content-content-content1">
                <img src="pic/logo1.png">
                <div class="content-test-div1">创建考试</div>
                <div class="content-test-div2">可选择创建新试卷，或从题库试卷库选择一张试卷考试</div>
            </div>
            <div class="content-test content-content-content2">
                <img src="pic/logo4.png" class="content-test-img">
                <div class="content-test-div1">添加试题</div>
                <div class="content-test-div2">手动录入或批量录入试题，完善您的试题库</div>
            </div>
            <div class="content-test content-content-content3">
                <img src="pic/logo2.png" class="content-test-img">
                <div class="content-test-div1">添加人员</div>
                <div class="content-test-div2">填写账号信息及人员信息，添加人员至相关部门</div>
            </div>
            <div class="content-test content-content-content4">
                <img src="pic/logo3.png" class="content-test-img">
                <div class="content-test-div1">创建课程</div>
                <div class="content-test-div2">填写课程相关信息，并设置关联课件及可学人员</div>
            </div>
        </div>
        <div class="content-content3">
            <div class="content-content3-title">
            <div class="content-content3-title1">
                正在进行的考试
            </div>
            <div class="content-content3-title2">
                展开&or;
            </div>
            </div>
        </div>
        <hr/>
        <div class="content-content4">
            <div class="content-content4-mainDiv">
                <div class="content-content4-mainDiv-title">
                    <div class="content-content4-mainDiv-word">
                        考试示例
                    </div>
                    <div class="content-content4-mainDiv-word2">
                        操作&or;
                    </div>
                </div>
                <div class="content-content4-mainDiv-content">
                    <div class="content-content4-mainDiv-content1">
                        2019.07-31 16.33至2019.08.03 16.33
                    </div>
                    <ul>
                        <li>分数:1000</li>
                        <li>方式:登录考试</li>
                        <li>类型:选题考试</li>
                        <li>时长:60分钟</li>
                    </ul>
                    <p><span style="color: lightskyblue">0人</span><span style="font-family: 宋体; font-size: 15px; color: darkgrey">正在考试</span></p>
                </div>
                <div>
                    <h3>正在进行的课程(0)</h3>
                </div>
            </div>
            <hr/>
            <div class="content-content4-end">
                还没有正在进行的课程，快去创建一堂课程吧～
            </div>
        </div>

        <div>

        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="script.js">
</script>
</html>

css的

/*顶层栏目*/
.top-content {
    /*border-top: 1px solid black;*/
    /*border-bottom: 1px solid black;*/
    box-shadow: 3px 3px 2px lavender;
    width: auto;
    height: 100px;
}
.top-img1 {
    /*border: 3px solid lawngreen;*/
    width: 250px;
    height: 70px;
    margin: 10px;
    float: left;
}
.top-img2 {
    /*border: 3px solid lawngreen;*/
    width: 250px;
    height: 50px;
    margin: 20px;
    float: left;
}
.top-img3 {
    /*border: 3px solid lawngreen;*/
    width: 50px;
    height: 50px;
    margin: 20px 20px;
    float: right;
}
.top-button {
    border: 1px solid lightskyblue;
    color: lightskyblue;
    float: right;
    margin: 30px 0px;
    background: white;
    height: 30px;
    text-align: center;
    cursor: pointer;
}
/**/
/*主盒子包括左边栏目和中间主要内容*/
.main-div {
    /*border: 3px solid lightskyblue;*/
    width: auto;
    height: 800px;
    margin: 5px;
}
/**/
/*左边栏目*/
.left-list {
    /*border: 3px solid lavenderblush;*/
    width: 200px;
    height: 800px;
    float: left;
    /*margin-top: 10px;*/
    margin-left: 10px;
}
.left-list div {
    font-family: 宋体;
    background-color: lightgray;
    color: darkgrey;
    /*border: 2px solid black;*/
    margin: 1px 1px;
    width: auto;
    height: 50px;
    border-radius: 5px;
    box-shadow: 5px 3px 3px lightcyan;
}
.left-list .left-list-end3 {/*站空位的盒子*/
    /*border: 2px solid black;*/
    margin: 1px 1px;
    width: auto;
    height: 100px;
    cursor: default;
}
.left-list img {
    float: left;
    width: 40px;
    height: 40px;
    margin: 5px 0px;
    background-color: lavender;
}
.left-list span {
    border: 0px solid lightskyblue;
    color: white;
    float: left;
    /*background: white;*/
    height: 30px;
    margin: 9px 0px;
    text-align: center;
    cursor: pointer;
}
/**/
/*中间内容*/
.content {
    /*border: 1px solid black;*/
    width: 1500px;
    height: 720px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    background-color: whitesmoke;
    border-radius: 50px;
}
/*上面进度条*/
.content .content-top1 {
    margin: 10px 0px;
}
.content .content-top1 progress {
    width: 120px;
    height: 10px;
    margin: 3px;
}
.content .content-top1 .button-increase {
    border: 1px solid red;
    color: red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.content .content-top1 span {
    font-size: 10px;
}
.content .content-top1 span span {
    font-size: 10px;
    color: red;
}
.content .content-top1 .progress1 {
    margin-left: 150px;
}
/*中间内容的中间的考试操作*/
.content .content-test {
    border: 1px solid lightskyblue;
    background-color: white;
    height: 120px;
    width: 250px;
    float: left;
    margin: 20px;
    border-radius: 20px;
    font-family: 宋体;
    cursor: pointer;
}
.content .content-test img {
    width: 80px;
    height: 80px;
    margin: 20px 20px;
    float: left;
}
.content .content-test-div1 {
    float: left;
    font-size: 25px;
    margin: 10px 10px;
}
.content .content-test-div2 {
    font-size: 15px;
}
.content-content2 {
    width: auto;
    height: 200px;
    /*border: 3px solid black;*/
}
/*中间的东西*/
.content .content-content3 .content-content3-title1 {
    font-size: 20px;
    float: left;
}
.content .content-content3 .content-content3-title2 {
    float: right;
    cursor: pointer;
}
.content .content-content3 .content-content3-title {
    width:auto;
    height: 25px;
}
/*考试示例*/
.content .content-content4 {

}
.content .content-content4-mainDiv {
    background-color: white;
    /*border: 3px solid lightcyan;*/
    width: 400px;
    height: 200px;
    margin-left: 20px;
    border-radius: 20px;
}
.content .content-content4-mainDiv .content-content4-mainDiv-title {
    /*border: 2px solid lightpink;*/
    width: auto;
    height: 65px;
}
.content .content-content4-mainDiv .content-content4-mainDiv-word {
    /*border: 2px solid lightcoral;*/
    width: 100px;
    height: 40px;
    margin: 10px;
    font-size: 25px;
    float: left;
}
.content .content-content4-mainDiv .content-content4-mainDiv-word2 {
    /*border: 2px solid lightcoral;*/
    margin-top: 10px;
    margin-left: 300px;
    width: 50px;
    padding: 20px;
    cursor: pointer;
    /*为什么不加padding不行*/
    /*float: right;*/
}
.content .content-content4-mainDiv .content-content4-mainDiv-content {
    /*border: 2px solid lawngreen;*/
    height: 125px;
    width: auto;
}
.content .content-content4-mainDiv .content-content4-mainDiv-content1 {
    /*border: 2px solid lavender;*/
    margin-left: 30px;
    color: darkgrey;
    font-size: 15px;
    font-family: 宋体;
}
.content .content-content4-mainDiv .content-content4-mainDiv-content li {
    float: left;
    width: 100px;
    height: 30px;
    margin-left: 30px;
    color: darkgrey;
    font-size: 15px;
    font-family: 宋体;
}
.content .content-content4-mainDiv .content-content4-mainDiv-content p {
    margin-top: 70px;
    font-size: 15px;
}
.content .content-content4 .content-content4-end {
    /*border: 2px solid black;*/
    margin: 50px 400px;
    color: darkgrey;
    font-size: 15px;
    font-family: 宋体;
}

js的，这里js写的比较简单，就是没有什么效果

var leftlist = window.document.getElementsByClassName('left-list')[0];
console.log(leftlist);
var leftListDiv = leftlist.getElementsByTagName('div');
console.log(leftListDiv);
for(let i = 0;i < leftListDiv.length; i += 1) {
    if(i != 10) {
        leftListDiv[i].onmouseover = function () {
            leftListDiv[i].style.backgroundColor = 'darkgrey';
        };
        leftListDiv[i].onmouseout = function () {
            leftListDiv[i].style.backgroundColor = 'lightgray';
        };
    }
}

以后有机会要继续美化一下界面

posted @ 2019-07-31 17:00 浅隐阅读(222) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

WildSky

第一个静态页面

公告