今日工作
昨天的登录和注册没有截到这个登录框的图，今天补上：
今天主要设计了主界面，考虑到页面布局现实完全的问题，就是之前设计的框架在页面全部显示会有些拥挤，所以现在的想法是将语法手册放在主界面的最顶端的轮播图里，这样可以增加美观度，也更方便查看，较为清楚，然后输入修改框放在页面的下部，通过页面的导航框点击就可以跳转到下面，较为方便美观。历史记录查询想要新建一个页面。主界面部分如下：
具体主题背景、颜色等还在调整，并非是最终界面效果:)，之后的提交修改部分如下图：
部分代码如下（因为使用到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>
下一步展望
明天工作计划是与后端同学一起完成历史记录查询功能，显示最近的历史记录并显示详细内容，尽量实现前端邮箱验证功能。
扫一扫
760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
