用了2小时写了一套学生作业水准的网站首页，希望这篇文章和代码能让更多新手了解HTMLDIV+CSS布局的方法和原理，而不是被一些人copy走从中获利…该网站的主题为《去旅行吧》，整个首页下来有字符的代码量，当然你可以直接将首页提交作业使用但记得修改网页内的版权信息栏，也可以根据首页框架去试着做出自己主题的页面以及几个超链接页面，一般的作业需要4-6个页面左右。
这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。
能看懂或写出这个首页的，恭喜你已经掌握了HTML前端网页设计的大部分知识点，已经能够写出来一个完整的网站页面了，同时如LOGO图的设计、渐变的使用、布局上色块、阴影的使用、js的引入可能就是你下一步需要攻克的点了...尤其是页面的美观度以及个人审美的提升将会是一条漫长的道路…
源码有价，仅供学习，请勿转售，有用点赞。
源码保存方法（下方为保存及使用的视频）：
00:551.复制下方所有源码
2.电脑右键桌面空白-新建-文本文档双击打开文本文档，CtrlV粘贴源码到空白文本文档内
3.点击文件-另存为，保存类型选择所有文件，文件名填写为index.html点击保存即可在浏览器预览
也可以直接将源码复制进Dreamweaver、HbuilderX、Editplus等网页设计软件内保存为Html此处就不多说了…
源码共享如下，记得点赞~
!doctypehtmlhtmlheadmetacharset=utf-8title去旅行吧-PsdHtml.CN原创作品，仅供个人学习使用，禁止转卖/titlestyletype=text/css#father{position:absolute;width:%;height:px;z-index:1;left:0px;top:0px;}#father#top{height:px;width:0px;margin-right:auto;margin-left:auto;}#father#title{height:42px;width:0px;margin-right:auto;margin-left:auto;background-image:url(