html西式甜品网制作

1、文档，式甜品网”首页面制作1、令核如iRj藏 盒子棋弦 元素的浮动与定位2、练习目标 掌握盒子的相关届性C 掌握元素的浮动与定位。3、册灰分析盒子棋型这样的布局方式代替了传统的农格布局，同时结合元素的浮动与定位可使网页的结构更加 多样化. 通过学习本案例可以使初学者进一步的巩固盒子棋型和元素的浮动与定位等相关知识点。4、案例展乐效果如图4-1所示文档翻B品阿扳权所有2000201竦ICPgW01421京公网安备UO1G0OO77O2S4-1“西式甜品网”效果展示、布局及定文基础样式效果分析(1) HTML结枸分析“西式甜品网”首页面从上到下可以分为5个棋块，如图42所示文档头部4FUIS忡催!

2、一1绝1产品展示D!CWIW “lMKc2版权信息80OZ7024-2“西式甜品网”结构分析(2) CSS禅式分析页面中的各个棋块居中显示. 页面的版心为980pxo 另外，页面中的所有字体均为微软雅黑. 字体大 小为16px,这些可以通过CSS公共样式进行定义新廷mdex04.html文件，在mdex04.html文件书写HTML结构代码，具体代码如下。1 VDOCTYPE htnil PUBLIC ,-/W3C/7DTD XHTML 1.0 Transitional-7ENH2 :TR/xhtmH/DTD，xhunlltKms”KnaLdKr、3 4 5 6 西式甜品网7 8

3、9 文档10111213div class-navX/dix1415161718!-list begin19div class-UisCX/dh202122div class-contentx/dh2324!-footei begin25262728Vhtml在上述代码中，通过给div添加不同的类名来定义页面中的各个棋块。3、宠义公共样式为了淸除各浏览器的默认样式. 使得网页在各浏览器中显示的效果一致.在完成页面布局后，首先要 做的詆是对CSS样式进行初始化并卢明一些通用的样式 在 mdex04.html文件所在的文件夹新理css文件 夹用于存放样式农文件style04.csst 使用徴入式引

4、入样式农文件 然后定义页面的基础样式，其体如下：/ffl-ja.浏览器的默认样式 审*margm:O; padding:0;bordei:0; background:none;八全局垃制*/body font-family:软雅療”;fbntsize:16px;三、案例制作1、制作头部棋块(1) HTML鉉枸分析“头郃” 棋块拴体由一个大盒子div进行控制 郃眾奈cimg和div分别用来搭琨左側logo和右侧 文字容郃分。“头郃” 棋块的其体结构如图4-3所示文档 图43“头郃”棋块结构图(2) 禅式分析“头郃”棋块的宽为980px,通过设址外边距厲性使其在页面中居中显示.并设相对定位。左側l

5、ogo 和右侧文字容部分相对外层大盒子设堂绝对定位.最后还需设宜文字的相关样式等(3) 播构在 mdex04.html文件书写“头郃”棋块的HTML结构代码具体如下：1 2 3 4 | t册5 6 (4) 定九样式在样式农文件style04.css中书写CSS样式代码.用于控制“头部”棋块 其体如下：1.head2width:980px;3height :80px;4maigin:0 auto;5position: relative;67logo8position: absolute;9leftlOOpx：10top:15px;1112logm13position: absolute;14ri

6、ght: lOOpx;15top:34px;16color:#ff9c00;17cursor: pointer;18font-size: 18px:19上述代码中. 第4行代码用于设堂“头郃”棋块在页面中居中显示保存 mdex04.html与stvle04.css文件，刷新页面.效果如图4-4所示。文档S4-4“头郃”棋块效果图2、制及banner棋块(1) HTML结枪分析“导航” 及 “banner” 棋块分别由一个大盒子div进行控制 导航容部分由vspan标记定义.banner 图由iing标记定义“导航” 及“banner” 棋块的其体结构如图4-5所示图45“导航”及“bann”棋

7、块结构图(2) 禅式分析“导航”棋块的背奈色通栏显示，因此需设堂衆外层div的宽度100%.部嵌套的div宽度为980px. 且在页面中居中显示 定义span标记左浮动. 并定义相关的文字样式。最后还鶴徴XL “bannei” 棋块的 图片在页面中居中显示C(3) IMMMe在mdex04.html文件书写“导航”及“banner”棋块的HTML结构代码其体如下：1!nav begin234Sr 页 5 公司 简介 6美贷 甜品 Vspan7/n 户 W78联系我们9101112文档13 14 （4）定义样戒在样式农文件style04.css中书写CSS样式代码.用于控制“导航”及abaime

8、rv棋块 具体如下：1.nav2width: 100%;3height :50px;4backgiound: #ff9c00;56.nav_in7width: 820px;8maigin:0 auto;9line-height: 50px;10color:#fff;11padding-left: 160px;1213.nav_in span14float: left;15padding:0 38px:16color:#9c5132;17cursor: pointer;1819.banner text-align: center;上述代码中. 第8行和第19行代码分别用于诛导航容郃分利bamie

