鸟类识别前端ver2.0

1.已完成的工作

实现了界面的优化

添加了背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鸟类识别系统——14组</title>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/fileinput.css">
    <script src="../static/js/jquery-2.1.4.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script> 
    <script src="../static/js/fileinput.js"></script> 
    <script src="../static/js/locales/zh.js"></script>
    <style>
        li {
            list-style: none;
        }

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-image: url(../static/images/bgc.jpg);
            /* background-image: url(./static/img/1.jpg); */
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        #maxbox {
            margin: 0 auto;
            margin-top: 200px;
            padding: 20px, 50px;
            /*这里的90表示以不透明度90%显示*/
            background-color: #00000090;
            text-align: center;
            width: 600px;
            height: 400px;
            border-radius: 10px;
        }

        #maxbox h1 {
            padding: 0;
            padding-top: 60px;
            color: white;
            font-size: 30px;
            padding-bottom: 4px;
            border-bottom: solid 1px white;
        }

        #maxbox h2 {
            font-weight: 700;
        }

        #maxbox .inputbox {
            margin-top: 30px;

        }

        #maxbox .inputText {
            margin-top: 20px;

        }

        #maxbox .inputText span {
            color: white;
            font-size: 18px;


        }

        #maxbox .inputText input {
            border: 0;
            padding: 6px;
            border-bottom: 1px solid white;
            background-color: #FFFFFF00;
            color: white;
        }

        #maxbox .inputbox .inputButton {
            margin: 0;
            border: 0;
            margin-top: 20px;
            width: 145px;
            height: 25px;
            border-radius: 25px;
            color: white;
            background-color: #3498db;
        }

        #sign_up {
            margin-top: 50px;
            color: white;
            font-size: 17px;
        }

        #sign_up a {
            color: #3498db;
        }
    </style>
    <style type="text/css">
        .container{
            width:800px;
            height:400px;
            background:#DB7093;
        }
        .title{
            float:center;
        }
    </style>

</head>
<body>
    <h1  align="center">鸟类识别系统——14组</h1>
    <div align="center">
    <form action="" enctype='multipart/form-data' method='POST'>
        <input type="file" name="file" value="上传图片 "   data-show-preview="false" style="margin-top:20px;"/>
        <br>
        <input type="submit" value="开始识别" class="btn btn-primary button-new " style="margin-top:15px;"/>
        <input type="reset" name="" id="清除">
    </form>
    </div>
    <body background="image/2.jpg" style=" background-repeat:no-repeat ;
    background-size:100% 100%;background-attachment: fixed;">
</body>

</html>

2.接下来的工作

继续优化界面

包括显示用户上传图片，并识别截取部分的鸟类

posted @ 2021-12-18 20:05  006l006  阅读(65)  评论(0)    收藏  举报