仿慕课网 ------ README
实践记录（日志）
周次
实践内容记录
备注
周二
介绍前端开发的基本的思想，下载前端开发常用的工具
HBuilderX，介绍 Html5，介绍 Html 的常用标签，和各种 Html
标签的使用方法，包括基本的文字标签，超链接标签、div
标签等
无
13，
14
周四
继续介绍 Html 的常用的标签，以及新增加的标签，引入 Css 样式，
介绍 CSS3 的常用的选择器，和常见的标签的格式，实践引入外部的
Css 文件
无
周次
实践内容记录
备注
周二
收尾 CSS3，引入 JS，使用 JavaScript 来实现动态的效果
无
15，
16
周四
收尾 JS，简单介绍 JavaScript 的常见的操作，同时综合实践 Html+
Css+ JavaScript 进行前端综合项目的编写
无
实践报告
注意事项：；
1.可根据报告内容自行加页，该表将做为实践考核的重要依据和教学资料保存。
2、报告内容均需真实填写，不得弄虚作假，如有作假，此实践报告无效；
一、 实践实习目的
1.提高掌握设计过程的熟练程度，把握网页设计的方法和思路，更好地将技术
与艺术相结合。
2.将所学的基础理论、专业知识和基本技能综合运用于实践，提高实际能力和
整体素质。
3.深化课程内容的掌握，将分散的知识点综合性的运用于一个整体的实例项目，
培养学生综合运用和灵活运用所学知识的能力。
4.强化网页设计应用技能的练习。在所学内容的基础，鼓励创意的个性，培养
创新意识。
二、实践时间和地点
1．时间：XXXXXXX
三、实践内容
1．实践期间的学习任务
学习并掌握 html5 开发的基本的技能
学习并掌握 CSS3 开发的基本技能
学习并掌握 JavaScript 开发的基本技能
进行网页设计应用技能的练习。在所学内容的基础，创新完成综合门户网
站的建设
2.实践期间完成的实践项目
1. 设计方案：
首先，确定项目的目标，模仿 IT 学习网站慕课网慕课网-程序员的梦工厂
(imooc.com)，对于目前新增的商品课程模块没有进行设计，设计的主要的思路，就是分
为网页的上，中，下三个 div，最上面的 div 就是相关的 Logo、中间的 content 最主要就
是轮播图和相关的二级的导航栏导航到相关的内容，最下方的 div 的功能就是进行网站的
备案，个人的相关的账号的展示，包括微信、QQ、微博等。
整体的实现效果：
个人不喜欢门户网站展示太多内容，像某网站整个网页很多内容，用户登
录会显得审美疲劳，所以结合了 Edge 搜索首页的简约风格，将内容隐藏到轮
播图侧面的目录中
像这样，就能够将更多的内容隐藏到目录中，当鼠标悬浮就能够出现相关的内
容，中间的 content 的 div 就是该仿慕课网门户网站的核心，至于上面的模块
的导航和搜索框，就是借助 Css3 进行渲染布局
最开始选择慕课网，到分析拆解优化，因未现在的慕课网因为增加了课程
模块，所以像淘宝一样多了很多销售的模块，我觉得影响整体的美感，就保留
核心内容模块，并且整合相关的页面 footer。实践过程中将所有的内容都进行
了认真的整理。
2. 模块功能实现：
上面的设计方案已经提到，本项目页面主要就分为 3 个模块，上方
header，中间的主要内容细分为 content 和 pathbanner，content 就是轮播图界
面，而 pathbanner 就是轮播图下方几种主要学习内容的导航，而 footer 就包
括网站备案和其他的相关的链接，接下来一一分析设计
（1）这里首先就是背景图片，不是直接在 Body 进行设计，而是将图片
使用 div 进行管理
<div id="first-bk" class="postion-ab"></div>
在 Css 样式中将背景图片进行链入，代码如下
/* 页面第一张背景图片*/
#first-bk{
z-index: -1;
width: 100%;
height: 100%;
background-image: url(img/Rrirst.jpg);
background-size: 100%;
}
（2）Header 模块： 本模块就是页面轮播图上方的 logo 和模块导航以
及搜索框和登录部分
这部分的设计比较简单，首先就是左侧的 logo，之后就是几个链接组成的一个
列表，右侧的搜索框，以及登录、注册部分组成的列表，搜索框中会默认给出
推荐内容： 前端小白和 java 入门，这两个选项设置为浅灰色，避免影响搜索
框的透明度，而其余的两个连个列表：header-left 和 header-right 的 html
代码部分十分简单，就是将几个项作为 li 即可。
<div id="header">
<!-- 头部左侧的内容 导航栏-->
<div class="header-left fl">
<ul>
<li>
<a href = ""><img width="126px" height="72px"
src="img/Cfeng 官网(已去底).png" /></a> <!-- 左侧的 logo-->
</li>
<li class="margin-160"><a href="">项目</a></li>
<li><a href="">路线</a></li>
<li><a href="">猿问</a></li>
<li><a href="">手记</a></li>
</ul>
</div>
<!--网页头部右侧的内容 -->
<div class="header-right fr">
<!-- 输入框-->
<div class="search-bar margin-r60 fl postion-re">
<div id="searchOption">
<a class="serrch-prompt postion-ab"
href=""><font color="#CCCCCC">前端小白</font></a>
<a class="serrch-prompt postion-ab left-70"
href=""><font color="#CCCCCC">Java 入门</font></a>
</div>
<input type="text" id="searchInput" />
<a href=""><img width="18px" height="17.6px"
class="serrch-prompt postion-ab top-30 right-0"
src="img/SearchInput(已去底).jpg"/></a>
</div>
<ul class="login-register fl">
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
</div>
</div>
主要就是要调整其样式，让其水平分布，之后就是能偶让搜索框的透明度够高，
本项目的 html、css、js 代码分开在三个文件中，在 html 中通过标签将 Css
和 js 文件链入
Css 中就要先取消 li 前面的样式，同时要进行布局
