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

香甜的甲基橙

已于 2022-04-30 15:35:40 修改

阅读量2.2k

点赞数

分类专栏： JavaScript 学生成绩管理系统文章标签： javascript 前端

于 2022-04-24 10:50:58 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124377431

版权

JavaScript 同时被 2 个专栏收录

41 篇文章 3 订阅

订阅专栏

学生成绩管理系统

6 篇文章 1 订阅

订阅专栏

文章目录

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

初始页面设计

点击跳转

在这里插入图片描述
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>

修改后的页面

添加行列页面

香甜的甲基橙

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
学生成绩管理系统---添加删除页面的修改（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
复制链接

扫一扫