学生成绩管理系统---添加删除页面的修改(HTML,CSS,JavaScript---对行和单行的列都可以进行修改)

文章目录

  • 初始页面设计
  • 修改后的页面

初始页面设计

点击跳转


07-数据添加界面.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-数据添加界面title>
    <style>
        * {margin: 0;padding:0;}

        .bg {
            width: 900px;
            height: 550px;
            background-image: url(image/bg.png);
            /* 背景不平铺 */
            background-repeat: no-repeat;
            margin: 100px auto;
            /* 文本居中 对父级元素设置即可 */
            text-align: center; 
        }

        .fangkuang {
             
            position: absolute;
            left: 425px;
            top: 210px;
            width: 650px;
            height: 360px;
            background-color: rgba(255,255,255,0.5);
            border-width: 1px;
            border-style: solid;
            border-color: rgba(255,255,255,0.5);
            border-radius: 10%;


        }


        .biaoti {
            font: italic 700 40px '微软雅黑';
            color: #339900;
            padding-top: 50px;
            padding-bottom: 50px;
        }


        .fanhui {
            width: 70px;
            height: 20px;
            font-size: 16px;
            color: aliceblue;
            background-color: #169BD5;
            /* 转换成行内块元素,可设置高度宽度 */
            display:inline-block;
            margin-left: 12px;
            margin-top: 14px;
            text-indent: 1em;
            border-radius: 15%;
            
        }


        .student {
            color: #333333;
            width: 120px;
            height: 20px;
            
            border-color: gray;
            
            border-radius: 15%;
            margin-left: 60px;
            margin-bottom: 20px;
        }



        .zhanbione {
            color: #333333;
            width: 80px;
            height: 20px;
            
            border-color: gray;
            
            border-radius: 15%;
            line-height: 20px;
            text-indent: 1.3em;
            margin-left: 185px;
            margin-bottom: 10px;
        }


        .zhanbitwo {
            color: #333333;
            width: 80px;
            height: 20px;
            
            border-color: gray;
            border-radius: 15%;
            text-indent: 1.3em;

            margin-left: 60px;
        }


        .mubiaoone {
            color: #333333;
            width: 100px;
            height: 20px;
            
            border-color: gray;
            border-radius: 15%;
            

            margin-left: 15px;
        }

        .mubiaotwo {
            color: #333333;
            width: 100px;
            height: 20px;
            
            border-color: gray;
            border-radius: 15%;
            
            margin-top: 20px;
            margin-left: 16px;
            margin-bottom: 30px;
        }

        .fenshu {
            color: #333333;
            width: 80px;
            height: 20px;
            
            border-color: gray;
            
            border-radius: 15%;
            line-height: 20px;
            text-indent: 1.3em;
            margin-left: 60px;
        }

        .tianjia {
            color: #333333;
            font-size: 14px;
            background-color: #fff;
            width: 80px;
            height: 25px;
            margin-left: 270px;
            margin-top: 30px;
            border-radius: 15%;

        }

        .zongfen {
            
            font-size: 16px;
            margin-left: 100px;
            
        }

        .zongfennum {
            color: #333333;
            width: 80px;
            height: 20px;
            
            border-color: gray;
            
            border-radius: 15%;
            line-height: 20px;
            text-indent: 1.3em;
            margin-left: 30px;
        }

        .excel {
            font: normal 700 20px '微软雅黑';
            color: #339900;
            margin-left: 400px;
            margin-top: 20px;
            display: inline-block;
        
        }

        .next {
            width: 70px;
            height: 20px;
            color: honeydew;
            text-align: center;
            font-size: 16px;
            background-color: #50B354;
            border-radius: 15%;
            margin-top: 30px;
            margin-left: 280px;
        }
       
    
        a {
            text-decoration: none;
            color: honeydew;
        }



    style>
head>
<body>
    <div>
        <div class="bg"><p class="biaoti">添加学生信息p>div>
        
        <div class="fangkuang">
            <span class="fanhui"><a href="06-课程信息向导.html">返回a>span><br>
            

            <input type="text" name="username" value="张三" class="student">
            <input type="text" name="xuehao" value="2004240101" class="student">
            <input type="text" name="nianji" value="软件12004班" class="student"> <br>




            <input type="text" name="lunwen" value="论文" class="zhanbione">
            <input type="text" name="zuoye" value="作业" class="zhanbitwo">  <br>
           


            
            <input type="text" name="kechengone" value="课程目标一" class="mubiaoone">
            <input type="text" name="lunwen" value="98" class="fenshu">
            <input type="text" name="lunwen" value="78" class="fenshu"> <br>


            <input type="text" name="kechengtwo" value="课程目标二" class="mubiaotwo">
            <input type="text" name="lunwen" value="90" class="fenshu">
            <input type="text" name="lunwen" value="" class="fenshu">  <br>


            
            <strong class="zongfen">总分(自动计算):strong> <input type="text" name="zongfen" value="" class="zongfennum"> <br>

             
             <input type="button" value="添加下一个" class="tianjia"><br/>






            <span><a href="#">
                <p class="excel">点击此处导入excel文件p>
            a>span><br>

            <div class="next"><a href="08-班级整体情况.html">完成a>div>


        div>
        
    div>
body>
html>

修改后的页面

添加行列页面

你可能感兴趣的:(JavaScript,学生成绩管理系统,javascript,前端)