软件工程项目四则运算表达式生成----4

最新推荐文章于 2021-02-27 05:03:49 发布

ohohohowww

最新推荐文章于 2021-02-27 05:03:49 发布

阅读量299

点赞数

分类专栏：软件工程

本文链接：https://blog.csdn.net/ohohohowww/article/details/104011843

版权

这是一个关于软件工程项目的四则运算题目生成器的前端介绍。项目使用Bootstrap和JQuery，包含base.html作为基页面，以及login、register、主界面、搜题和出题等模板。用户可以进行登录注册，选择题目参数，答题并查看分数和用时。页面设计注重用户体验，提供了登录后的主界面、搜题和出题等功能。

摘要由CSDN通过智能技术生成

四则运算题目生成器

软件工程大作业的结对项目–四则运算题目生成器

这是第三阶段的网页部分（前端）的原理和功能

需求分析部分链接如下
软件工程项目四则运算表达式生成----3

后端的编写过程如下，贴上队友的链接
软件工程–四则运算表达式(4)

使用了bootstrap，版本是3.37，也使用了JQuery3.31的库，提升网页美观程度

base.html

前端有base基页面，提供通用的模板，还有每一个app里面自带的页面，用 block拓展base.html来动态渲染

{
   % load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>{
   % block title %}{
   % endblock %}</title>
    <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    {
   % block css %}{
   % endblock %}
<body>
{
   % block navbar %}{
   % endblock %}
<div id="wrapper">
    <div class="content-body">
                    {
   % block content %}
                    {
   % endblock content %}
                {
   % block sidemenu %}
                {
   % endblock %}
            </div>
    <div id="push"></div>
</div>
{
   % include 'footer.html' %}
<script src="{% static 'js/jquery-3.3.1.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'layer/layer.js' %}"></script>
{
   % block script %}{
   % endblock script %}
{
   % include 'top.html' %}
<style>
    html, body {
   
        height: 100%;
        margin: 0;
    }

    #wrapper {
   
        min-height: 100%;
        margin-bottom: -60px;
    }

    #push {
   
        height: 60px;
    }
</style>
</body>
</html>

引入了navbar，content和sidebar的块，style是设置页脚的样式。

模板部分

设置按钮的样式，鼠标放上和点击前后的变化

<style>
    /* 按钮边框的大小、位置、样式 */
    .toTop-arrow {
   
        width: 3.5rem;
        height: 3.5rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 33%;
        opacity: 0.7;
        background: aliceblue;
        cursor: pointer;
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        display: none;
    }
    .toTop-arrow::before, .toTop-arrow::after {
   
        width: 31px;
        height: 7px;
        border-radius: 3px;
        background: orange;
        position: absolute;
        content: "";
    }
    .toTop-arrow::before {
   
        -webkit-transform: rotate(-50deg) translate(0, -50%);
        left: 0.4rem;
    }
    .toTop-arrow::after {
   
        -webkit-transform: rotate(50deg) translate(0, -50%);
        right: 0.4rem;
    }
    /* 取消点击按钮时的聚焦 */
    .toTop-arrow:focus {
   
        outline: none;
    }
</style>

login的模板

{
   % extends 'base.html' %}
{
   % load staticfiles %}
{
   % block title %}登录{
   % endblock %}
{
   % block navbar %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav"
                        aria-expanded="false">
                    <span class="sr-only">切换导航条</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'SouSouSou:main' %}">猿题库</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="my-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="{% url 'SouSouSou:main' %}">主页</a></li>
                    <li class="align-baseline"><a href="{% url 'SouSouSou:main' %}">小猿搜题</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search"<

最低0.47元/天解锁文章

ohohohowww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
软件工程项目四则运算表达式生成----4

四则运算题目生成器这篇文章写的是第三阶段的网页部分（前端）的实现原理和功能软件需求，PSP表格和网站的模型部分软件工程项目四则运算表达式生成(python实现)部分app的后端软件工程项目四则运算表达式生成----3模板部分设置按钮的样式，鼠标放上和点击前后的变化<style> /* 按钮边框的大小、位置、样式 */ .toTop-arrow { ...
复制链接

扫一扫