---恢复内容开始--- 最近在上海上学的一个高中同学让我帮忙,帮她做她们的计算机课程大作业。 由于关系不错我也不好意思拒绝就帮忙做了,因为这个学期刚刚开始接触HTML5和css,所以制作过程中有很多不懂的,而且由于HTML5是选 ...
---恢复内容开始---
最近在上海上学的一个高中同学让我帮忙,帮她做她们的计算机课程大作业。
由于关系不错我也不好意思拒绝就帮忙做了,因为这个学期刚刚开始接触HTML5和css,所以制作过程中有很多不懂的,而且由于HTML5是选修课,一星期只有一节,所以做这个花费了比较多的时间,这个网站是我制作的第一个网站,比较有纪念意义,所以发在博客上,作为纪念。
通过去做这个作业,我了解到很多课上学不到的东西。因为没有美工,从头到尾,都是我一个人在臆想,刚开始的时候,根本无从下手,我去参考别人做的家乡网站,去找各种各样的模板,我充分感受到这样做的痛苦,所以终于体会到为什吗前端跟美工是分开来做的。在采集图片的过程太痛苦,不想去回忆,去各个网站找图片,百度,搜狗,谷歌等等,可是每次都因为图片的分辨率不同,长宽比不同,让有强迫症的我感觉十分难受,于是我就动用各种各样的工具,其中Photoshop和QQ截图工具真是帮了大忙,可是到最后还是有部分情况影响美观。
还有不懂得标签,我上网上查,去问老师,推荐一个网站:http://www.w3school.com.cn/h.asp
这是一次难忘而美好的制作过程,第一次尝试着去做一个网站,第一次为了打代码去熬夜到天亮,这是我以前所不敢想的,而且当网页完全做成的那一刻,那种激动与成就感,让我睡了这么多天以来最踏实的一觉。
所以,我想说:你好:HTML!
Hello Word!
这个作业一共包含了6个页面,三个分级,其中有:
一、《简单介绍》
主页:
这是主页,插入了大量的图片与视频,对郑州进行了简单的介绍;视频使用的是<video>标签,这是源代码:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>我的家乡-郑州</title> 5 <link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> 6 <!-- jQuery (necessary JavaScript plugins) --> 7 <script src='/images/loading.gif' data-original="js/bootstrap.js"></script> 8 <!-- Custom Theme files --> 9 <link href="css/style.css" rel='stylesheet' type='text/css' /> 10 <!-- Custom Theme files --> 11 <!--//theme-style--> 12 <meta name="viewport" content="width=device-width, initial-scale=1"> 13 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 14 <meta name="keywords" content="Game Box Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 15 Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> 16 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 17 18 <script src='/images/loading.gif' data-original="js/jquery.min.js"></script> 19 <script src='/images/loading.gif' data-original="Scripts/swfobject_modified.js" type="text/javascript"></script> 20 </head> 21 <body> 22 <div class="banner-info"> 23 <div class="container"> 24 <div class="logo"> 25 <h1><a href="我的家乡主页.html">MY HOMETOWN</a></h1> 26 </div> 27 <div class="top-menu"> 28 <span class="menu"></span> 29 <ul class="nav1"> 30 <li class="active"><a href="我的家乡主页.html">郑州简介</a></li> 31 <li><a href="历史沿革.html">历史沿革</a></li> 32 <li><a href="名胜古迹.html">名胜古迹</a></li> 33 <li><a href="郑州美景.html">郑州美景</a></li> 34 <li><a href="郑州美食.html">郑州美食</a></li> 35 </ul> 36 </div> 37 <!-- script-for-menu --> 38 <script> 39 $( "span.menu" ).click(function() { 40 $( "ul.nav1" ).slideToggle( 300, function() { 41 // Animation complete. 42 }); 43 }); 44 </script> 45 <!-- /script-for-menu --> 46 47 <div class="clearfix"></div> 48 </div> 49 </div> 50 </div> 51 <!-- banner --> 52 <!-- Slider-starts-Here --> 53 <script src='/images/loading.gif' data-original="js/responsiveslides.min.js"></script> 54 <script> 55 $(function () { 56 $("#slider").responsiveSlides({ 57 auto:true, 58 nav: false, 59 speed: 500, 60 namespace: "callbacks", 61 pager:true, 62 }); 63 }); 64 65 </script> 66 <div class="slider"> 67 <div class="callbacks_container"> 68 <ul class="rslides" id="slider"> 69 70 <div class="slid banner1"> 71 <div class="caption"> 72 <h3>郑州市,简称“郑”,河南省省会。</h3> 73 <p>地处华北平原南部、黄河中下游、河南省中部偏北。 北临黄河,西依嵩山,东南为广阔的黄淮平原。</p> 74 </div> 75 </div> 76 77 78 <div class="slid banner2"> 79 <div class="caption"> 80 <h3>郑州地处中国地理中心。</h3> 81 <p>是全国重要的铁路、航空、高速公路、电力、邮政电信主枢纽城市,中国中部地区重要的工业城市。</p> 82 </div> 83 </div> 84 85 86 <div class="slid banner3"> 87 <div class="caption"> 88 <h3>郑州是历史上著名商埠。</h3> 89 <p>是中部地区重要的物资集散地,每年都会举办全国性、区域性大型商贸活动,郑州商品交易所是三大全国性商品交易所之一。</p> 90 </div> 91 </div> 92 93 </ul> 94 </div> 95 </div> 96 <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >手机网站模板</a></div> 97 <!-- content --> 98 <div class="content"> 99 <div class="container">100 <div class="top-games">101 <a href="#"><h3>行政区划</h3></a>102 <span></span>103 </div>104 <div class="top-game-grids">105 <ul id="flexiselDemo1">106 <li>107 <div class="game-grid">108 <h4>金水区</h4>109 <p>Jinshui District</p>110 <img src='/images/loading.gif' data-original="images/t4.jpg" class="img-responsive" />111 </div> 112 </li>113 <li>114 <div class="game-grid">115 <h4>惠济区</h4>116 <p>Huiji District</p>117 <img src='/images/loading.gif' data-original="images/t3.jpg" class="img-responsive" />118 </div>119 </li>120 <li>121 <div class="game-grid">122 <h4>中原区</h4>123 <p>Zhongyuan District</p>124 <img src='/images/loading.gif' data-original="images/t1.jpg" class="img-responsive" />125 </div>126 </li>127 <li>128 <div class="game-grid">129 <h4>二七区</h4>130 <p>Erqi District</p>131 <img src='/images/loading.gif' data-original="images/t2.jpg" class="img-responsive" />132 </div> 133 </li> 134 <li> 135 <div class="game-grid">136 <h4>管城区</h4> 137 <p>Guancheng District</p>138 <img src='/images/loading.gif' data-original="images/t5.jpg"class="img-responsive" />139 </div> 140 </li> 141 <li> 142 <div class="game-grid">143 <h4>上街区</h4> 144 <p>Shangjie District</p>145 <img src='/images/loading.gif' data-original="images/t6.jpg"class="img-responsive" />146 </div> 147 </li>148 <li> 149 <div class="game-grid">150 <h4>巩义市</h4> 151 <p>Gongyi City</p>152 <img src='/images/loading.gif' data-original="images/t7.jpg"class="img-responsive" />153 </div>154 </li>155 <li> 156 <div class="game-grid">157 <h4>新郑市</h4> 158 <p>Xinzheng City</p>159 <img src='/images/loading.gif' data-original="images/t8.jpg"class="img-responsive" />160 </div> 161 </li>162 <li> 163 <div class="game-grid">164 <h4>登封市</h4> 165 <p>Dengfeng City</p>166 <img src='/images/loading.gif' data-original="images/t9.jpg"class="img-responsive" />167 </div> 168 </li>169 <li> 170 <div class="game-grid">171 <h4>新密市</h4> 172 <p>Xinmi City</p>173 <img src='/images/loading.gif' data-original="images/t10.jpg"class="img-responsive" />174 </div> 175 </li> 176 <li> 177 <div class="game-grid">178 <h4>荥阳市</h4> 179 <p>Rongyang City</p>180 <img src='/images/loading.gif' data-original="images/t11.jpg"class="img-responsive" />181 </div> 182 </li>183 <li> 184 <div class="game-grid">185 <h4>中牟县</h4> 186 <p>Zhongmu County</p>187 <img src='/images/loading.gif' data-original="images/t12.jpg"class="img-responsive" />188 </div> 189 </li>190 </ul>191 192 193 <script type="text/javascript">194 $(window).load(function() { 195 $("#flexiselDemo1").flexisel({196 visibleItems: 4,197 animationSpeed: 1000,198 autoPlay: true,199 autoPlaySpeed: 3000, 200 pauseOnHover:true,201 enableResponsiveBreakpoints: true,202 responsiveBreakpoints: { 203 portrait: { 204 changePoint:480,205 visibleItems: 1206 }, 207 landscape: { 208 changePoint:640,209 visibleItems: 2210 },211 tablet: { 212 changePoint:768,213 visibleItems: 3214 }215 }216 });217 });218 </script>219 <script type="text/javascript" src='/images/loading.gif' data-original="js/jquery.flexisel.js"></script> 220 </div>221 </div>222 </div>223 <!-- latest -->224 <div class="latest">225 <div class="container">226 <div class="latest-games">227 <h3>名胜古迹</h3>228 <span></span>229 </div>230 <div class="latest-top"> 231 <div class="col-md-5 trailer-text">232 <div class="sub-trailer">233 <div class="col-md-4 sub-img">234 <img src='/images/loading.gif' data-original="images/v1.jpg" />235 </div>236 <div class="col-md-8 sub-text">237 <a href="#">少林寺</a>238 <p>少林寺是世界著名的佛教寺院,被誉为“天下第一名刹”。</p>239 </div>240 <div class="clearfix"> </div>241 </div>242 <div class="sub-trailer">243 <div class="col-md-4 sub-img">244 <img src='/images/loading.gif' data-original="images/v2.jpg" />245 </div>246 <div class="col-md-8 sub-text">247 <a href="#">中岳嵩山</a>248 <p>是中华文明的重要发源地,也是中国名胜风景区,为五岳中的中岳。</p>249 </div>250 <div class="clearfix"> </div>251 </div>252 <div class="sub-trailer">253 <div class="col-md-4 sub-img">254 <img src='/images/loading.gif' data-original="images/v3.jpg" />255 </div>256 <div class="col-md-8 sub-text">257 <a href="#">始祖山</a>258 <p>据传此峰因黄帝臣风后封地而得名,是黄帝活动的中心地域。</p> <a class="hvr-bounce-to-top" href="名胜古迹.html">了解更多...</a>259 </div> 260 <div class="clearfix"> </div>261 </div>262 </div>263 <div class="col-md-7 trailer">264 <video src='/images/loading.gif' data-original="media\少林英雄.mp4" controls poster="images\p1.jpg" height="380" wight="550">少林英雄</video>265 </div>266 <div class="clearfix"> </div>267 </div>268 </div>269 </div>270 <!-- poster -->271 <div class="poster">272 <div class="container">273 <div class="poster-info">274 <h3><font color="#FF3399">郑州风光</font></h3>275 <p><font color="#666666">郑州市是中国八大古都之一、世界历史都市联盟成员城市、国家历史文化名城、全国文明城市、全国科技进步示范城市、国家卫生城市、国家园林城市、国家双拥模范城市、全国绿化模范城市、中国优秀旅游城市、中国大陆旅游业最发达城市之一,2012中国特色魅力城市200强,全国最佳会展经营城市。</font></p>276 <a class="hvr-bounce-to-bottom" href="郑州美景.html">更多美景</a>277 </div>278 </div>279 </div>280 <!-- x-box -->281 <div class="x-box">282 <div class="container"> 283 <div class="x-box_sec">284 <div class="col-md-7 x-box-left">285 <h2>特有美食</h2>286 <h3>烩面</h3>287 <p>烩面,中国十大面条之一,有着1300多年的历史。是一种荤、素、汤、菜、饭兼而有之的河南传统美食,以味道鲜美,经济实惠,享誉中原,遍及全国。烩面是以优质高筋面粉为原料,辅以高汤及多种配菜,一种类似宽面条的面食。汤好面筋,营养高。有羊肉烩面、三鲜烩面、五鲜烩面等多种类型。288 烩面的精华全在于汤,汤用上等嫩羊肉、羊骨(劈开,露出中间的骨髓)一起煮五个小时以上,先用大火猛滚再用小火煲,其中下七八味中药,骨头油都熬出来了,煲出来的汤白白亮亮,犹如牛乳一样,所以又有人叫白汤。下面时,锅内放原汁肉汤,将面拉成薄条入锅,辅料以海带丝、豆腐丝、粉条、香菜、鹌鹑蛋、海参、鱿鱼等,上桌时外带香菜、辣椒油、糖蒜等小碟。 </p>289 <a class="hvr-bounce-to-top" href="郑州美食.html">更多美食</a>290 </div>291 <div class="col-md-5 x-box-right">292 <a href="烩面.html"> <img src='/images/loading.gif' data-original="images/huimian.jpg" class="img-responsive" /></a>293 </div>294 <div class="clearfix"></div>295 </div>296 </div>297 </div>298 <!-- footer -->299 <div class="footer">300 <div class="container">301 <div class="footer-grids">302 <div class="col-md-3 ftr-info">303 <h3>声明:</h3>304 <p>本网页所使用到的所有图片、链接、资料等均为网上公共资料,如有他人使用,本人不承担任何法律责任。305 </p>306 </div>307 <div class="col-md-3 ftr-grid">308 <h3>网页标签</h3>309 <ul class="ftr-list">310 <li><a href="#">郑州</a></li>311 <li><a href="#">天地之中</a></li>312 <li><a href="#">中原经济区</a></li>313 <li><a href="#">古都</a></li>314 <li><a href="#">中原</a></li>315 </ul> 316 </div>317 <div class="col-md-3 ftr-grid">318 <h3>鸣谢</h3>319 <ul class="ftr-list">320 <li><a href="#">百度百科</a></li>321 <li><a href="#">百度图片</a></li>322 <li><a href="#">腾讯QQ</a></li>323 <li><a href="#">爱奇艺视频</a></li> 324 <li><a href="#">郑州网</a></li>325 </ul> 326 </div>327 <div class="col-md-3 ftr-grid">328 <h3>联系方式</h3>329 <ul class="ftr-list"> 330 <li><a href="#">QQ:877922989</a></li>331 <li><a href="#">邮箱:877922989@qq.com</a></li>332 <li><a href="#">微博:鱼骨Eaco-@sina.com</a></li> 333 </ul> 334 </div> 335 <div class="clearfix"></div>336 </div>337 </div>338 </div>339 <!---->340 <div class="copywrite">341 <div class="container">342 <a href="#"><p>作者:景怡柯<br>(点击上方白色字体返回顶部)</p></a>343 </div>344 </div>345 </body>346 </html>
原标题:帮同学做的大一大作业:《我的家乡—郑州》
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。