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

7 篇文章 0 订阅
7 篇文章 0 订阅

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/

如果觉得不错就点个赞吧

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
非常方便,直接可以用 <div class="demo"> <div> 出发地: <input type="text" value="" size="15" id="homecity_name" name="homecity_name" mod="address|notice" mod_address_source="hotel" mod_address_suggest="@Beijing|北京|53@Shanghai|上海|321@Shenzhen|深圳|91@Guangzhou|广州|80@Qingdao|青岛|292@Chengdu|成都|324@Hangzhou|杭州|383@Wuhan|武汉|192@Tianjin|天津|343@Dalian|大连|248@Xiamen|厦门|61@Chongqing|重庆|394@" mod_address_reference="cityid" mod_notice_tip="中文/拼音" /> <input id="cityid" name="cityid" type="hidden" value="{$cityid}" /> </div> <div> 目的地: <input type="text" value="" size="15" id="getcity_name" name="getcity_name" mod="address|notice" mod_address_source="hotel" mod_address_suggest="@Beijing|北京|53@Shanghai|上海|321@Shenzhen|深圳|91@Guangzhou|广州|80@Qingdao|青岛|292@Chengdu|成都|324@Hangzhou|杭州|383@Wuhan|武汉|192@Tianjin|天津|343@Dalian|大连|248@Xiamen|厦门|61@Chongqing|重庆|394@" mod_address_reference="getcityid" mod_notice_tip="中文/拼音" /> <input id="getcityid" name="getcityid" type="hidden" value="{$getcityid}" /> </div> </div> <div id="jsContainer" class="jsContainer" style="height:0"> <div id="tuna_alert" style="display:none;position:absolute;z-index:999;overflow:hidden;"></div> <div id="tuna_jmpinfo" style="visibility:hidden;position:absolute;z-index:120;"></div> </div> <script type="text/javascript" src="js/fixdiv.js"></script> <script type="text/javascript" src="js/address.js"></script> <div align="center" style="clear:both;font-size:12px;color:#666;">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值