运用HTML、CSS设计Web网页——“西式甜品网”图例及代码

小新-杂货铺

已于 2024-07-28 15:18:25 修改

阅读量2.5k

点赞数 15

分类专栏： web 文章标签：前端 html css web

于 2024-05-25 13:04:55 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73646108/article/details/139195701

版权

一、效果展示图

二、设计分析

1.整体效果分析

（1）HTML结构分析

“西式甜品网”首页面从上到下可以分为5个模块

（2）CSS样式分析

页面中的各个模块居中显示，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。

2.头部header模块效果分析

（1）HTML结构分析

“头部”模块整体由一个大盒子<div>进行控制。内部嵌套<img>和<div>分别用来搭建左侧logo和右侧文字内容部分。

（2）CSS样式分析

“头部”模块的宽为980px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。

3.导航及banner模块效果分析

（1）HTML结构分析

“导航”及“banner”模块分别由一个大盒子<div>进行控制。导航内容部分由<span>标签定义，banner图由<img>标签定义。

（2）css样式分析

“导航”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义<span>标签左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。

4.分类classify模块效果分析

（1）HTML结构分析

“产品分类”模块主要由<div>标签定义。

（2）css样式分析

“产品分类”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个分类模块的<div>标签左浮动，并定义相关的文字样式。

5.产品展示show模块效果分析

（1）HTML结构分析

“产品展示”模块主要由<div>标签嵌套<img>标签和<span>标签定义。

（2）样式分析

“产品展示”模块的背景色通栏显示，因此需设置最外层<div>的宽度100%，内部嵌套的<div>宽度为980px，且在页面中居中显示。定义每一个展示模块的<div>标签左浮动，并定义相关的文字样式。

6.版权banquan模块效果分析

（1）HTML结构分析

“版权信息”模块由<div>标签定义。

（2）样式分析

“版权信息”模块的背景图通栏显示，因此需设置最外层<div>的宽度100%，且文字内容居中显示。

三、HTML、CSS代码分模块展示

1. 头部header模块代码

HTML代码：

<!--	header begin!-->
	<div id="header">
		<div class="logo">
			<img src="images/logo.jpg" alt="">	
		</div>			
		<div class="one">
			<span>登录&nbsp;&nbsp;|&nbsp;&nbsp;注册</span>
		</div>
	<

最低0.47元/天解锁文章