9、r图片在页面中居中显示。 保存 mdex04.html与style04.css文件.刷新页面.效果如图4-6所示。图46“导航”及“bann”棋块效果图(1) HTML结柚分析文档“产品分类” 棋块主要由div标记定义。“产品分类” 棋块的具体结构如图47所示。图47“产品分类”棋块结构图(2)样戒金析“产品分类” 棋块的背余色通栏显示，因此需设JX衆外层div的宽度100%, 部嵌套的div3&度为980px. 且在页面中居中显示 定义每一个分类棋块的div标记左浮动. 并定义相关的文字样式(3)在 mdex04.html文件书写“产品分类”棋块的HTML结构代码其体如下：1!-list b

10、egin234div class-listrift 拉米苏 5frtt,ffl6 芝士歪糕 7 马卡九 Vdiv8 西式甜 A91011(4)宠艾桦式在样式农文件style04.css中书写CSS样式代码，用于控制“产品分类”棋块 其体如下：1list2width: 100%;3height:240px;4background: #e7bf8O;56list .list_m7width:940px;8height: 195px;9maigin:0 auto;10padding:45px 0 0 40px;1112list .list_m div13float: left;文档width: 14

11、6px;height:55px;padding-top: 95px;margin-right: 42px;background: url(./images/listl png) no-repeat;text-align: center;color:#9c5132;list list_mist2background: ur 1(./unageszlist2 png) no-repeat;list list_m ,list3background: u【l(./images/list3.png) no-repeat;list list_m ,list4background: u【l(./images

12、/list4.png) no-repeat;list list_m listSbackground: u【l(./images/list5.png) no-repeat;上述代码中. 第22-25行代码用于分别设JX各个分类棋块的背母图片c 保存 mdex04.html与style04.css文件.刷新页面.效果如图4-8所示。图4-8“产品分类” 棋块效果图制作严品艮示棋块“产品展示”棋块主要由div标记嵌套mg标记和span标记定义 “产品展示”棋块的具体结构141516171819202122232425农如图4-9所示文档Jgk M A1-f卑冻亘咬眛价裕：汇；一亠- - -vspa

13、n 价恪：2三味巧克ZJ价悟：/7T-奶?由水杲亠vspanWg型 Tj瞬：30亓-vspa n- 图49“产品展示”棋块结构图（2）样式分析“产品展示”棋块的背余色通栏显示，因此需设堂最外层的宽度100%,部嵌套的宽度为 980pxt 且在页面中居中显示 定义毎一个展示棋块的标记左浮动. 并定义相关的文字样式（3）播枪在 mdex04.html文件书写“产品展示”棋块的HTML结构代码其体如下：1 2 3 4 5 6 St&5 N 次方7 马卡龙 8 价格：30 3t9 10 11 12 果肉 果冻 13 双色马卡龙 14 价格：30 3t15 16171819202122232425262

14、728293031323334353637383940414243444546474849505152535412文档芒果味 布丁马卡九 价格：30 元cspann果冻荔枝 味 彩马卡 t价格：30 元cspann果 味巧克力 西式甜点 价格：30 元 奶油水 果 拉米 苏 价格：30 元 玫瑰花 31span class-”con_name怜布丁 价格：30 元 救気 奶油 -3rM价格：30 元（4）定义样戒，在样式农文件style04.css中书写CSS样式代码.用于控制“产品展示”棋块。其体如下： contentwidth: 100%;height:570px:文档backgiound

15、: #fSf5bc;conwidth:912px;height:530px;margin:0 auto;padding:40px 0 0 68px：con .con_typewidth: 180px;height:220px;border: lpx solid #ccc;float: left;backgiound: #fff:maigin:0 39px 30px 0:font-size: 14px:color:#9c5132;con .con_type spandisplay: block;padding:2px 0 0 16px;con .con_type span.con_namecol

16、or:#fd8187;con .con_type span bfont-weight: normal;color:#fd8187;con .con_type iingmaigin:12px 12px 3px 12px;width: 158px;height: 122px;上述代码中，第23行代码将span标记转换为块元素用于换行显示文字容4567891011121314151617181920212223242526272829303132333435保存 mdex04.html与stvle04.css文件，刷新页面.效果如图4-10所示文档图410 “产品展示”棋块效果图(1) HTML结枸

17、分析“信息” 棋块由标记定义。具体结构如图4-11所示c西式甜品网版权所有2000-2016京ICP备080014、网安备 110108007702S4-11 “信息”棋块结构图(2) 样式分析“信息” 棋块的背母图通栏显示，因此需设Jtt衆外层vdiv的宽度100%, 且文字容居中显示(3) 播枪在 mdex04.html文件书写“信息”棋块的HTML结构代码。具体如下：1 !-fboter begin2 西式甜品网所有 2000-2016 京 ICP 备 08001421 号 : 京公网安备 1101080077023 (4) 宅义禅式在样式农文件style04.css中书写CSS样式代码.用于控制“借息”棋块 其体如下：1