网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例25：小米商城网站_第1页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例25：小米商城网站_第2页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例25：小米商城网站_第3页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例25：小米商城网站_第4页
网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例25：小米商城网站_第5页
已阅读5页，还剩36页未读， 继续免费阅读

VIP免费下载

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

我们毕业啦其实是答辩的标题地方案例25小米商城网站案例描述制作小米商城网站，该网站由3个页面构成，分别为主页、登录页和注册页，从主页可以进入登录页和注册页，从登录页和注册页可以返回主页。主页有轮播图效果和限时促销效果。网站浏览效果如图25-1~图25-3所示。案例描述图25-1小米商城网站主页图25-2小米商城网站登录页图25-3小米商城网站注册页前期工作收集素材网站素材包括图片素材和字体库素材，本网站图片素材大多来自网络。主页上的图标（如购物车图标、放大镜图标等）使用免费字体库font-awesome-4.7.0中的图标字体，该字体库从网上下载即可。前期工作新建项目在HBuilderX中新建项目project25，设置项目存放位置为E:/网页设计/源代码，选择模板类型为“基本HTML项目”，单击“创建”按钮。右击project25项目中的img目录，选择“重命名”命令，将目录名改为“images”，将网站的素材图片复制、粘贴到该目录中。将字体库font-awesome-4.7.0文件夹也复制、粘贴到该项目中。此时该项目目录结构如图25-4所示。图25-4“小米商城”网站项目目录结构前期工作创建样式表文件右击项目project25中的css目录，选择“新建”|“css文件”命令，在“新建css文件”对话框中输入样式表文件名称style.css，单击“创建”按钮。然后在style.css中编写通用样式代码，代码如下。前期工作创建样式表文件打开文件index.html，在<head>标记内输入如下代码。将style.css文件链接到index.html页面中。<link

rel="stylesheet"

type="text/css"

href="css/style.css"

/>制作网站主页1.主页结构分析主页由头部、导航条、轮播图、主体部分和版权信息等构成，主体部分从上到下又细分为图片展示、产品促销、广告图片、手机、电视、视频和售后服务部分，主页结构划分如图25-5所示。图25-5主页结构划分主页布局代码，略。制作网站主页2.制作头部观察图25-6不难看出，头部分为左、右两部分，对每部分可以使用无序列表搭建结构。鼠标指针划过“下载App”时，显示二维码，如图25-7所示，对二维码可以使用<img>标记定义，通过定义样式使二维码隐藏，鼠标指针划过时再显示。购物车左侧的图标使用字体库中的图标字体。图25-6头部（1）分析效果图图25-7头部制作网站主页2.制作头部在index.html中添加头部的结构代码。

代码略。此时浏览网页，效果如图25-8所示。图25-8头部结构（2）搭建头部结构制作网站主页2.制作头部切换到style.css文件，添加头部内容的样式代码。代码略。此时浏览网页，效果如图25-6和图25-7所示。（3）定义头部CSS样式制作网站主页3.制作导航条部分观察导航条部分，该部分内容分为3部分：左侧是Logo、中间是导航条目、右侧是搜索框。对Logo使用<img>标记定义，并给图像添加超链接，链接到主页。对导航条目使用无序列表来构建。对右侧的搜索框使用<input>标记定义，按钮使用<button>标记定义，按钮上面的放大镜图像使用字体库中的图标字体。（1）分析效果图图25-9导航条部分效果制作网站主页3.制作导航条部分在index.html中头部的结构代码下面输入结构代码。代码略。此时浏览网页，效果如图25-10所示。（2）搭建导航条结构图25-10导航条结构制作网站主页切换到style.css文件，添加导航条部分的样式代码。代码略。此时浏览网页，效果如图25-9所示。（3）定义导航条CSS样式3.制作导航条部分制作网站主页4.制作轮播图部分轮播图部分效果如图25-11所示。单击左、右两侧的箭头或单击下面的圆点，可以显示不同的图片；不单击时，默认每隔2s显示下一张图片。图25-11轮播图部分效果制作网站主页4.制作轮播图部分将所有内容放入一个大盒子，将两侧的箭头分别放入两个小盒子，对下面的圆点和图像都使用无序列表标记<ul>定义。对盒子中的内容采用绝对定位，定位到大盒子的指定位置。（1）分析效果图在index.html中导航条部分的结构代码下面输入代码。代码略。（2）搭建轮播图结构制作网站主页在<head>标记中将轮播图部分的样式表文件css.css和脚本文件index.js链接到index.html页面中，代码如下。（3）链接文件<link

href="css/css.css"

rel="stylesheet"

type="text/css"

/><script

type="text/javascript"

