ImageVerifierCode 换一换
格式:DOC , 页数:14 ,大小:11.43MB ,
资源ID:3654893      下载积分:20 文钱
快捷下载
登录下载
邮箱/手机:
温馨提示:
快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。 如填写123,账号就是123,密码也是123。
特别说明:
请自助下载,系统不会自动发送文件的哦; 如果您已付费,想二次下载,请登录后访问:我的下载记录
支付方式: 支付宝    微信支付   
验证码:   换一换

加入VIP,省得不是一点点
 

温馨提示:由于个人手机设置不同,如果发现不能下载,请复制以下地址【https://www.wenke99.com/d-3654893.html】到电脑端继续下载(重复下载不扣费)。

已注册用户请登录:
账号:
密码:
验证码:   换一换
  忘记密码?
三方登录: QQ登录   微博登录 

下载须知

1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。
2: 试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。
3: 文件的所有权益归上传用户所有。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 本站仅提供交流平台,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

版权提示 | 免责声明

本文(html 西式甜品网制作.doc)为本站会员(11****ws)主动上传,文客久久仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知文客久久(发送邮件至hr@wenke99.com或直接QQ联系客服),我们立即给予删除!

html 西式甜品网制作.doc

1、1“西式甜品网”首页面制作一、案例描述 1、考核知识点 盒子模型 元素的浮动与定位2、练习目标 掌握盒子的相关属性。 掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局,同时结合元素的浮动与定位,可使网页的结构更加多样化,通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图 4-1 所示。2图 4-1 “西式甜品网”效果展示二、布局及定义基础样式1、效果分析(1)HTML 结构分析“西式甜品网”首页面从上到下可以分为 5 个模块,如图 4-2 所示。3头部导航及 b a n n e r产品分类产品展示版权信息图 4-2 “

2、西式甜品网”结构分析(2)CSS 样式分析页面中的各个模块居中显示,页面的版心为 980px。另外,页面中的所有字体均为微软雅黑,字体大小为 16px,这些可以通过 CSS 公共样式进行定义。2、页面布局新建 index04.html 文件,在 index04.html 文件内书写 HTML 结构代码,具体代码如下。1 3 4 5 6 西式甜品网7 48 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 在上述代码中,通过给 div 添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式,使得网页在各

3、浏览器中显示的效果一致,在完成页面布局后,首先要做的就是对 CSS 样式进行初始化并声明一些通用的样式。在 index04.html 文件所在的文件夹内新建 css文件夹用于存放样式表文件 style04.css,使用链入式引入样式表文件。然后定义页面的基础样式,具体如下:/*重置浏览器的默认样式*/*margin:0; padding:0;border:0; background:none;/*全局控制 */bodyfont-family:“微软雅黑“;font-size:16px;三、案例制作1、制作头部模块(1)HTML 结构分析“头部”模块整体由一个大盒子进行控制。内部嵌套 和分别用来

4、搭建左侧 logo 和右侧文字内容部分。“头部”模块的具体结构如图 4-3 所示。5图 4-3 “头部”模块结构图(2)样式分析“头部”模块的宽为 980px,通过设置外边距属性使其在页面中居中显示,并设置相对定位。左侧logo 和右侧文字内容部分相对外层大盒子设置绝对定位,最后还需设置文字的相关样式等。(3)搭建结构在 index04.html 文件内书写“ 头部”模块的 HTML 结构代码。具体如下:1 2 3 4 登录 | 注册5 6 (4)定义样式在样式表文件 style04.css 中书写 CSS 样式代码,用于控制“头部”模块。具体如下:1 .head2 width:980px;3

5、 height:80px;4 margin:0 auto;5 position: relative;6 7 .logo8 position: absolute;9 left:100px;10 top:15px;11 12 .login13 position: absolute;14 right:100px;15 top:34px;16 color:#ff9c00;17 cursor: pointer;18 font-size: 18px;19 上述代码中,第 4 行代码用于设置“头部”模块在页面中居中显示。保存 index04.html 与 style04.css 文件,刷新页面,效果如图 4

