admin 管理员组文章数量: 1184232
2024年4月24日发(作者：rpcbind服务默认端口)
“西式甜品网”首页面制作
一、案例描述
1、考核知识点
➢ 盒子模型
➢ 元素的浮动与定位
2、练习目标
➢ 掌握盒子的相关属性。
➢ 掌握元素的浮动与定位。
3、需求分析
盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构
更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。
4、案例展示
效果如图4-1所示。
1
图4-1
“西式甜品网”效果展示
二、布局及定义基础样式
1、效果分析
（1）HTML结构分析
2
“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。
头部
导航及banner
产品分类
产品展示
版权信息
图4-2
“西式甜品网”结构分析
（2）CSS样式分析
页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字
体大小为16px，这些可以通过CSS公共样式进行定义。
3
2、页面布局
新建文件，在文件内书写HTML结构代码，具体代码如下。
1
2 "/TR/xhtml1/DTD/">
3
4
5
6
7
8
9
10
11
4
12
13
14
15
16
17
18
19
20
21
22
23
24
5
25
26
27
28
在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。
3、定义公共样式
为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首
先要做的就是对CSS样式进行初始化并声明一些通用的样式。在文件所在的文件夹内
新建css文件夹用于存放样式表文件，使用链入式引入样式表文件。然后定义页面的基础
样式，具体如下：
/*重置浏览器的默认样式*/
*{margin:0; padding:0;border:0; background:none;}
/*全局控制*/
body{font-family:"微软雅黑";font-size:16px;}
6
三、案例制作
1、制作头部模块
（1）HTML结构分析
“头部”模块整体由一个大盒子
logo和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。
图4-3
“头部”模块结构图
（2）样式分析
“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左
侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。
（3）搭建结构
在文件内书写“头部”模块的HTML结构代码。具体如下：
1
7
2
3
4
5
6
（4）定义样式
在样式表文件中书写CSS样式代码，用于控制“头部”模块。具体如下：
1 .head{
2 width:980px;
3 height:80px;
4 margin:0 auto;
5 position: relative;
6 }
8
7 .logo{
8 position: absolute;
9 left:100px;
10 top:15px;
11 }
12 .login{
13 position: absolute;
14 right:100px;
15 top:34px;
16 color:#ff9c00;
17 cursor: pointer;
18 font-size: 18px;
19 }
9
上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。
保存与文件，刷新页面，效果如图4-4所示。
“头部”模块效果图
图4-4
2、制作导航及banner模块
（1）HTML结构分析
“导航”及“banner”模块分别由一个大盒子
义，banner图由标记定义。“导航”及“banner”模块的具体结构如图4-5所示。
10
图4-5
“导航”及“banner”模块结构图
（2）样式分析
“导航”模块的背景色通栏显示，因此需设置最外层
度为980px，且在页面中居中显示。定义标记左浮动，并定义相关的文字样式。最后还需设
置“banner”模块的图片在页面中居中显示。
（3）搭建结构
在文件内书写“导航”及“banner”模块的HTML结构代码。具体如下：
1
2
11
12
13
14
（4）定义样式
在样式表文件中书写CSS样式代码，用于控制“导航”及“banner”模块。具体如
下：
1 .nav{
2 width:100%;
3 height:50px;
12
4 background: #ff9c00;
5 }
6 .nav_in{
7 width:820px;
8 margin:0 auto;
9 line-height: 50px;
10 color:#fff;
11 padding-left: 160px;
12 }
13 .nav_in span{
14 float: left;
15 padding:0 38px;
16 color:#9c5132;
13
17 cursor: pointer;
18 }
19 .banner {text-align: center;}
上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显
示。
保存与文件，刷新页面，效果如图4-6所示。
“导航”及“banner”模块效果图
图4-6
3、制作产品分类模块
（1）HTML结构分析
14
“产品分类”模块主要由
“产品分类”模块结构图
图4-7
（2）样式分析
“产品分类”模块的背景色通栏显示，因此需设置最外层
宽度为980px，且在页面中居中显示。定义每一个分类模块的
样式。
（3）搭建结构
在文件内书写“产品分类”模块的HTML结构代码。具体如下：
1
2
3
15
4
5
6
7
8
9
10
11
（4）定义样式
在样式表文件中书写CSS样式代码，用于控制“产品分类”模块。具体如下：
1 .list{
2 width:100%;
3 height:240px;
16
4 background: #e7bf80;
5 }
6 .list .list_in{
7 width:940px;
8 height:195px;
9 margin:0 auto;
10 padding:45px 0 0 40px;
11 }
12 .list .list_in div{
13 float: left;
14 width:146px;
15 height:55px;
16 padding-top: 95px;
17
17 margin-right: 42px;
18 background: url(../images/) no-repeat;
19 text-align: center;
20 color:#9c5132;
21 }
22 .list .list_in .list2{background: url(../images/) no-repeat;}
23 .list .list_in .list3{background: url(../images/) no-repeat;}
24 .list .list_in .list4{background: url(../images/) no-repeat;}
25 .list .list_in .list5{background: url(../images/) no-repeat;}
上述代码中，第22-25行代码用于分别设置各个分类模块的背景图片。
保存与文件，刷新页面，效果如图4-8所示。
18
“产品分类”模块效果图
图4-8
4、制作产品展示模块
（1）HTML结构分析
“产品展示”模块主要由
体结构如图4-9所示。
19
图4-9
“产品展示”模块结构图
（2）样式分析
“产品展示”模块的背景色通栏显示，因此需设置最外层
宽度为980px，且在页面中居中显示。定义每一个展示模块的
样式。
（3）搭建结构
在文件内书写“产品展示”模块的HTML结构代码。具体如下：
20
1
2
3
4
5
6 爱的N次方
7 马卡龙
8 价格：30元
9
10
11
12 果肉果冻
13 双色马卡龙
21
14 价格：30元
15
16
17
18 芒果味
19 布丁马卡龙
20 价格：30元
21
22
23
24 果冻荔枝味
25 多彩马卡龙
26 价格：30元
22
27
28
29
30 果味巧克力
31 西式甜点
32 价格：30元
33
34
35
36 奶油水果
37 提拉米苏
38 价格：30元
39
23
40
41
42 玫瑰花型
43 布丁
44 价格：30元
45
46
47
48 燕麦奶油
49 芝士蛋糕
50 价格：30元
51
52
24
53
54
（4）定义样式
在样式表文件中书写CSS样式代码，用于控制“产品展示”模块。具体如下：
1 .content{
2 width:100%;
3 height:570px;
4 background: #f8f5bc;
5 }
6 .con{
7 width:912px;
8 height:530px;
9 margin:0 auto;
25
10 padding:40px 0 0 68px;
11 }
12 .con .con_type{
13 width:180px;
14 height:220px;
15 border:1px solid #ccc;
16 float: left;
17 background: #fff;
18 margin:0 39px 30px 0;
19 font-size: 14px;
20 color:#9c5132;
21 }
22 .con .con_type span{
26
23 display: block;
24 padding:2px 0 0 16px;
25 }
26 .con .con_type _name{color:#fd8187;}
27 .con .con_type span b{
28 font-weight: normal;
29 color:#fd8187;
30 }
31 .con .con_type img{
32 margin:12px 12px 3px 12px;
33 width:158px;
34 height:122px;
35 }
27
上述代码中，第23行代码将标记转换为块元素用于换行显示文字内容。
保存与文件，刷新页面，效果如图4-10所示。
图4-10
“产品展示”模块效果图
5、制作版权信息模块
（1）HTML结构分析
“版权信息”模块由
28
图4-11
“版权信息”模块结构图
（2）样式分析
“版权信息”模块的背景图通栏显示，因此需设置最外层
显示。
（3）搭建结构
在文件内书写“版权信息”模块的HTML结构代码。具体如下：
1
2
3
（4）定义样式
在样式表文件中书写CSS样式代码，用于控制“版权信息”模块。具体如下：
29
1 .footer{
2 position: relative;
3 top:-8px;
4 width:100%;
5 height:120px;
6 background: url(../images/) repeat-x;
7 text-align: center;
8 line-height: 120px;
9 color:#fff;
10 font-size: 18px;
11 }
上述代码中，第6行代码用于设置背景图沿X轴平铺。
保存与文件，刷新页面，效果如图4-12所示。
30
图4-12
“版权信息”模块效果图
31
版权声明：本文标题：html 西式甜品网制作 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1713947951a659049.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
Macbook 显示隐藏的文件文件夹_mac显示隐藏文件夹
前言 使用命令行的方式显示隐藏文件。提示：以下是本篇文章正文内容，下面案例可供参考一、mac显示隐藏文件 在终端输入 defaults write com.apple.finder Apple
来看看这些电脑清理内存的方法_如何清理电脑垃圾 csdn
随着电脑使用时间的增加，你有没有发现电脑用得越多反应越慢？如果你遇到这个问题，可以试试这几个优化设置，让你的电脑速度起死回生！方法一：删除临时文件 按键盘上的Win R，在对话框中输入【%temp%】-【确定】，弹
《英雄联盟》游戏闪退弹窗“找不到d3dcompiler 47.dll”该如何应对？LOL英雄联盟游戏崩溃提示“缺失d3dcompiler 47.dll文件”的处理妙招
当游戏因“找不到d3dcompiler_47.dll”而崩溃时，一种方法是重新安装DirectX组件，因为该文件是DirectX的一部分。也可以从可靠的网站下载该文件，然后放置到系统相应目录中。还可以通过更新显卡驱动来尝试解决，因为显
修复隐藏文件显示问题
找到HKEY_LOCAL_MACHINESoftwareMicrosoftWindowsCurrentVersionexplorerAdvancedFolderHiddenSHOWALL分支，在右边的窗口
隐藏文件无法显示的解决方法_修改注册表windows隐藏文件无法显示
Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINESoftwareMicrosoftWindowsCurrentVersionexplorerAdvance
把VOB格式转换成其它格式的工具_vob转mepg2
把VOB格式转换成其它格式的工具很多朋友都想直接把手中的DVD直接转压成rmvb，方法有很多，现在介绍一种比较简单的方法。以下方法可以从DVD的VOB文件直接转RM，中间没有经过其它的文件格式，所以得到的RM流文件的质量比较高，
电脑无法打开Excel文件怎么办？_excel系统配置不能运行
修复Windows电脑无法打开Excel文件的七种方法 如何修复电脑打不开Excel文件的问题？有七种可行的方法供你参考。 方法1. 更改错误的文件扩展名 如前所述，XLS和XLSX都是Excel程序的扩展。2
用autorun.inf文件夹预防autorun病毒_计算机autorun label= demo
现在很多病毒都会在磁盘分区下释放相应的病毒文件和autorun.inf文件，如图1： （图1） 类似熊猫烧香的玉兔病毒就采用了这种方法，导致中毒用户双击盘符会触发该病毒，我们除了通常要用资源管理器左边的文件
autorun.inf病毒手动删除方法_手动删除autorun
中毒症状: 1.每个盘的盘符下有autorun.inf 和相应的病毒文件,通常通过移动存储来转播,双击或右键打开均会中毒, 2.杀毒软件,系统维护的工具,均无法打开,无论是卡巴也好,咖啡也好,瑞星也好,Sreng、aut
EasyRecovery数据恢复软件教学视频，从零开始，助你轻松掌握数据保护
1.介绍 EasyRecovery 是一款操作安全、价格便宜、用户自主操作的数据恢复软件，它支持从各种各样的存储介质恢复删除或者丢失的文件，其支持的媒体介质包括：硬盘驱动器、光驱、闪存、硬盘、光盘、U盘移动硬盘、数码相机、手
EasyRecovery实战指南：从新手到高手，Windows文件恢复轻松搞定！
简介：EasyRecovery是一款为Windows用户打造的高效文件恢复工具，可轻松找回误删除或丢失的重要数据。软件操作简便，界面直观，适合所有层次的用户使用。其核心功能包括深度扫描未实际删除的文件、支持多种文件格式恢复，并提供文件
**从PowerDVD到图片：你的电影截图攻略**
方法一： Windows Media Player10 首先介绍，最简单的视频截图方法。Media Player10是常用的视频播放器，也可以视频截图。我们在播放电影的过程中，遇到想截取的图片，只需按下【“Ctrl＋I”
Windows10与笔记本配合时函数紊乱？轻松搞定指南
笔记本Windows10函数不正确？这里有解决方法在Windows10操作系统的使用过程中，许多笔记本电脑用户可能会遇到“函数不正确”的错误提示，这不仅影响了用户的正常使用，还可能导致一些关键功能无法正常运行。面对这种情
WPCAP.dll不见了？别担心，这里有轻松解决办法！
在计算机使用过程中，不少用户可能会遇到wpcap.dll文件丢失的问题，这通常会导致依赖于该文件的应用程序无法正常运行，如Wireshark网络封包分析器等。wpcap.dll是WinPcap套件的一部分，该套件为Windows操作系
Win7系统下的wpcap.dll找不到了？快速修复方法分享
wpcap.dll作为WinPcap组件之一，在Windows 7 32位系统中扮演着核心角色，专门用于实现网络数据包的捕获功能。该动态链接库的缺失，可能会直接影响到系统中网络监控及分析软件的正常运作，进而妨碍到网络安全监控与系统性能
游戏无法打开？可能只是因为少了一个WPCAP.dll！
方法一：下载一个everything，用everything搜索一下本地是否有wpcap.dll，可能是因为存在的目录位置不对，而导致找不到。这种请况就将对应dll文件拷贝到目标目录下，将wpcap.dll复制到C：WindowsS
狂怒2"启动失败？wpcap.dll问题轻松修复，告别卡顿！
在启动《狂怒2》时遇到 wpcap.dll丢失的问题，可能会让玩家感到困扰。不过，通过以下几个步骤，您可以快速解决这一问题，恢复游戏的正常运行。 一、了解wpcap.dll文件wpcap.d
在DirectShow编程中探索DX9.0的SWF奥秘，从新手到专家
本来就很想自己做个媒体播放器来耍耍，可惜一直没有机会。这次突然有机会接触到个跟视频流打交道的程序。欣喜若狂的开始，却被将近一周的配置DirectShow环境给击倒了。好，言归正题，方便其他人不要再绕很远的路。 首先是SDK的问
掌握C#中的SWF压缩与解压缩，优化Flash应用效率
【【【【C#压缩文件】】】】方法1：【filepath想要压缩文件的地址】【zippath输出压缩文件的地址】private void GetFileToZip(string f
DISM++：你的Flash播放问题终结者，提升性能
简介：DISM++是一款全方位的电脑维护软件，提供深度扫描和清理功能，专为优化个人计算机而设计。它能够高效清除各种系统垃圾和无用文件，释放硬盘空间，并通过系统清理、优化、备份和恢复功能提高电脑的运行速度和性能。该软件还支持多语言界面，
发表评论