用DIV+CSS技术设计的红酒主题网站(web前端网页制作课作业)

news2025/1/29 14:14:28

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、🌐网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
    • 💒CSS样式代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。


二、✍️网站描述

🏷️ 网页中包含:Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等,视频音频元素,同时设计了logo(源文件),基本期末作业所需的知识点全覆盖。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>红酒</title>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>
  <div class="head clearfix"> <b class="fl"><img src="images/logo.jpg"></b>
    <nav class="fr"> 
   <a href="index.html">主页</a> 
      <a href="about.html">红酒介绍</a> 
      <a href="pic.html">红酒照片</a> 
      <a href="news.html">红酒起源</a>
       <a href="info.html">红酒文化</a>
      <a href="sp.html">视频推荐</a>
    </nav>
  </div>
  <div class="main clearfix">
    <div class="div1 clearfix"> <img src="images/timg.jpg" width="100%"> </div>
    <div class="div7 bg000 clearfix">
      <div class="bar">
        <h3>红酒小知识</h3>
      </div>
      <div class="con">
        <h3>红酒度数介绍</h3>
        <div>
          红酒度数可以分为:低酒精度数(8度到12.5度)、中等酒精度数(12.5度到13.5度)、高酒精度数(13.5度到14.5度)。红酒的度数高低和红酒品质有一定关系,但不是决定性因素。
          <img src="images/a1.jpg" width="300px" style="display: block;margin: 0 auto;"> <br>
          <br>
        </div>
        <h3>知识了解</h3>
        <div>
          <h4>起源地</h4>
          <p>一般认为大概在公元前7000-5000年,人类和葡萄酒结下了不解的情缘。同时那个时候也是人类第一次在葡萄原产地定居的时期,这个时期的人们转变以往的生活方式,学习驯养动物和种植庄稼,同时为了储备足够的食物过冬,人们学会了制作葡萄酒。</p>
          <h4>选购必看</h4>
          <p>葡萄酒的酒精度取决于葡萄品种,甜度,成熟度等多种因素。酿酒师如果过于在意酒精度,就会损失很多风味和平衡。优秀的葡萄酒是酿酒师的杰作,首先考虑的是:色泽自然迷人,纯净或复杂的香气,口感圆润平衡,余味悠长,风格典型而独特。不同地区的气候,葡萄品种,年份都会导致葡萄酒酒精度不同。通常,澳大利亚和美国加州由于光照充足,葡萄甜度高,酿造葡萄酒的酒精度会高些。
            老的年份葡萄酒近年来炒作不断,价格也日新月异。很多朋友以为老葡萄酒就是代表了高端,好喝的葡萄酒。其实,这完全是误解!老葡萄酒因价格高昂,也是造假的首选目标。还有一些是不具备陈酿能力的葡萄酒,因各种原因保存了很多年后再拿出来卖。市场上只有少量具备陈年潜力的老葡萄酒。而且,大家可能还不知道:葡萄酒对储藏环境要求极高,如果不是在通风良好,无异味,恒温的环境下储藏,一瓶极品好酒可能打开后也是一瓶价格高昂的红酒醋!</p>
          <h4>饮用指南</h4>
          <p>只有适度饮酒才能真正发挥葡萄酒的积极作用。对于适度这个概念,我们可以参考美国对适度饮酒的定义:以每杯酒150毫升为标准容积来算,成年男性每天饮用2杯酒精度在12%左右的葡萄酒(约200卡路里)为宜,女性则以一杯(约100卡路里)为佳;同时,一周的“低风险”饮酒量上限是男性14杯,女性7杯。取决于身体内分解酒精的酶的多少。</p>
          <h4>红酒的发展</h4>
          <p>2011年中国葡萄酒销量赶超英国,成为全球第五大葡萄酒消费国。大陆和香港地区葡萄酒消费量上升21.5%。就消费额来看,三年内,中国葡萄酒将超过英国,成为仅次于美国的全球第二大葡萄酒消费国。从品种来看,中国人一边倒地倾向于红酒:消费的葡萄酒当中有90%是红酒。由于这种偏好的存在,中国的红酒消费数量排到了世界第五。中国红酒市场零售规模为600亿-700亿元,到2013年将超过900亿元。不过,考虑到每年数量庞大的"水货",中国红酒市场规模实际已经超过1000亿元,5年后有望翻一番,达到2000亿元。
