本文回顾了创想秀比赛中网站搭建的过程，包括团队协作、网页设计与功能实现的挑战，以及从实践中学习到的技能，如网页元素检查、源代码阅读等。
距离创想秀结束也已经过去了几周时间了，下面是我对于本次比赛的一些总结和收获。
在准备文档的那段时间，基本都是我们队长在负责写整个文档内容，我们只是为他提供一些信息，而我只为文档提供了一些网页截图和一些功能实现的流程图，对此我感到十分抱歉。那个时候我对整个网站的搭建以及具体要做哪些网页还没不清楚，所以对于文档的编写我根本无从下手，只是边做边看，当时没有先做好一个整体的规划，去列出要实现的功能以及去学习实现功能的方法。还记得当时我和另一个队友坐在我的电脑跟前敲代码截图一直到当天24点的前几分钟，当第二天终于到来的时候，我们如释重负，创想秀的第一阶段也算结束了。在等待结果的那段时间里，我们又忐忑又带点期待，还带着点"丧"，但是总算过了第一个坎。
在为答辩准备的那段时间里，真的是各种心力交瘁，每天都在一点点地赶进度，由于之前没有整体的设计，就一边做一边看是否合适，光是设计这个网页就花了不少时间，更别谈去实现各种功能。很多东西都是第一次接触，然后就会去查各种资料，学习很多别人的方法，再从中找到最合适的，不断地探索，不断地进步。这是个很难也很缓慢的过程，却也是个必不可少的过程。
在那段时间里，我第一次懂了怎么查看网页源代码，怎么去检查网页元素，这些内容在我们后来的一节Python课上也有讲，真是巧得很，当时听课的时候还想着老师怎么没有早点讲，嘿嘿。
下面正式进入贴代码环节（有不少代码都是从别的博客当中学习的，这部分代码我会注明，不过链接是找不到了，如果原作者看到，可与我联系，谢谢您的理解！）
-
网站首页
设计一个网页，首先从页眉开始。左侧我设计了我们网站的口号“把握真实，传递热点”，同时我将它设置为返回新闻主页的一个链接，点击即可返回，不用设置一个醒目的按钮或者插入一个图片链接。
<div class="heads">
<div class="container">
<div class="heads_left col-xs-4 col-md-4">
<p class="pull-left">
<span class='glyphicon glyphicon-equalizer'></span>
<img src="Bootstrap/pic/write2.png" width="15px">
<span class="slogan"><a href="HomePage.html" style="text-decoration: none;">把握真实，传递热点</a></span>
</p>
</div>
<div class="link">
<ul>
<li><div id="login">
<a href="NewsLogin.html">登录</a>
</div></li>
<li><div id="register">
<a href="NewsRegister.html">注册</a>
</div></li>
<li><div id="person">
<a href="Person.html">个人中心</a></div></li>
</ul>
</div>
</div>
</div>
关于搜索框，我目前也只实现了把它跳转到百度页面，还有一个问题就是我不能把它搜索的图标显示出来，这很令我费解。以下是代码：
<div class="search bar">
<form action="http://www.baidu.com/baidu" target="_blank">
<input type="text" placeholder="请输入关键字">
<button type="submit"></button>
</form>
</div>
关于轮播图，这里我直接用的Bootstrap框架，就不贴代码了。
关于网页新闻的主体部分，由于使用栅格就会造成内容混乱，所以我手动把页面分成左中右三部分，每个部分又设置了大小标题，再插入几个图片新闻，这样页面就会显得丰富一点。下面以时政新闻为例：
<div class="container" id="politics">
<div class="itit" style="margin-bottom:15px">
<div class="itit-im"></div>
<p class="tit-font">
<span>时政</span>
<span class='text-warning'>
<small>关注时政!</small>
</span>
</p>
</div>
<div class="left">
<div class="above">
<a href="图片新闻.html">
<div id="img"><img src="Bootstrap/pic/pic1.jpg" style="width:330px; height:210px;" ></div>
<div id="words" style="color:white;">对同志先进事迹作出重要指示</div>
</a>
</div>
</div>
<div class="center" style="margin-left:380px;">
<div class="big">
<h6><a href="http://www.chinanews.com/gn/2019/05-24/8845701.shtml">“俯瞰”生命进程 中国科学家将主导基因组标签计划</a></h6>
</div>
<div class="small">
<a href="http://www.sohu.com/a/316223385_161795">惠州市卫生健康局有了新党委书记</a>
</div>
<div class="big">
<h6><a href="http://www.sohu.com/a/316217865_267106">中国无人驾驶汽车正“驶入”发展快车道</a></h6>
</div>
<div class="small">
<a href="http://www.chinanews.com/gn/2019/05-24/8845697.shtml">想生不敢生 二孩生育的理想与现实存在巨大鸿沟</a>
</div>
<div class="big">
<h6><a href="http://www.chinanews.com/gn/2019/05-24/8845695.shtml">国产北斗芯片已实现规模化应用 累计销量突破8000万片</a></h6>
</div>
<div class="small">
<a href="http://www.chinanews.com/gn/2019/05-24/8845680.shtml">有乡镇干部手机安装11个政务APP：我不累手机都累了</a>
</div>
</div>
<div class="right">
<div class="big">
<h6><a href="http://www.sohu.com/a/316217865_267106">中国无人驾驶汽车正“驶入”发展快车道</a></h6>
</div>
<div class="small">
<a href="http://www.chinanews.com/gn/2019/05-24/8845703.shtml">时速600公里 国产高速磁浮列车即将“起飞”</a>
</div>
<div class="big">
<h6><a href="http://www.chinanews.com/gn/2019/05-24/8846104.shtml">山东省政协原常委魏绍水受贿675万 一审获刑11年</a></h6>
</div>
<div class="small">
<a href="http://www.chinanews.com/gn/2019/05-24/8845691.shtml">“甩锅”“迁怒”治不好“美国病”(望海楼)</a>
</div>
<div class="big">
<h6><a href="http://www.chinanews.com/gn/2019/05-24/8846053.shtml">中央扫黑除恶督导组：深挖彻查孙小果案 要办成铁案</a></h6>
</div>
<div class="small">
<a href="http://www.chinanews.com/gn/2019/05-24/8845820.shtml">2019年国家统一法律职业资格考试将于6月5日起报名</a>
</div>
</div>
</div>
然后是接近页尾的一些友情链接，以便于用户获取其他新闻网站的新闻信息。
最后是页尾，我设计了关于我们、留言反馈、联系我们、供稿服务四个链接，这四个网页说实话还有待改进，因为我只是简单做了个样子，不过我不知道该填充些什么内容了。
另外，还有一个一键返回顶部的按钮，下面是js代码（这部分是根据原博主的代码进行了修改，应为转载）
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
//获取当前毫秒数
var startTime = +new Date();
//获取当前页面的滚动高度
var b = document.body.scrollTop || document.documentElement.scrollTop;
var d = 500;
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
}
以上就是网站首页的设置。
-
管理员页面
这个页面的特点就是左侧菜单右侧显示具体内容，而且在点击其中一个主菜单的时候，其他的菜单会自动收缩。
<!--菜单-->
<div class="main_left" style="height:100%">
<div id="firstpaneDiv" class="menu_list">
<h3 class="menu_head current">账户管理</h3>
<div style="display:block" class="menu_nva">
<a href="NewsLogin.html" target="test">用户搜索</a>
<a href="PwdEdit.html" target="test">修改密码</a>
</div>
<h3 class="menu_head">新闻管理</h3>
<div style="display:none" class="menu_nva">
<a href="HomePage.html" target="test">查看新闻</a>
<a href="NewsDel.html" target="test">删除新闻</a>
</div>
<h3 class="menu_head">评论管理</h3>
<div style="display:none" class="menu_nva">
<a href="RemarkView.html" target="test">查看评论</a>
<a href="RemarkFilter.html" target="test">过滤评论</a>
<a href="RemarkDel.html" target="test">删除评论</a>
</div>
</div>
</div>
<div class="main_right">
<iframe frameborder="0" scrolling="auto" style="width:80%;height:500px" src="" id="aa" name="test"></iframe>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--左右建立联系-->
<script>
$(function(){
$(".main_left li").on("click",function(){
var address =$(this).attr("data-src");
$("iframe").attr("src",address);
});
});
</script>
-
个人主页
为了和管理员页面有所区分，我选择把菜单栏显示在上方，由于页面实在太空了，我就加了一个可以选择字体颜色的鸡肋功能，实在是太鸡肋了······写几个简单的css文件就行了，这个就没有贴代码的必要了。
以上就是几个主要页面的总结，还有一些子页面的代码就不一一贴出来了。
没有实现连接真的是一件超级令人难过的事情。
扫一扫
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
