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

目录

一、效果展示图 

二、设计分析

1.整体效果分析 

2.头部header模块效果分析

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

4.分类classify模块效果分析 

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

6.版权banquan模块效果分析

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

1. 头部header模块代码

2.导航及banner模块代码

3.分类classify模块

4.产品展示show模块代码

5.版权banquan模块代码

四、完整代码

1.HTML代码：

2.CSS代码：

一、效果展示图 

二、设计分析

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></div>
<!--	herder end-->

CSS代码：

#header{width: 980px;height: 80px;margin: 0 center;
/*	position: absolute; 设置绝对定位*/background-color:white;
}.logo{float: left;position: relative; /*设置相对定位*/padding-left: 20px; /*设置内边距*/padding-top: 15px;
}
.one{float: right;text-align: right;padding-right: 30px;padding-top: 35px;position: relative;color: orange;
}

2.导航及banner模块代码

HTML代码： 

<!--	banner begin--><div id="banner"><div class="two"><span>首页</span><span>公司简介</span><span>美食甜品</span><span>用户留言</span><span>联系我们</span></div><div class="imgg"><img src="images/banner.jpg"></div></div>
<!--	banner end-->

CSS代码：

#banner{margin: 0 auto 0;width: 100%;height: 390px;
}
.two{width: 980px;margin: 0 auto;background-color: orange;color:brown;float: left;text-align: center;padding-top: 12px;height: 30px;list-style-type: none;
}
.two span{padding: 0 60px;
}
.imgg img{width: 100%;height: 360px;
}

3.分类classify模块

HTML代码：

<!--	classify begin--><div id="classify"><div class="con"><img src="images/list1.png"><p>提拉米苏</p></div><div class="con"><img src="images/list2.png"><p>甜甜圈</p></div><div class="con"><img src="images/list3.png"><p>芝士蛋糕</p></div><div class="con"><img src="images/list4.png"><p>马卡龙</p></div><div class="con"><img src="images/list5.png"><p>西式甜点</p></div></div>
<!--	classify end-->

CSS代码：

#classify{padding: 20px 0;width:980px;height: 140px;background:wheat;
}
.con{width:173px;height: 196px;float: left;margin-left: 23px;display: inline-block;overflow: hidden;white-space: nowrap;position: relative;
}
.con img{border-radius: 50%;left: 20px;top:0;
/*width: 980px;height: 100px;
*/
}
.con p{
/*	position: absolute;*/width: 250px;height: 50px;z-index: 2;left: 2px;top:90px;color: #e7bf80;margin: 5px 45px;position: absolute;
}

4.产品展示show模块代码

HTML代码：

<!--	show begin--><div id="show"><div class="three"><img src="images/con1.jpg"><span>爱的N次方</span><span class="name">马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con2.jpg"><span>果肉果冻</span><span class="name">双色马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con3.jpg"><span>芒果味</span><span class="name">布丁马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con4.jpg"><span>果冻荔枝味</span><span class="name">多彩马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con5.jpg"><span>果味巧克力</span><span class="name">西式甜点</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con6.jpg"><span>奶油水果</span><span class="name">提拉米苏</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con7.jpg"><span>玫瑰花型</span><span class="name">布丁</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con8.jpg"><span>燕麦奶油</span><span class="name">芝士蛋糕</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div></div>
<!--	show end-->

CSS代码：

#show{width: 100%;height: 580px;background-color:lightgoldenrodyellow;
}
.three{padding: 17px;float: left;
}
.three img{width: 200px;
}
.three span{display: block;color: #865859;
}
.three .name{color: hotpink;
}
.three .huan{display: inline;
}

5.版权banquan模块代码

HTML代码：

<!--	banquan begin--><div id="banquan"><p>西式甜品网版权所有2020-2030京ICP备08001421号 京公网安备110108007702</p></div>
<!--	banquan end-->

CSS代码：

#banquan{width: 100%;text-align: center;height: 100px;background:url("images/footer.png")repeat-x;
}
#banquan p{padding-top: 50px;color: white;
}

四、完整代码

