返回
html 西式甜品网制作

html 西式甜品网制作

ID：34464844

大小：11.43 MB

页数：14页

时间：2019-03-06

html 西式甜品网制作_第1页
html 西式甜品网制作_第2页
html 西式甜品网制作_第3页
html 西式甜品网制作_第4页
html 西式甜品网制作_第5页
资源描述：

《html 西式甜品网制作》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

2、品网”结构分析（2）CSS样式分析页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。2、页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。13

3、ttp://www.w3.org/1999/xhtml"xml:lang="en">456西式甜品网78标准实用文案12

345
678
91011
121314151617181920在上述代码中，通过给div

5、添加不同的类名来定义页面中的各个模块。3、定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.html文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：/*重置浏览器的默认样式*/*{margin:0;padding:0;border:0;background:none;}/*全局控制*/body{font-family:"微软雅黑";font

6、-size:16px;}三、案例制作1、制作头部模块（1）HTML结构分析“头部”模块整体由一个大盒子

进行控制。内部嵌套和
分别用来搭建左侧logo和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。标准实用文案图4-1“头部”模块结构图（2）样式分析“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。（3）搭建结构在index04.html文件内书写“头部”模块的HTML结构代码。具体如下

7、：1234登录

8、注册

5
6（4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下：1.head{2width:980px;3height:80px;4margin:0auto;5position:relative;6}7.

9、logo{8position:absolute;9left:100px;10top:15px;11}12.login{13position:absol

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。