6、-4 所示。6图 4-4 “头部”模块效果图2、制作导航及 banner 模块(1)HTML 结构分析“导航”及“banner”模块分别由一个大盒子进行控制。导航内容部分由标记定义,banner 图由 标记定义。 “导航”及“banner”模块的具体结构如图 4-5 所示。图 4-5 “导航”及“banner”模块结构图(2)样式分析“导航”模块的背景色通栏显示,因此需设置最外层的宽度 100%,内部嵌套的宽度为980px,且在页面中居中显示。定义标记左浮动,并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。(3)搭建结构在 index04.html 文件内书写“

7、导航”及“banner”模块的 HTML 结构代码。具体如下:1 2 3 4 首页5 公司简介6 美食甜品7 用户留言8 联系我们9 10 711 12 13 14 (4)定义样式在样式表文件 style04.css 中书写 CSS 样式代码,用于控制“导航”及“banner ”模块。具体如下:1 .nav2 width:100%;3 height:50px;4 background: #ff9c00;5 6 .nav_in7 width:820px;8 margin:0 auto;9 line-height: 50px;10 color:#fff;11 padding-left: 160px

8、;12 13 .nav_in span14 float: left;15 padding:0 38px;16 color:#9c5132;17 cursor: pointer;18 19 .banner text-align: center;上述代码中,第 8 行和第 19 行代码分别用于设置导航内容部分和 banner 图片在页面中居中显示。保存 index04.html 与 style04.css 文件,刷新页面,效果如图 4-6 所示。图 4-6 “导航”及“banner”模块效果图83、制作产品分类模块(1)HTML 结构分析“产品分类”模块主要由标记定义。“产品分类”模块的具体结构如

9、图 4-7 所示。图 4-7 “产品分类”模块结构图(2)样式分析“产品分类”模块的背景色通栏显示,因此需设置最外层的宽度 100%,内部嵌套的宽度为 980px,且在页面中居中显示。定义每一个分类模块的标记左浮动,并定义相关的文字样式。(3)搭建结构在 index04.html 文件内书写“ 产品分类”模块的 HTML 结构代码。具体如下:1 2 3 4 提拉米苏5 甜甜圈6 芝士蛋糕7 马卡龙8 西式甜点9 10 11 (4)定义样式在样式表文件 style04.css 中书写 CSS 样式代码,用于控制“产品分类”模块。具体如下:1 .list2 width:100%;3 height:

10、240px;4 background: #e7bf80;5 6 .list .list_in7 width:940px;8 height:195px;99 margin:0 auto;10 padding:45px 0 0 40px;11 12 .list .list_in div13 float: left;14 width:146px;15 height:55px;16 padding-top: 95px;17 margin-right: 42px;18 background: url(./images/list1.png) no-repeat;19 text-align: center;

11、20 color:#9c5132;21 22 .list .list_in .list2background: url(./images/list2.png) no-repeat;23 .list .list_in .list3background: url(./images/list3.png) no-repeat;24 .list .list_in .list4background: url(./images/list4.png) no-repeat;25 .list .list_in .list5background: url(./images/list5.png) no-repeat;

12、上述代码中,第 22-25 行代码用于分别设置各个分类模块的背景图片。保存 index04.html 与 style04.css 文件,刷新页面,效果如图 4-8 所示。图 4-8 “产品分类”模块效果图4、制作产品展示模块(1)HTML 结构分析“产品展示”模块主要由标记嵌套 标记和标记定义。“产品展示”模块的具体结构如图 4-9 所示。10图 4-9 “产品展示”模块结构图(2)样式分析“产品展示”模块的背景色通栏显示,因此需设置最外层的宽度 100%,内部嵌套的宽度为 980px,且在页面中居中显示。定义每一个展示模块的标记左浮动,并定义相关的文字样式。(3)搭建结构在 index04.html 文件内书写“ 产品展示”模块的 HTML 结构代码。具体如下:1 2 3 4 5 6 爱的 N 次方7 马卡龙8 价格:30 元9 10 11 12 果肉果冻13 双色马卡龙14 价格:30 元

Copyright © 2018-2021 Wenke99.com All rights reserved

工信部备案号浙ICP备20026746号-2  

公安局备案号:浙公网安备33038302330469号

本站为C2C交文档易平台,即用户上传的文档直接卖给下载用户,本站只是网络服务中间平台,所有原创文档下载所得归上传人所有,若您发现上传作品侵犯了您的权利,请立刻联系网站客服并提供证据,平台将在3个工作日内予以改正。