1.HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="实验1.css" type="text/css" rel="stylesheet"/>
<title>西式甜品网</title>
</head><body>
<!--	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></div>
<!--	herder end--><!--	banner begin--><div id="banner"><div class="two"><span>首页</span><span>公司简介</span><span>美食甜品</span><span>用户留言</span><span>联系我们</span></div><div class="imgg"><img src="images/banner.jpg"></div></div>
<!--	banner end--><!--	classify begin--><div id="classify"><div class="con"><img src="images/list1.png"><p>提拉米苏</p></div><div class="con"><img src="images/list2.png"><p>甜甜圈</p></div><div class="con"><img src="images/list3.png"><p>芝士蛋糕</p></div><div class="con"><img src="images/list4.png"><p>马卡龙</p></div><div class="con"><img src="images/list5.png"><p>西式甜点</p></div></div>
<!--	classify end--><!--	show begin--><div id="show"><div class="three"><img src="images/con1.jpg"><span>爱的N次方</span><span class="name">马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con2.jpg"><span>果肉果冻</span><span class="name">双色马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con3.jpg"><span>芒果味</span><span class="name">布丁马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con4.jpg"><span>果冻荔枝味</span><span class="name">多彩马卡龙</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con5.jpg"><span>果味巧克力</span><span class="name">西式甜点</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con6.jpg"><span>奶油水果</span><span class="name">提拉米苏</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con7.jpg"><span>玫瑰花型</span><span class="name">布丁</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con8.jpg"><span>燕麦奶油</span><span class="name">芝士蛋糕</span><span class="huan">价格：<span class="huan" style="color:hotpink">30元</span></span></div></div>
<!--	show end--><!--	banquan begin--><div id="banquan"><p>西式甜品网版权所有2020-2030京ICP备08001421号 京公网安备110108007702</p></div>
<!--	banquan end-->
</body>
</html>

2.CSS代码：

@charset "utf-8";
/* CSS Document */
*{margin: 0 auto 0;padding: 0;}
body{font-family: "微软雅黑";font-size: 16px;width: 980px;} /*页面各个模块居中显示*/#header{width: 980px;height: 80px;margin: 0 center;
/*	position: absolute; 设置绝对定位*/background-color:white;
}.logo{float: left;position: relative; /*设置相对定位*/padding-left: 20px; /*设置内边距*/padding-top: 15px;
}
.one{float: right;text-align: right;padding-right: 30px;padding-top: 35px;position: relative;color: orange;
}#banner{margin: 0 auto 0;width: 100%;height: 390px;
}
.two{width: 980px;margin: 0 auto;background-color: orange;color:brown;float: left;text-align: center;padding-top: 12px;height: 30px;list-style-type: none;
}
.two span{padding: 0 60px;
}
.imgg img{width: 100%;height: 360px;
}#classify{padding: 20px 0;width:980px;height: 140px;background:wheat;
}
.con{width:173px;height: 196px;float: left;margin-left: 23px;display: inline-block;overflow: hidden;white-space: nowrap;position: relative;
}
.con img{border-radius: 50%;left: 20px;top:0;
/*width: 980px;height: 100px;
*/
}
.con p{
/*	position: absolute;*/width: 250px;height: 50px;z-index: 2;left: 2px;top:90px;color: #e7bf80;margin: 5px 45px;position: absolute;
}#show{width: 100%;height: 580px;background-color:lightgoldenrodyellow;
}
.three{padding: 17px;float: left;
}
.three img{width: 200px;
}
.three span{display: block;color: #865859;
}
.three .name{color: hotpink;
}
.three .huan{display: inline;
}#banquan{width: 100%;text-align: center;height: 100px;background:url("images/footer.png")repeat-x;
}
#banquan p{padding-top: 50px;color: white;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/335341.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

04_前端三大件JS

04_前端三大件JS

文章目录 JavaScript1.JS的组成部分2.JS引入2.1 直接在head中通过一对script标签定义脚本代码2.2创建JS函数池文件&#xff0c;所有html文件共享调用 3.JS的数据类型和运算符4.分支结构5.循环结构6.JS函数的声明7.JS中自定义对象8.JS_JSON在客户端使用8.1JSON串格式8.2JSON在前…
阅读更多...
在outlook的邮件中插入HTML；HTML模板获取

在outlook的邮件中插入HTML；HTML模板获取

