StaticHtmlPage(仿照携程写的静态网页)
文章目录
一,项目简介
- 该项目是一个仿照携官网编写的静态网页,没有涉及到后台和数据库,适合于初学前台的学生学习,在掌握一定的网页基础知识后,这是一个不错的实践案例。
- 该项目虽然是静态的网页,但是涉及到的知识点还是足够全面的:表单,下拉列表,注册登录,动画轮播,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/