web上传文件以及提交密码的简单设计界面)
web上传文件以及提交密码的简单设计界面
注：本文仅包含前端设计的一些过程，博主是小白，文中有不对的地方请见谅。
设计目标
构建一个简单的文件上传页面。能够实现添加文件、添加加密密码的功能就行。
需要元素
- 文件上传按钮
- 密码提示标签
- 输入框
- 上传按钮
- 显示文件区域
- 背景图 <div style="background-image:url(“图片地址”)>
- 区域分块
- 提交表单
设计界面展示
手机端界面展示
上传前： 上传后：
电脑端界面展示
上传前：
上传后：
针对电脑以及手机界面设计了不同的布局方法。
后端代码等几天再发，里面有些功能还没补全。
上面展示的二维码不用扫哈，里面地址我用的局域网，扫也扫不出来。
设计过程
首先，我是把网页分块了，一部分用于添加基本元素（div1）
一部分用于显示网页返回的结果（div2）
添加基本元素
div1 设计
div1 里面包含了div3，上传需要的元素都在里面。
我们来看下div3 包含的东西。
div3里面添加表单，用于提交
action 后面链接的是我Python后端界面的地址。可以先不管。
表单里面添加文件上传按钮
换行
表单里面添加密码提示标签
添加输入框，配置密码格式
换行
添加上传按钮
<body>
<div class="div1">
<div class=div3>
<form action="/file" method="post" enctype="multipart/form-data">
<input type="file" name="photo" class="upload_file">
<br/><br/>
<label class="label1">设置六位验证密码(数字、字母）：</label>
<label>
<input type="text" name="verify_pwd" pattern="[0-9a-zA-Z]{6}">
</label>
<br/><br/>
<input type="submit" value="上传" class="button_upload">
</form>
</div>
</div>
</body>
div2 设计
div2 跟div1 同级。
里面内容是用Python的前端代码jinjia2模板写成的，作用是返回一个图片。
<div class="div2">
{% block content %}
{% if img_url %}
<img src="{{ qr_img_url }}" class="img1" alt="加密二维码">
{% endif %}
{% endblock %}
</div>
过程展示1
添加背景图片
图片我用的是本地的
<div>
<!--背景图片-->
<div id="back-pic" style="background-image: url('../static/03.jpg')"></div>
</div>
添加图片后还需要设计下图片的css样式，使得我们改变窗口大小时图片可以保持不变。
#back-pic{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
CSS实现网页背景图片自适应全屏
详细介绍可以看下这个：
需要注意的是，不要在head里面直接添加背景图片。一定要做body里面添加。刚开始我就是在这卡主了，因为是head里面给body设计背景图片，css样式出来的结果跟预想的不一致。一直改，后来才发现是位置选错了。
以下是错误的示范：
body{
background-image: url('../static/03.jpg')
position:fixed;
top: 0;
left: 0;
width:100%;
.......
}
设计元素xss样式
网页基本元素添加好之后，发现网页元素太小了，在手机上显示不清楚。
这里给它添加下样式，变大变好看一些。我用的id选择器去设计样式。
.div1{
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
}
.div2{
position: absolute;
top:0;
left: 50%;
right: 0;
bottom: 0;
}
.div3 {
padding-left: 10px;
padding-right: 10px;
margin-top: 50px;
margin-left: 100px;
margin-right: 100px;
width: 60%;
height: 30%;
}
.upload_file{
padding-top:0;
padding-bottom: 0;
padding-left: 0;
font-size:30px;
border:10px;
}
.label1{
font-family: "黑体", system-ui;
font-size:30px;
width: 400px;
}
input{
font-size: 30px;
font-family: 楷体, system-ui;
width: 400px;
}
.button_upload{
cursor: pointer;
border-radius: 10px;
width: 230px;
background-color: #7ac6ff;
margin-left: 80px;
}
.img1{
width: 400px;
height: 400px;
margin: 100px 100px;
}
过程展示2
以上写好后页面就成了这样。
匹配电脑以及手机设计不同样式
后来发现上面写好之后在手机端展示，css样式出现了错误，元素折叠到了一块。
我是这样解决的，用@media 去检测下页面宽度，小于400px便把样式重置下。
基本例子如下：
@media (max-width: 400px) {
.div1{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 40%;
width: 100%;
height: 60%;
}
嗯，我把所有的样式都给重写了一遍，不得不感慨这种方法做起来实在是太笨了。后来发现了一种响应式布局的方法，可是自己太菜了，实在是不会这个。没办法，最后一点点用重写敲了出来。这时候就感慨自己网页元素少了，要是大的话，岂不累死。
下面这个是菜鸟教程响应式布局的例子之一：
我用里面的方法试了一下，发现真的可以！
刚开始我没学会这玩意咋用，后来才知道这玩意是真的好使！
代码我粘贴出来，可以试一下。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一个 Bootstrap 页面</h1>
<p>重置窗口大小，查看响应式效果！</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>第一列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-4">
<h3>第二列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
<div class="col-sm-4">
<h3>第三列</h3>
<p>学的不仅是技术，更是梦想！</p>
<p>再牛逼的梦想,也抵不住你傻逼似的坚持！</p>
</div>
</div>
</div>
</body>
</html>
完整代码
这次设计是flask加前端设计的。后端代码还没写完，这里就先展示下前端的。
由于我是pycharm里面直接运行整个项目，浏览器界面和只写了前端的代码生成的界面不一样，请谅解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>加密收款码生成</title>
<style>
#back-pic{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
.div1{
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
}
.div2{
position: absolute;
top:0;
left: 50%;
right: 0;
bottom: 0;
}
.div3 {
padding-left: 10px;
padding-right: 10px;
margin-top: 50px;
margin-left: 100px;
margin-right: 100px;
width: 60%;
height: 30%;
}
.upload_file{
padding-top:0;
padding-bottom: 0;
padding-left: 0;
font-size:30px;
border:10px;
}
.label1{
font-family: "黑体", system-ui;
font-size:30px;
width: 400px;
}
input{
font-size: 30px;
font-family: 楷体, system-ui;
width: 400px;
}
.button_upload{
cursor: pointer;
border-radius: 10px;
width: 230px;
background-color: #7ac6ff;
margin-left: 80px;
}
.img1{
width: 400px;
height: 400px;
margin: 100px 100px;
}
/*手机页面重新设计*/
@media (max-width: 400px) {
.div1{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 40%;
width: 100%;
height: 60%;
}
.div2{
position: absolute;
top:60%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 40%;
}
.div3 {
padding:0;
margin-top: 50px;
margin-left: 30px;
margin-right: 30px;
width: 80%;
height: 40%;
}
.upload_file{
padding-top:0;
padding-bottom: 0;
padding-left: 0;
font-size:20px;
border:4px;
width: 300px;
}
.label1{
font-family: "黑体", system-ui;
font-size:25px;
}
.label2{
font-family: "黑体", system-ui;
font-size: 15px;
}
input{
font-size: 25px;
font-family: 楷体, system-ui;
width: 250px;
}
.button_upload{
cursor: pointer;
border-radius: 10px;
width: 150px;
background-color: #7ac6ff;
margin-left: 50px;
}
.img1{
width: 250px;
height: 250px;
margin: 5px 50px;
}
}
</style>
</head>
<body>
<div>
<!--背景图片-->
<div id="back-pic" style="background-image: url('../static/03.jpg')"></div>
</div>
<!--
<p style="margin-left:200px ">11</p>
-->
<div class="div1">
<div class="div3">
<form action="/file" method="post" enctype="multipart/form-data">
<input type="file" name="photo" class="upload_file">
<!--<input type="text" value="{{ img_url }}"> --><br/>
<br/><br/>
<label class="label1">设置六位验证密码(数字、字母）：</label>
<label>
<input type="text" name="verify_pwd" pattern="[0-9a-zA-Z]{6}">
</label>
<br><br>
<input type="submit" value="上传" class="button_upload">
<br/><br/><br/>
<!-- flask框架渲染 输出后端flash语句-->
{% for message in get_flashed_messages() %}
<div class=flash>{{ message }}</div>
{% endfor %}
</form>
</div>
</div>
<div class="div2">
{% block content %}
{% if img_url %}
<img src="{{ qr_img_url }}" class="img1" alt="加密二维码">
{% endif %}
{% endblock %}
</div>
</body>
</html>