本文介绍如何在outlook发送邮件时&#xff0c;在邮件中插入HTML&#xff0c;此HTML可以从获取模板自行进行修改。 文章目录 一、下载HTML模板&#xff08;或自己制作好HTML文件&#xff09;二、outlook新增宏三、新建邮件&#xff0c;插入HTML 一、下载HTML模板&#xff08;或自…
阅读更多...
Python--面向对象

Python--面向对象

面向对象⭐⭐ 1. 面向对象和面向过程思想 面向对象和面向过程都是一种编程思想,就是解决问题的思路 面向过程&#xff1a;POP(Procedure Oriented Programming)面向过程语言代表是c语言面向对象&#xff1a;OOP(Object Oriented Programming)常见的面向对象语言包括:java c g…
阅读更多...
Pi 母公司将开发情感 AI 商业机器人；Meta 科学家：Sora 不是视频生成唯一方向丨RTE 开发者日报 Vol.214

Pi 母公司将开发情感 AI 商业机器人；Meta 科学家：Sora 不是视频生成唯一方向丨RTE 开发者日报 Vol.214

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「…
阅读更多...
下一代 CI/CD：利用 Tekton 和 ArgoCD 实现云原生自动化

下一代 CI/CD：利用 Tekton 和 ArgoCD 实现云原生自动化

一、回顾目标 背景&#xff1a; ​ 部门业务上云&#xff0c;之前服务采用传统的部署方式&#xff0c;这种方式简单&#xff0c;但是不能为应用程序定义资源使用边界&#xff0c;很难合理地分配计算资源&#xff0c;而且程序之间容易产生影响。随着互联网时代的到来&#xff…
阅读更多...
阿里云和AWS的CDN产品对比分析

阿里云和AWS的CDN产品对比分析

在现代互联网时代,内容分发网络(CDN)已成为确保网站和应用程序高性能和可用性的关键基础设施。作为两家领先的云服务提供商,阿里云和Amazon Web Services(AWS)都提供了成熟的CDN解决方案,帮助企业优化网络传输和提升用户体验。我们九河云一直致力于阿里云和AWS云相关业务&#…
阅读更多...
CSS中的Flex布局

CSS中的Flex布局

目录 一.什么是Flex布局 二.Flex布局使用 2.1Flex使用语法 2.2基本概念 三.容器的属性 3.1所有属性概述 3.2flex-direction 3.3flex-wrap 3.4flex-flow 3.5justify-content 3.6align-items 3.7align-content 四.项目(子元素)的属性 4.1所有属性概述 4.2order 4…
阅读更多...
＜滑动窗口＞ 长度最小的子数组

＜滑动窗口＞ 长度最小的子数组

题目链接&#xff1a;209. 长度最小的子数组 - 力扣&#xff08;LeetCode&#xff09; 题目分析 由暴力枚举引申到滑动窗口的画图分析过程 优化版本&#xff08;滑动窗口&#xff09; 滑动窗口的使用场景&#xff1a;单调性&#xff08;一定是递增或递减的情况&#xff09; …
阅读更多...
Linux DHCP server 配置

Linux DHCP server 配置

参考&#xff1a;linux dhcp配置多vlan ip_linux 接口vlan-CSDN博客 配置静态IP地址&#xff1a; 给固定的MAC地址分配指定的IP地址&#xff0c;固定的IP地址不必包含在指定的IP池中&#xff0c;如果包含在IP地址池中&#xff0c;固定的IP地址会从IP地址池中移除 配置方法&…
阅读更多...
YOLOV10阅读总结

YOLOV10阅读总结

GitHub - THU-MIG/yolov10: YOLOv10: Real-Time End-to-End Object Detection YOLOv10 - Ultralytics YOLO Docs https://arxiv.org/pdf/2405.14458 论文地址 最近yolo又出了个yolov10了&#xff0c;不得不感慨CV是真卷&#xff0c;毕竟yolov9也才没多久。记录一下阅读笔记。…
阅读更多...
基于Java实现的图书管理系统

基于Java实现的图书管理系统

前言&#xff1a;该图书管理系统实现了查找、添加、删除、显示、借阅、归还等功能&#xff0c;分为两个用户群体&#xff1a;管理者和普通用户。使用了类与对象&#xff0c;封装继承多态&#xff0c;抽象类和接口等Java基础知识。 一.思路 面向对象三部曲&#xff1a;找对象&…
阅读更多...
西湖大学提出AIGC检测框架，精准识别AI撰写的文稿