可以预见的是,未来中国葡萄酒市场将实现从百亿级向千亿级的时代跨越,打造具有鲜明特色的优质产品成为葡萄酒企业面临的挑战。
未来中国葡萄酒市场将呈现出产区资源全球化、葡萄酒文化本土化、消费高端化三大趋势。</p>
          
          <h4>红酒消费</h4>
          <p>2018年,京东超市发布了一组“红酒趣味数据”,从进口国来看,法国作为旧世界红酒代表,占据了36.4%的市场份额,国产红酒也受到了国内消费者的广泛青 睐,占比23.9%。从消费城市来看,北京、上海、广州、深圳、成都仍然是最主要的红酒消费城市。一线城市占比32%,二线城市占比30.4%。70后、80后占据红酒消费主流,但90后甚至00后将成为主力消费群体,红酒消费越来越普及,新一代消费者正快速成长。</p>
          <br>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">葡萄酒</div>
</body>

</html>


💒CSS样式代码


/* CSS Document */
a {
	font-size: 14px;
	color: #684D39;
	text-decoration:none
}

a:hover {
	color: #7c2542;
}
ul,li{ list-style:none; margin:0; padding:0}
body {
	margin: 0 auto;
	padding: 0;
	
	
	background-image:url(../images/bg.jpg);
	width: 1000px;
	background-size: cover;
	color: #fff;
	line-height: 30px
}

.clearfix:after {
	clear: both;
	content: '';
	display: block;
}

.head {
	background: #7c2542;
	height: 104px;
	overflow: hidden
}



h1,
h2,
h3 {
	margin: 0;
	padding: 0
}

.head a {
	font-size: 18px;
	color: #fff;
	margin: 35px 20px;
	display: inline-block
}
.head a:hover{ color:#FFFF00}

.fl {
	float: left
}

.fr {
	float: right
}

.head .fl {
	/* background: #fff; */
}

.head .fl img {
	width:200px;
}

.bg000 {
	background:#7c2542;
}

.bar {
	background:#333;
	color: #fff;
	padding: 20px
}

.w40 {
	width: 40%;
}

.w60 {
	width: 60%
}

#jSearchHeroDiv li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	text-align: center;
	width: 236px;
	margin: 5px;
}

#jSearchHeroDiv img {
	width: 100%;
	height: 140px
}

.div2 .fr div {
	margin: 5px 5px;
	height: 332px
}
.div2 li{ margin-left:20px}
.div2 li a{ color:#FFFFFF}
.div2 {
	float: left;
	margin-top: 20px;
	width: 480px;
}
#latest_guide_list li{ border-bottom:#fff solid 1px; padding:10px}
#latest_guide_list li a{ color:#fff;}
.div4 {
	float: right;
	margin-top: 20px;
	width: 500px
}

.footer {
	text-align: center;
	padding: 30px 0;
	
	color: #fff
}

.con {
	padding: 20px
}


.title {
	color: #fff;
	text-align: center;
	font-size:24px;
	padding: 20px 0;

}

.div1 img {
	float: left
}

.div7 {
	margin-top: 20px
}

form {
	margin: 0;
	padding: 35px 0 0 50px;
	width: 488px;
}

form label {
	display: block;
	margin: 0 0 20px;
	overflow: hidden;
	padding: 0;
}

form label span {
	color: #7d7c7c;
	display: block;
	font-size: 13px;
	float: left;
	height: 31px;
	margin: 0;
	padding: 5px 14px 0 0;
	text-align: right;
	text-transform: uppercase;
	width: 74px;
}

form label input {
	border: 1px solid #d6d6d6;
	background: #fff;
	color: #7d7c7c;
	display: block;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	height: 34px;
	line-height: 34px;
	margin: 0;
	padding: 0 5px;
	width: 388px;
}

form label textarea {
	border: 1px solid #d6d6d6;
	background: #fff;
	color: #7d7c7c;
	display: block;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	height: 205px;
	margin: 0;
	overflow: auto;
	padding: 5px;
	width: 388px;
}

form #submit2 {
	border: 0;

	display: block;
	height: 37px;
	margin: 0 0 0 88px;
	padding: 0;
	width: 101px;
}
.conimg{
	width: 300px;
	height: auto;
}
.renwu{
	font-weight: bold;
}



