今日工作
昨天的登录和注册没有截到这个登录框的图,今天补上:
今天主要设计了主界面,考虑到页面布局现实完全的问题,就是之前设计的框架在页面全部显示会有些拥挤,所以现在的想法是将语法手册放在主界面的最顶端的轮播图里,这样可以增加美观度,也更方便查看,较为清楚,然后输入修改框放在页面的下部,通过页面的导航框点击就可以跳转到下面,较为方便美观。历史记录查询想要新建一个页面。主界面部分如下:
具体主题背景、颜色等还在调整,并非是最终界面效果:),之后的提交修改部分如下图:
部分代码如下(因为使用到bootstrap的相关css文件,所以展示的是html部分的内容)
<body>
<!-- wrapper -->
<div class="wrapper" id="home">
<!-- header area -->
<header>
<!-- secondary menu -->
<nav class="secondary-menu" style="background-color: transparent">
<div class="container">
<div class="sm-right" style="color:black ">
<b>姓名:</b><b>张三</b><b>学号:</b><b>1223455</b></div>
<div class="clearfix"></div>
</div>
</nav>
<!-- primary menu -->
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<!-- 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="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- logo area -->
<a class="navbar-brand" href="#home">
<p style="font-size: 30px">标点啄木鸟</p>
<!-- logo image -->
<!--<img class="img-responsive" src="img/logo/logo.png" alt="" />-->
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!--<li><a href="#latestalbum">Latest Album</a></li>-->
<li><a href="#featuredalbum">开始纠正</a></li>
<!--<li><a href="#joinus">Join Us</a></li>-->
<!--<li><a href="#portfolio">Portfolio</a></li>-->
<li><a href={% url "artshow" 1%}>历史查询</a></li>
<li><a href="" data-toggle="modal" data-target="#modify">修改密码</a></li>
<!--<li><a href="#team">Team</a></li>-->
<!--<li><a href="#contact">Contact</a></li>-->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="banner">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner/b3.jpg" alt="...">
<div class="container">
<!-- banner caption -->
<div class="carousel-caption slide-one">
<!-- heading -->
<h2 class="animated fadeInLeftBig" style="color: #8a6d3b">句号——"。"</h2>
<!-- paragraph -->
<h3 class="animated fadeInRightBig" style="color: #985f0d">陈述句末尾的停顿<br>
语气舒缓的祈使句末尾<br>
用在直述式文意已完足的句子<br>
</h3>
<!-- button -->
</div>
</div>
</div>
<div class="item ">
<img src="img/banner/b4.jpg" alt="...">
<div class="container">
<!-- banner caption -->
<div class="carousel-caption slide-two" style="margin-top: -100px">
<!-- heading -->
<h2 class="animated fadeInLeftBig">逗号——","</h2>
<!-- paragraph -->
<h3 class="animated fadeInRightBig">句中的并列成分或并列分句之间
,介绍时间、地点、目的、条件的词、短语或句子之后, 动词与对象之间,
在带有关联词语的句子中的各个小句子之间,
被描述的对象与描述语之间,
用于突出、强调,像突出某种事物、某个人等。</h3>
<!-- button -->
</div>
</div>
</div>
<div class="item ">
<img src="img/banner/b6.jpg" alt="...">
<div class="container">
<!-- banner caption -->
<div class="carousel-caption slide-three" style="top: 200px;">
<!-- heading -->
<h2 class="animated fadeInLeftBig">问号——"?"</h2>
<!-- paragraph -->
<h3 class="animated fadeInRightBig" style="color: chocolate">
用于表疑问的句子<br>
用于反问句末尾<br>
语气缓和,可看作陈述句,末尾可用句号
</h3>
<!-- button -->
</div>
</div>
</div>
<div class="item ">
<img src="img/banner/b5.jpg" alt="...">
<div class="container">
<!-- banner caption -->
<div class="carousel-caption slide-four" style="top:120px">
<!-- heading -->
<h2 class="animated fadeInLeftBig" style="color: #2b669a">叹号——"!"</h2>
<!-- paragraph -->
<h3 class="animated fadeInRightBig" style="color: #3da1e3">
表示强烈感情<br>
表示命令<br>
表示感叹<br>
语气强烈的感叹<br>
表示惊讶
</h3>
<!-- button -->
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="fa fa-arrow-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="fa fa-arrow-right" aria-hidden="true"></span>
</a>
</div>
</div>
<!--/ banner end -->
<!-- block for animate navigation menu -->
<div class="nav-animate"></div>
<div class="featured pad" id="featuredalbum">
<div class="form-content ">
<!-- paragraph -->
<p>开始输入你的文本吧!</p>
<form role="form" id="contactForm" method="post">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group" style="margin-left: 30px">
<label for="message">你的原文:</label>
<textarea class="form-control" id="message1" name="message" rows="9" style="width: 450px" placeholder="Enter message"></textarea>
</div></div>
<!--</div>-->
<div class="col-md-6 col-sm-6">
<div class="form-group" style="margin-left: 30px">
<label for="message">纠正后:</label>
<textarea class="form-control" id="message" name="message" rows="9" style="width: 450px" placeholder="Enter message"></textarea>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-lg btn-theme">确认</button>
</div>
</form>
</div>
</div>
下一步展望
明天工作计划是与后端同学一起完成历史记录查询功能,显示最近的历史记录并显示详细内容,尽量实现前端邮箱验证功能。