西湖大学提出AIGC检测框架，精准识别AI撰写的文稿

近年来人工智能技术突飞猛进&#xff0c;尤其是大语言模型的出现&#xff0c;让AI具备了创作文章、小说、剧本等内容的能力。 AI代写&#xff0c;已经逃不过老师、编辑、审稿人的火眼金睛了。但让AI仅改写部分片段&#xff0c;就安全了么&#xff1f; 针对检测AI改写的片段&a…
阅读更多...
整理了六个正规靠谱的兼职赚钱软件，适合普通人做的兼职副业~

整理了六个正规靠谱的兼职赚钱软件，适合普通人做的兼职副业~

​随着互联网时代的到来&#xff0c;越来越多的人选择通过互联网赚钱。在这篇文章中&#xff0c;我们将探讨一些可以在网上长期赚钱的方法。 在网络上面其实有很多的赚钱方法&#xff0c;尽管方法很多&#xff0c;但是对于一些网络新手&#xff0c;刚进入互联网圈子不久的伙伴…
阅读更多...
ES升级--04--SpringBoot整合Elasticsearch

ES升级--04--SpringBoot整合Elasticsearch

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 SpringBoot整合Elasticsearch1.建立项目2.Maven 依赖[ES 官方网站&#xff1a;https://www.elastic.co/guide/en/elasticsearch/client/java-rest/6.8/index.html](…
阅读更多...
使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心 介绍效果代码 介绍 使用numpy与matplotlib绘制一个七彩爱心&#xff01; 效果 代码 import numpy as np import matplotlib.pyplot as plt# Heart shape function def heart_shape(t):x 16 * np.sin(t)**3y 13 * np.cos(t) - 5 * np.cos…
阅读更多...
【RabbitMQ】SpringAMQP--消息转换器

【RabbitMQ】SpringAMQP--消息转换器

SpringAMQP–消息转换器 测试发送Object类型消息 1.声明队列 Configuration public class FanoutConfig {Beanpublic Queue objectQueue(){return new Queue("object.queue");} }运行消费者后&#xff1a; 2.发送消息 RunWith(SpringRunner.class) SpringBootTes…
阅读更多...
POLARDB：新零售用户MySQL上云最佳选择

POLARDB：新零售用户MySQL上云最佳选择

什么是云数据库POLARDB&#xff1f; POLARDB是阿里云自主研发的最新一代RDS关系型数据库&#xff0c;是特别针对互联网场景设计的Cloud-Native 云原生数据库。POLARDB for MySQL版本&#xff0c;在提供100%兼容MySQL5.6/8.0的关系型事务处理ACID特性之上&#xff0c;能够提供完…
阅读更多...
如何让社区版IDEA变得好用

如何让社区版IDEA变得好用

如何让社区版IDEA变得好用 背景 收费版的idea功能非常强大&#xff0c;但是收费&#xff1b;社区版的免费&#xff0c;但是功能被阉割了。如何才能让社区版Idea变得好用&#xff0c;一、打开项目前进行全局配置&#xff1b;二&#xff0c;寻求各种插件的支持。在经过全局配置…
阅读更多...
迅睿CMS邮箱设置QQ邮箱为例

迅睿CMS邮箱设置QQ邮箱为例

邮箱设置 1、服务器地址两个&#xff0c;普通与企业。 普通&#xff1a;ssl://smtp.qq.com企业&#xff1a;ssl://smtp.exmail.qq.com 2、端口号为&#xff1a;465 3、邮箱账号&#xff1a;填写自己的QQ邮箱作为发布服务器。 4、邮箱密码&#xff1a;到QQ邮箱账号中获取“…
阅读更多...
Git学习篇

Git学习篇

目录 使用命令导入项目 使用命令导入项目 1. 使用git init 命令初始化一个新的Git仓库。 git init 是 Git 命令&#xff0c;用于初始化一个新的 Git 仓库。当您想要开始跟踪一个新项目的版本控制时&#xff0c;可以运行 git init 命令来初始化一个空的 Git 仓库。 如果出现以下…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023