StaticHtmlPage(仿照携程写的静态网页)

文章目录

StaticHtmlPage(仿照携程写的静态网页)

一，项目简介

二，项目运行部署

三，项目结构

四，效果展示

五，技术囊括

HTML：

Css:

JavaScript(Js):

开发工具：HBuilder:

六，问题详解

七，问题反馈

八，工作进程

九， 项目源码下载地址

如果觉得不错就点个赞吧

一，项目简介

该项目是一个仿照携官网编写的静态网页，没有涉及到后台和数据库，适合于初学前台的学生学习，在掌握一定的网页基础知识后，这是一个不错的实践案例。

该项目虽然是静态的网页，但是涉及到的知识点还是足够全面的：表单，下拉列表，注册登录，动画轮播，iframe模块重用等都用到了。

Css和html是主角，js充当的绿叶的配角。html中的知识也是比较全面的：link的外部引入css样式文件，行内标签样式，头部css样式；各种常用元素：div,a,ul,li,p,span,iframe,strong,img等；各种元素属性：id,class,src.href,name,width,height,target等。Css也是运用的比较全面：width,heigth,padding,margin,background,opacity,font-size,text-align,line-height,float,color等。Js则用到的比较少，只用到了动画轮播。

二，项目运行部署

该项目是静态网页，可直接点击主页面zhuye.html,他会自动打开你电脑默认的浏览器

如果需要查看源代码学习的，请下载一款国内的HBuilder，本人就是使用它开发的，非常的友好，比Dreamweaver好用的不只是一点半点，极力推荐！直接百度下载就行。

三，项目结构

四，效果展示

如果想查看了解相关的代码和解释，请查看github上文档：相关页面实现说明.doc。该文档所在的链接在后面的第九项中，请往后看。

五，技术囊括

HTML：

解释：HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

功能：静态原始的元素，只能简单的排版，如果需要更加的工整好看，还是要借助Css渲染。

Css:

解释：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

功能： 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript(Js):

解释： 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

功能： 主要是做一些动态的动画或者和后台进行交互(虽然本项目没有涉及后台)

开发工具：HBuilder:

解释： HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。

它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。

功能： 一个开发平台，对代码的提示比较友好。

六，问题详解

请参考github上文档：相关页面实现说明.doc。该文档所在的链接在后面的第九项中，请往后看。

七，问题反馈

如果对该项目由疑问的或者不能够理解的，再或者导入项目运行不成功的可以通过以下方式联系笔者！

1.电话号码：13870873449

2.qq：1056015243

3.邮箱地址：1056015243@qq.com

4.github地址：https://github.com/fanda521/

八，工作进程

时间

功能完成

2016年6月5日

浏览携程官网并且选取要完成的几个页面

2016年6月6日

选定好仿照的页面后下载相应的资源

2016年6月7日

编写主体框架

2016年6月9日

完成基本的静态页面

2016年6月12日

完成动态的轮播图

九， 项目源码下载地址

https://github.com/fanda521/StaticHtmlPage/

如果觉得不错就点个赞吧