六、🥇 如何让学习不再盲目

第一、带着目标去学习,无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么,是想解决什么问题,实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的,书籍是浩如烟海的。我们尽情徜徉其中的时候,千万不要被海水淹死,没有自我了。在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识

第三、学到了就要用到

有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事,但只有会学习的人,才有价值。


七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode144、145、94. 二叉树遍历】——递归算法、利用栈

144、145、94 二叉树遍历 这三道题分别考察二叉树的前序遍历、后序遍历、中序遍历。 二叉树的遍历问题是二叉树较为基础的一类问题&#xff0c;通常来讲&#xff0c;都是使用递归算法来实现的。而递归算法的关键就在于&#xff0c;确定递归函数的参数以及返回值、终止条件&am…

基于SqlNode的血缘解析

案例分析 基于社区当前最新版本calcite-1.32.0进行分析 当前的SqlValidatorTest$testFieldOrigin中有一个单测可以直接用来调试 调试后&#xff0c;很快就能在测试专用方法assertFieldOrigin找到SqlValidatorTest$getFieldOrigins这个血缘入口方法 public SqlValidatorFixtu…

AWR1843+DCA1000+mmwave_studio 采集原始数据

项目场景&#xff1a; AWR1843、DCA1000板与mmwave_studio的结合使用 实现数据采集工作 首先就是准备好各种相关的软件unfinish、matlabRuntime、mmwave_studio 没有涉及到css等 只是简单的数据采集工作。 问题1描述 在烧写完开箱demo后&#xff0c;开启mmwave_studio 出现找…

使用jmh框架进行benchmark测试

性能问题 最近在跑flink社区1.15版本使用json_value函数时&#xff0c;发现其性能很差&#xff0c;通过jstack查看堆栈经常在执行以下堆栈 可以看到这里的逻辑是在等锁&#xff0c;查看jsonpath的LRUCache //// Source code recreated from a .class file by IntelliJ IDEA// …

pytorch深度学习实战lesson30

第三十课 更多的芯片 虽然 GPU 现在是目前模型训练的主流芯片然后大家很多时候在做预测的时候也在 C PU 上做预测&#xff0c;但实际上来说这个在慢慢的发生改变。今天看一下目前的一些这样子的芯片。 上图是个手机芯片&#xff0c;可以看到有很多计算单元&#xff0c;比如CPU、…

【数字信号去噪】粒子滤波器与FBS、MAP平滑方法数字信号去噪【含Matlab源码 2179期】

⛄一、平滑分解简介 根据奈奎斯特定理,采样频率必须大于等于有用信号最高频率的2倍。假设对心电信号的采样满足奈奎斯特采样定理,则实测信号采样频率的1/2为有用心电信号的最高频率。通过三点平滑滤波,可以将频率大于1/2采样频率的信号滤除,将滤除的信号定义为第1阶平滑分解分…

使用 IDEA 的 Dedis 插件连接 Redis 服务器

IDEA 中的 Redis 插件作为 Redis 的可视化工具&#xff0c;可以通过此插件连接 Redis 服务器&#xff0c;并且进行增删改查操作 【一】 IDEA 安装 Redis 插件 1. 点击 File >> Setting 2. 点击 Plugings 3. 点击 Marketplace 一栏的搜索框中输入 redis 4. 点击第一个 R…

yocto machine class解析-st-partitions-image

yocto machine class解析 stm32mp157 yocto的meta-st-stm32mp layer中提供了几个class,后续几篇文章重点分析这些class文件&#xff1a; 第一篇就从st-partitions-image.bbclass 开始&#xff0c;st所有创建image的bb文件都会引用st-partitions-image&#xff0c;包括bootfs u…

审计日志功能实现优化及测试记录(参照若依系统,以dolphinscheduler 2.0.5 为例,实现相关功能)

目录&#x1f42c;使用&#x1f420;若依-操作日志&#x1f420;引入海豚调度&#x1f41f;引入审计日志包&#xff0c;增加LogAnnotation注解&#x1f42c;问题记录及优化&#x1f420;service方法注解时而生效&#xff0c;时而不生效&#x1f41f;不生效原因&#x1f41f;修改…

