“西式甜品网”首页面制作

一、案例描述

1、考核知识点

盒子模型

元素的浮动与定位

2、练习目标

掌握盒子的相关属性。

掌握元素的浮动与定位。

3、需求分析

盒子模型这样的布局方式代替了传统的表格布局,同时结合元素的浮动与定位,可使网页的结构更加

多样化,通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。

4 、案例展示

效果如图 4-1 所示。

1

图4-1 “西式甜品网”效果展示

二、布局及定义基础样式

1、效果分析

(1)HTML结构分析

“西式甜品网”首页面从上到下可以分为 5 个模块,如图 4-2 所示。

2

头部

导航及 banner

产品分类

产品展示

版权信息

图4-2 “西式甜品网”结构分析

(2 )CSS样式分析

页面中的各个模块居中显示,页面的版心为 980px 。另外,页面中的所有字体均为微软雅黑,字体大

小为 16px,这些可以通过 CSS公共样式进行定义。

2、页面布局

新建 index04.html 文件,在 index04.html 文件内书写 HTML结构代码,具体代码如下。

1 /p>

2 "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3

4

5

6

西式甜品网

7

8

3

9

10

11

12

13

用html做一个15页的页面,html西式甜品网制作(15页)-原创力文档相关推荐

  1. html做一个甜品登录注册页面,html西式甜品网制作.docx

    PAGE PAGE # / 13 西式甜品网"首页面制作 .案例描述 1.考核知识点 ? 盒子模型 ? 元素的浮动与定位 2.练习目标 ? 掌握盒子的相关属性. ? 掌握元素的浮动与定位. ...

  2. 安徽省计算机文化基础试题及答案,计算机文化基础填空题及答案分析(6页)-原创力文档...

    第 第 PAGE #页共6页 第 第 PAGE #页共6页 <计算机文化基础>填空题 TOC \o "1-5" \h \z 计算机病毒实际上是一种特殊的 . 计算机是由 ...

  3. 计算机运用基础2020四川传媒学院考题,2020年计算机基础考试题EY[含答案](15页)-原创力文档...

    2020 年计算机基础考试题 [含答案 ] 学校: __________ 姓名: __________ 班级: __________ 考号: __________ 一.单选题 1.IP 地址是一串很难 ...

  4. 模仿下列程序自己打印一个趣味图案c语言,趣味程序导学C语言(28页)-原创力文档...

    C 趣味程序导学 语言 (请到附件里下载源代码与课件) 电脑游戏,一个熟悉而诱人的字眼,常常不经意地浮现在我们的脑海当中. 有梦幻神奇的 <传奇>,有惊险刺激的 <反恐精英>, ...

  5. html新闻网页包括主页面,工作报告之html网页制作实验报告(8页)-原创力文档...

    html网页制作实验报告 [篇一:html实验报告] 武夷学院实验报告 课程名称:电子商务网站设计与开发_ 项目名称:_基于html的网页设计 姓名:林元卿专业:旅游管理 班级:3班学号:201360 ...

  6. 2 一个完整的计算机系统包括,一个完整的计算机系统包括(19页)-原创力文档...

    PAGE 一. 1). 一个完整的计算机系统包括 A). 主机.键盘和显示器 B). 计算机与外部设置 C). 硬件系统和软件系统 D). 系统软件与应用软件 2). 在多媒体计算机系统中,CD-RO ...

  7. html的详情页面设计,HTML5+CSS3网页设计与制作实用教程 单元7 网页特效与制作商品详情页面(105页)-原创力文档...

    单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter's introduction 将JavaScript 程序嵌入HTML 代码中,对网页元素进行 ...

  8. 2013年上半年全国高等学校(安徽考区)计算机水平考试试卷,2013年上半年全国高等学校(安徽考区)计算机水平考试试卷(6页)-原创力文档...

    试卷代号 252 机密★启用前 滂 2013年上半年全国高等学校(安徽考区) 计算机水平考试试卷 (二级Visual FoxPro 6.0程序设计) 考生须知: ′ 1.请将准考证号末两位填在试卷第2 ...

  9. 审计计算机考试报名,审计业务考试计算机(5页)-原创力文档

    审计业务考试计算机 审计业务考试计算机试题(笔试答案) 一.单选题(共 20 小题,每小题 1 分) 1. 在 Windows 中,当程序因某种原因陷入死循环,下列哪一个方法能较好地结束该 程序( A ...

最新文章

  1. 软件工程需求设计说明书
  2. 网曝某互联网大厂给员工电脑安装插件,基本等于全程监控!网友:就是监控你们划水!...
  3. 图解TCP四次握手断开连接
  4. Http报头Accept与Content-Type的差别
  5. Source insight 支持汇编
  6. 金蝶BOS开发中Edit编辑界面和List叙事薄界面需要写的代码
  7. 装入归档文件时出现了一个错误linux_静态链接与动态链接(Linux)
  8. Exchange2007创建管理收件人
  9. java Redis Jedis存储Java对象 - (Java序列化为byte数组方式)
  10. oracle sequence的用法
  11. c++ 将deque部分元素赋值给vector_《STL源码剖析》学习笔记——序列式容器vector
  12. 【Sublime Text 3】Sublime Text 3 - cracked 3092
  13. python 之简单聊聊类的只读和只写特性
  14. java opencv3轮廓_如何在OpenCV中获得单独的轮廓(并填充它们)?
  15. 百度开源的 71 个项目,太牛逼了!
  16. 直播用的计算机配置,直播吃鸡需要什么配置才行?
  17. 网络工程师的python之路-FTP备份配置文件
  18. springboot和druid的整合
  19. 80老翁谈人生(347):老翁因火星人失窃源代码与方正结成“死结“
  20. 转行做“程序员”很难?这里有几个建议...

热门文章

  1. Android:使用MuPdf开源库阅读PDF文件
  2. 语法长难句-----比较级的特殊用法as专题
  3. 怎样才能上传百度文库,上传百度文库的操作步骤和技巧
  4. linux命令:查看本机IP地址 curl ip.gs
  5. brower simple
  6. Keil编程中Source Brower : P17 is undefined!的问题
  7. 2020-01-19
  8. matlab 电磁兼容,电磁兼容测试报告.doc
  9. 读书笔记之:《新生 七年就是一辈子》李笑来
  10. 初中人教版地理教案四-Leo老师