“黑客马拉松”的版本间的差异
来自CloudWiki
（→开发题目） |
|||
| 第144行： | 第144行： | ||
</body> | </body> | ||
</html></nowiki> | </html></nowiki> | ||
| + | ===设计题目=== | ||
| + | *设计一个新闻网站的logo | ||
*<h2>黑客马拉松第5期 我的博客我最炫</h2> | *<h2>黑客马拉松第5期 我的博客我最炫</h2> | ||
2017年12月3日 (日) 07:20的版本
- “黑客马拉松”是云计算小组的每周一赛，
- 面向全体黑客征集下一周的比赛题目：
- 有兴趣的同学点击上方的‘编辑’，直接把题目写到下面即可：
- 异性交友
- 游戏之王
-
黑客马拉松第6期 我关心的才是头条
以下3个题目任选其中之一
运维题目
- 注册一个云主机，或在本地VM搭一个虚拟机
- 用WordPress或其他开源软件搭建一个新闻网站。
开发题目
- 请发挥想象力，建一个有料、有个性的新闻网站
- 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>我的头条</title> <style type="text/css"> *{letter-spacing:0.2em;margin:0;padding:0;} h2{text-align:center;} p{text-align:left;} h2{text-align:left;} a{text-decoration: none;} #layer1{width:100%; height:150px; text-align:center;} #layer1-1{height:100px;line-height:100px;color:black;} #layer1-2{width:100%; height:50px;color:black;text-align:center;background:#074C97;border:1px solid;} #layer1-2 ul { list-style-type: none; margin: 0; padding-left:8%; overflow: hidden; } #layer1-2 li { float: left; } #layer1-2 li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } #layer1-2 li a:hover { background-color: #FF0000 ; } #layer2{width:100%; height:auto;color:black;border:1px solid;} #layer2-1{ width:65%; height:auto; margin:0 ;padding:0;color:black;border:1px solid; text-align:center;float:left; } #layer2-1 h2{text-align:left;line-height:150%;padding-top:4%;} #layer2-1 ul{ margin-left:20px; list-style-position: outside; } #layer2-1 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%;} #source {text-align:right;padding-right:2%;} #layer2-2{ width:34%; height:auto; margin:0 auto; color:black;text-align:center; float:left; } #layer2-2 h3{text-align:center;line-height:200%;padding-top:10%;} #layer2-2 ol{ margin-left:40px; list-style-position: outside; } #layer2-2 li{padding-left:0;margin-left:20px;text-align:left;line-height:250%; font-size:90%;font-weight:bold; } #layer2-3{clear:both;} #layer3{ width:100%; height:80px; background:#074C97;color:white; text-align:center; } #layer3 p{ height:30px;line-height:30px; text-align:center; } </style> </head> <body> <div id="layer1"> <div id="layer1-1"><h1>我的头条</h1></div> <div id="layer1-2"> <ul> <li><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">体育</a></li> <li><a href="#">游戏</a></li> <li><a href="#">交友</a></li> </ul> </div> </div> <div id="layer2" > <div id="layer2-1" class="content"> <h2>我关心的才是头条</h2> <hr align="left" width="75%" /><br/> <ul> <li><a href="#">马广水书记参加山东省高职高专院校思想政治理论课建设联盟2017年年会并做报告</a></br> <img src="top.jpg" /></li> <li><a href="#">党委书记马广水出席全国优质高职建设交流研讨会并作典型报告</a></li> <li><a href="#">我校学生在第十五届山东省大学生软件设计大赛中再获佳绩</a></li> <li><a href="#">“果蔬生产信息精准追溯技术体系研究与应用”课题交流会议在我校召开</a></li> <li><a href="#">我校举行学习《习近平的七年知青岁月》主题征文活动</a></li> <li><a href="#">我校承办山东省职业技术教育学会职业院校创新创业教育论坛</a></li> <li><a href="#">学校举行“风雨兼程永向党 不忘初心励前行”红歌大赛</a></li> </ul> <br/> <p id="source"><i>来源：党群部</i></p> </div> <div id="layer2-2"> <h3>新闻排行</h3> <center><hr align="center" width="70%"/></center> <ol> <li><a href="#">电子信息学院开展“宣贯十九大精神 </a></li> <li><a href="#">食品药品学院开展集团客座教授讲座</a></li> <li><a href="#">电信学院组织开展消防安全系列主题活动</a></li> <li><a href="#">梅花桩武术协会举行20周年庆典活动</a></li> <li><a href="#">外交学院举行韩国留学生书法作品展</a></li> <li><a href="#">智能制造与服务学院举办汽车专家讲座</a></li> </ol> </div> <div id="layer2-3"></div> </div> <div id="layer3"><p>学校地址：济南市旅游路4516号 邮编：250103</p></div> </body> </html>设计题目
- 设计一个新闻网站的logo
黑客马拉松第5期 我的博客我最炫
以下3个题目任选其中之一
运维题目
- 注册一个云主机，或在本地VM搭一个虚拟机
- 用Linux技术部署一个WordPress博客平台
开发题目
- 请自创格式或采用文中格式建立自己的博客一个
- 源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{letter-spacing:0.2em;} h2{text-align:center;} p{text-align:left;} h3{text-align:center;} #layer1{width:100%; height:100px; background:#F75000;color:white;text-align:center;} #layer1 h1{height:100px;line-height:100px;} #layer2{width:100%; height:auto;margin:0px auto;color:black;} #layer2-1{ width:30%; height:auto; padding-top:2%;margin:0 auto; color:black;text-align:center;float:left; } #layer2-1 p{text-align:center;line-height:250%;} #layer2-2{ width:60%; height:auto; margin:0 auto;color:black; text-align:center;float:left; } .content p{text-indent:2em;line-height:150%;} .content_img {width:300px;float:left;padding:5px; margin:5px 15px 15px 0; } #source {text-align:right;} #layer2-3{clear:both;} #layer3{ width:100%; height:30px; background:#F75000;;color:white; text-align:center; } #layer3 p{ height:30px;line-height:30px; text-align:center; } </style> </head> <body> <div id="layer1"><h1>小张飞的博客</h1></div> <div id="layer2" > <div id="layer2-1"> <p><a href="">个人介绍</a></p> <p><a href="">家乡籍贯</a></p> <p><a href="">爱好特长</a></p> <p><a href="">兴趣收藏</a></p> <p><a href="">同城交友</a></p> </div> <div id="layer2-2" class="content"> <h3>学院简介</h3> <hr /> <img class="content_img" src="1.jpg"> <p>小时侯把English读为"应给利息"的同学当了行长；读为"阴沟里洗"的成了小菜贩子；读为"因果联系"的成了哲学家；读为"硬改历史"的成了政治家；读为"英国里去"的成了海外华侨；读为“应该你死”的成了野心家；而我不小心读成了"应该累 死" 结果成了普通教师.......（这是开博以前写的自我介绍）</p> <p>我-------一个被人看作另类的老师 ！对于我，有人不屑，因为我不打麻将，不喜欢进舞厅。有人不齿，因为我标新立异，崇尚时髦。有人不满，因为我自信、工作出色，无可挑剔。十几年来，年年优秀班主任，我是有名的工作狂，（还是优秀共产党员哦，哈哈，是 不是有点大言不惭啊）。知道我上网，一无知领导诧异：听说你还在上网？甚至居心叵测地问：那一定有网友喽？可是不是年纪大就不需要精神生活了啊？</p> <p id="source"><i>来源：我的博客</i></p> </div> <div id="layer2-3"></div> </div> <div id="layer3"><p>学校地址：济南市旅游路4516号 邮编：250103</p></div> </body> </html>设计题目
- 从网上下载一个精美的博客模板，并说明它的优点和缺点。