src="js/index.js"></script>css.css文件和index.js文件的代码参考本书配套资源文件，此处代码略。4.制作轮播图部分制作网站主页5.制作图片展示部分从该部分开始是主体部分的内容。图片展示部分效果如图25-12所示。图25-12图片展示部分效果制作网站主页图片展示部分分为4个块，需要定义一个大盒子，在大盒子中再定义4个子盒子。对第一个块使用无序列表搭建结构，第一个块中的小图标使用字体库中的相应图标字体。（1）分析效果图在index.html中轮播图部分的结构代码下面输入代码。代码略。（2）搭建图片展示部分结构5.制作图片展示部分制作网站主页此时浏览网页，效果如图25-13所示。5.制作图片展示部分图25-13图片展示部分结构制作网站主页切换到style.css文件，添加主体部分和图片展示部分的样式代码。代码略。（3）定义图片展示部分CSS样式此时浏览网页，效果如图25-12所示。5.制作图片展示部分制作网站主页6.制作产品促销部分产品促销部分效果如图25-14所示。该部分有限时促销效果和促销产品的展示。图25-14产品促销部分效果制作网站主页对该部分需要定义一个盒子，在盒子中用无序列表构建每个块的内容。每个块中相同的样式可以同时定义，不同的样式分别定义。（1）分析效果图在index.html中图片展示部分的结构代码下面输入代码。代码略。（2）搭建产品促销部分结构6.制作产品促销部分制作网站主页切换到style.css文件，添加产品促销部分的样式代码。代码略。（3）定义产品促销部分CSS样式此时浏览网页，效果如图25-14所示。6.制作产品促销部分制作网站主页7.制作广告图片和手机部分广告图片和手机部分效果如图25-15所示。图25-15广告图片和手机部分效果制作网站主页广告图片和手机部分由两个块构成，上面的块存放广告图片；下面的块又分为左右两部分，左边的部分存放一张图片，右边的部分存放8张手机图片，8张手机图片采用无序列表搭建结构。（1）分析效果图在index.html中产品促销部分的结构代码下面输入代码。代码略。（2）搭建广告图片和手机部分结构7.制作广告图片和手机部分制作网站主页切换到style.css文件，添加广告图片和手机部分的样式代码。代码略。（3）定义广告图片和手机部分CSS样式此时浏览网页，效果如图25-15所示。7.制作广告图片和手机部分制作网站主页8.制作广告图片和电视部分广告图片和电视部分的制作步骤与广告图片和手机部分的类似，效果如图25-16所示。具体步骤可扫码观看，此处略。图25-16广告图片和电视部分效果制作网站主页9.制作视频部分视频部分其实也是4张图片的展示，单击图片时播放视频。但这里对图片创建了空链接，不能播放视频。视频部分效果如图25-17所示。图25-17视频部分效果制作网站主页视频部分需要定义一个盒子，盒子中的4个块使用无序列表搭建结构，每个列表项中包含图片和文字。（1）分析效果图在index.html中广告图片和电视部分的结构代码下面输入代码。代码略。（2）搭建视频部分结构9.制作视频部分制作网站主页切换到style.css文件，添加视频部分的样式代码。代码略。（3）定义视频部分CSS样式此时浏览网页，效果如图25-17所示。9.制作视频部分制作网站主页10.制作售后服务部分售后服务部分是主体部分中最下面的部分，其效果如图25-18所示。图25-18售后服务部分效果制作网站主页售后服务部分需要定义一个盒子，盒子中的内容使用无序列表搭建结构，每个列表项中包含图标和文字。（1）分析效果图在index.html中视频部分的结构代码下面输入代码。代码略。（2）搭建售后服务部分结构10.制作售后服务部分制作网站主页切换到style.css文件，添加售后服务部分的样式代码。代码略。（3）定义售后服务部分CSS样式此时浏览网页，效果如图25-18所示。10.制作售后服务部分制作网站主页11.制作版权信息部分版权信息部分是主页最下面的部分，其效果如图25-19所示。图25-19版权信息部分效果制作网站主页（1）分析效果图在index.html中主体部分的结构代码下面输入代码。代码略。（2）搭建版权信息部分结构11.制作版权信息部分版权信息部分为通栏显示，也就是与浏览器一样宽，内容占的宽度是1200px。因此需要一个大盒子，里面再嵌套小盒子。小盒子中包含上、下两个块，上面的块又分为左、右两个块，左面的块存放文字内容，右面的块存放小米Logo图像；下面的块存放一行文字。制作网站主页切换到style.css文件，添加版权信息部分的样式代码。代码略。（3）定义版权信息部分CSS样式至此，主页制作完成。浏览网页，效果如图25-1所示。11.制作版权信息部分制作网站登录页制作网站登录页，设置文件名为login.html，浏览效果如图25-2所示。具体步骤和代码请扫码观看，此处略。图25-2小米商城网站登录页制作网站注册页制作网站注册页，设置文件名为register.html，浏览效果如图25-3所示。具体步骤和代码请扫码观看，此处

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论