版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
“西式甜品网”首页面制作―、案例描述1、考核知识点＞盒子模型＞元素的浮动与定位2、练习目标＞掌握盒子的相关属性。＞掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图4-1所示。
四式在访物RJ叫田甜削M如1肯耳!由原辛图4-1“西式甜品网”效果展示二、布局及定义基础样式1、效果分析四式在访物RJ叫田甜削M如1肯耳!由原辛图4-1“西式甜品网”效果展示(1)HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。
图4-2“西式甜品网”结构分析(2)CSS样式分析页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。2、页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"xml:lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>西式甜品网</title></head><body><!--headbegin--><divclass="head"></div><!--headend--><!--navbegin--><divclass="nav"></div><!--navend--><!--bannerbegin--><divclass="banner"></div><!--bannerend--><!--listbegin--><divclass="list"></div><!--listend--><!--contentbegin--><divclass="content"></div><!--contentend--><!--footerbegin--><divclass="footer"></div><!--footerend--></body></html>在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下:/*重置浏览器的默认样式*/*{margin:0;padding:0;border:0;background:none;}/*全局控制*/body{font-family:"微软雅黑";font-size:16px;}三、案例制作1、制作头部模块（1）HTML结构分析“头部”模块整体由一个大盒子＜div＞进行控制。内部嵌套＜img＞和＜血＞分别用来搭建左侧logo和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。<span><span>图4-3“头部”模块结构图样式分析“头部”模块的宽为980px,通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。搭建结构在index04.html文件内书写“头部”模块的HTML结构代码。具体如下：<!--headbegin--><divclass="head"><imgclass="logo"src="images/logo.jpg"/><divclass="login"><span>登录</span>|<span>注册</span></div></div><!--headend-->（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下:.head{width:980px;height:80px;margin:0auto;position:relative;}.logo{position:absolute;left:100px;top:15px;}.login{position:absolute;right:100px;top:34px;color:#ff9c00;cursor:pointer;font-size:18px;}上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。图4-4“头部”模块效果图2、制作导航及banner模块（1）HTML结构分析“导航”及“banner”模块分别由一个大盒子<div>进行控制。导航内容部分由<span>标记定义，banner图由<img>标记定义。“导航”及“banner”模块的具体结构如图4-5所示。（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外层<血>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定^<span>标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。（3）搭建结构在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。具体如下：<!--navbegin--><divclass="nav"><divclass="nav_in"><span>首页</span><span>公司简介</span><span>美食甜品</span><span>用户留W</span><spanclass="last">联系我们</span></div></div>6网址：yx+boxueguxonn播妞QQ/微信：203695827<!--navend--><!--bannerbegin--><divclass="banner"><imgsrc="images/banner.jpg"/></div><!--bannerend-->定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模块。具体如下:.nav{width:100%;height:50px;background:#ff9c00;}.nav_in{width:820px;margin:0auto;line-height:50px;color:#fff;padding-left:160px;}.nav_inspan{float:left;padding:038px;color:#9c5132;cursor:pointer;}.banner{text-align:center;}上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-6所示。图4-6“导航”及“banner”模块效果图3、制作产品分类模块（1）HTML结构分析“产品分类”模块主要由<div>标记定义。“产品分类”模块的具体结构如图4-7所示。图4-7“产品分类”模块结构图（2）样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层<血>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个分类模块的<div>标记左浮动，并定义相关的文字样式。（3）搭建结构在index04.html文件内书写“产品分类”模块的HTML结构代码。具体如下：<!--listbegin--><divclass="list"><divclass="list_in"><divclass="list1">提拉米苏</div><divclass="list2">甜甜圈</div><divclass="list3">^士蛋糕</div><divclass="list4">马卡龙</div><divclass="list5">西式甜点</div></div></div><!--listend-->（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品分类”模块。具体如下：.list{width:100%;height:240px;background:#e7bf80;}.list.list_in{width:940px;height:195px;margin:0auto;padding:45px0040px;}.list.list_indiv{float:left;width:146px;height:55px;padding-top:95px;margin-right:42px;background:url(../images/list1.png)no-repeat;text-align:center;color:#9c5132;}.list.list_in.list2{background:url(../images/list2.png)no-repeat;}.list.list_in.list3{background:url(../images/list3.png)no-repeat;}.list.list_in.list4{background:url(../images/list4.png)no-repeat;}.list.list_in.list5{background:url(../images/list5.png)no-repeat;}上述代码中，第22-25行代码用于分别设置各个分类模块的背景图片。保存index04.html与style04.css文件，刷新页面，效果如图4-8所示。图4-8“产品分类”模块效果图4、制作产品展示模块（1）HTML结构分析“产品展示”模块主要由＜div＞标记嵌套＜img＞标记和＜span＞标记定义。“产品展示”模块的具体结构如图4-9所示。
<div><div><div><div><div><div><div><div><div><div>图4-9<div><div><div><div><div><div><div><div><div><div>（2）样式分析“产品展示”模块的背景色通栏显示，因此需设置最外层<血>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个展示模块的<div>标记左浮动，并定义相关的文字样式。（3）搭建结构在index04.html文件内书写“产品展示”模块的HTML结构代码。具体如下：<!--contentbegin--><divclass="content"><divclass="con"><divclass="con_type"><imgsrc="images/con1.jpg"/><span>爱的N次方</span><spanclass="con_name">马卡龙</span><span>价格：<b>30元</b></span></div><divclass="con_type"><imgsrc="images/con2.jpg"/><span>果肉果冻</span><spanclass="con_name">双色马卡龙</span><span>价格：<b>30元</b></span>1015</div>161718192021<divclass="con_type"><imgsrc="images/con3.jpg"/><span>芒果味</span><spanclass="con_name">布丁马卡龙</span><span>价格：<b>30元</b></span></div>2223252627<divclass="con_type"><imgsrc="images/con4.jpg"/><span>果冻荔枝味</span><spanclass="con_name">多彩马卡龙</span><span>价格：<b>30元</b></span></div>282930313233<divclass="con_type"><imgsrc="images/con5.jpg"/><span>果味巧克力</span><spanclass="con_name">西式甜点</span><span>价格：<b>30元</b></span></div>343536373839<divclass="con_type"><imgsrc="images/con6.jpg"/><span>奶油水果</span><spanclass="con_name">提拉米苏</span><span>价格：<b>30元</b></span></div>404142434445<divclass="con_type"><imgsrc="images/con7.jpg"/><span>玫瑰花型</span><spanclass="con_name">布丁</span><span>价格：<b>30元</b></span></div>4748<divclass="con_type"><imgsrc="images/con8.jpg"/><span>燕麦奶油</span>495051<spanclass="con_name">^士蛋糕</span><span>价格：<b>30元</b></span></div>52</div>53</div>54<!--contentend-->（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品展示”模块。具体如下:1.content{1134567891011121314151617181920212223242526272829303132333435width:100%;height:570px;background:#f8f5bc;}.con{width:912px;height:530px;margin:0auto;padding:40px0068px;}.con.con_type{width:180px;height:220px;border:1pxsolid#ccc;float:left;background:#fff;margin:039px30px0;font-size:14px;color:#9c5132;}.con.con_typespan{display:block;padding:2px0016px;}.con.con_typespan.con_name{color:#fd8187;}.con.con_typespanb{font-weight:normal;color:#fd8187;}.con.con_typeimg{margin:12px12px3px12px;width:158px;height:122px;}上述代码中，第23行代码将＜span＞标记转换为块元素用于换行显示文字内容。保存index04.html与
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025至2030年中国可伸缩皮带机数据监测研究报告
- 2025至2030年中国口服液糖浆合剂数据监测研究报告
- 2025至2030年中国卧式快装燃油燃气常压锅炉数据监测研究报告
- 2025至2030年中国刚性纸板数据监测研究报告
- 2025年车库门滚轮项目可行性研究报告
- 2025年矿用皮带机综合保护监控装置项目可行性研究报告
- 《金融市场par》课件
- 二年级数学计算题专项练习集锦
- 四年级数学(除数是两位数)计算题专项练习及答案
- 二年级数学计算题专项练习1000题汇编
- 品牌策划与推广-项目5-品牌推广课件
- 信息学奥赛-计算机基础知识(完整版)资料
- 发烟硫酸（CAS：8014-95-7）理化性质及危险特性表
- 数字信号处理(课件)
- 公路自然灾害防治对策课件
- 信息简报通用模板
- 社会组织管理概论全套ppt课件(完整版)
- 火灾报警应急处置程序流程图
- 耳鸣中医临床路径
- 安徽身份证号码前6位
- 分子生物学在动物遗传育种方面的应用
评论
0/150
提交评论