基于springboot+mybatis+sqlserver+jsp运行会报名管理系统

基于springbootmybatissqlserverjsp运行会报名管理系统一、系统介绍二、功能展示1.用户登陆2.用户注册3.项目列表(运行员)4.报名列表&#xff08;运动员&#xff09;5.运动员项目列表&#xff08;管理员&#xff09;6.添加项目四、获取源码一、系统介绍 系统主要功能&#xff…

【计算机组成原理Note】2.4.2 加法器

文章目录加法器1. 一位全加器2. 串行加法器3. 串行进位加法器加法器4. 先行进位加法器加法器 1. 一位全加器 一位全加器&#xff0c;当前位输出&#xff1a;SiAi⨁Bi⨁Ci也就是输入中有奇数个1时输出为1&#xff08;异或&#xff09;向高位的进位&#xff1a;CiAiBi(Ai⨁Bi)Ci…

【目标检测】LLA: Loss-aware label assignment for dense pedestrian detection【标签分配】

总结 本文提出了一种用于行人目标检测的标签分配策略&#xff0c;具体来说&#xff0c;主要有以下几步流程。 构建代价矩阵。通过网络的前向传播得到网络的输出&#xff0c;CclsC^{cls}Ccls, CregC^{reg}Creg&#xff0c;构建代价矩阵CCclsλ∗CregCC^{cls}\lambda*C^{reg}CC…

小程序环境切换自定义组件

背景&#xff1a; 最近一直有参与小程序的项目&#xff0c;发现切换环境时经常要上传然后再设置为体验版&#xff0c;比较麻烦&#xff0c;所以尝试做了个切换环境的组件&#xff0c;分享给大家&#xff0c;希望大家能用得上&#xff0c;提点建议 组件长这个样子 展开后 功能&a…

JVM的垃圾回收机制(GC)

系列文章目录 JVM的内存区域划分_crazy_xieyi的博客-CSDN博客 JVM类加载&#xff08;类加载过程、双亲委派模型&#xff09;_crazy_xieyi的博客-CSDN博客 文章目录 一、什么是垃圾回收&#xff1f;二、java的垃圾回收&#xff0c;要回收的内存是哪些&#xff1f;三、回收堆上…

FPGA Base Xilinx跨时钟域宏XPM_CDC

FPGA Base Xilinx跨时钟域宏XPM_CDC最近看手底下的小伙子们写代码&#xff0c;对于跨时钟域的处理极度的不规范&#xff0c;还是放下这句话基础不牢&#xff0c;地动山摇 其实Xilinx公司已经为用户提供了宏定义&#xff0c;实现跨时钟域处理&#xff0c;见截图 XPM_CDC在命名上…

关于旅游景点主题的HTML网页设计——青岛民俗 7页 带登录注册

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作| HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&#xff1a;样式 在操作方面上运…

【C++】简化源码——vector的模拟实现

文章目录一、前言二、无参构造&析构三、基础接口1.empty和clear2.size和capacity3.[]和iterator四、resize和reserve五、尾插尾删六、其他构造七、迭代器失效1.insert2.erase八、memcpy问题九、vector.h一、前言 本篇的目的很简单&#xff0c;只有一个&#xff1a;模拟实现…

C语言刷题(一)

&#x1f412;博客名&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;别人可以拷贝我的模式&#xff0c;但不能拷贝我不断往前的激情 目录 用递归法求一个整数一维数组a的最大元素 猴子吃桃问题 奇偶数换位问题 水仙花数&#xff08;0-100000&#xff09; 换啤酒…

web前端电影项目作业源码 大学生影视主题网页制作电影网页设计模板 学生静态网页作业成品 dreamweaver电影HTML网站制作

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…

redis命令行操作库、键、和五大数据类型详解

一、数据库操作命令 redis默认有16个数据库&#xff0c;类似数组下标从0开始&#xff0c;初始默认使用0号库。 1.1 测试是否连通 ping测试服务器是否连通 返回pone就是连通了 1.2 切换数据库 select index1.3 数据移动 move key db1.4 显示数据总量 dbsize1.5 数据清除 …