🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码）。
三、🔗网站效果
▶️1.视频演示
Q59JP 红酒 6页 无js 带视频
🧩 2.图片演示
四、💒 网站代码
🧱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="banner"> <img src="images/timg.jpg" width="100%"> </div>
<div class="div7 bg000 clearfix">
<div class="">
<ul id="jSearchHeroDiv" class="imgtextlist">
<li><img src="images/a1.jpg">
</li>
<li><img src="images/a2.jpg">
</li>
<li><img src="images/a3.jpg">
</li>
<li><img src="images/a4.jpg">
</li>
</ul>
</div>
</div>
<div class="div4 bg000 ">
<div class="bar">
<h3>红酒分类</h3>
</div>
<div class="fr">
<div label-module="para" style="padding: 10px;box-sizing: border-box;">
<div label-module="para" style="font-size:14px">
目前世界上有超过6000种可以酿酒的葡萄品种，可分为红葡萄酒、白葡萄酒、桃红葡萄酒，而红酒则是葡萄酒类目中的红葡萄酒类型。但能酿制出上好葡萄酒的葡萄品种只有50种左右，大致可以分为白葡萄和红葡萄两种。白葡萄，颜色有青绿色、黄色等，主要用于酿制起泡酒及白葡萄酒。
<br><br>
不管是红葡萄品种还是白葡萄品种，它们的生长特性及种植所必需的自然条件，比如气候、土壤、日照等因素都决定了每个葡萄酒产区对葡萄品种的选择，当然，一些传统和市场因素有时也会被掺杂其中。例如干燥炎热且常刮强风的法国罗讷河谷南部正是耐干热及强风的歌海娜（Grenache）品种的主要产地，而炎热的地中海气候则不适合 种植早熟且喜严寒气候的黑皮诺（Pinot Noir）
<br>
<br>
红酒多酚还可降低皮肤受刺激所引起的发炎反应;抑制酪胺酸酶活性,减少黑色素生成,让肌肤亮白;维持血管张力，防止微血管曲张,促进脂肪与醣类的代谢,消除橘皮组织现象。
<br>
</div>
</div>
</div>
</div>
<div class="div2 bg000 ">
<div class="bar">
<h3>红酒</h3>
</div>
<div style="padding: 5px;height: 460px;">
<p>
葡萄酒在大约公元前1000年到前500年之间在法国南部出现，而后它开始在地中海盆地的大部分地区进行繁衍传播。早期，这种饮料一直被视认是一种只有贵族才能享用的高尚饮品，也是一种用来敬拜酒神巴克斯（Bacchus）的祭神用品。
红酒在全世界的基督教徒的心中还代表了耶稣基督的血液，这点促进了红酒的平民化，使得平常民众也拥有了饮用甘美的红酒的权利。
红酒（Red wine）是葡萄、蓝莓等水果经过传统及科学方法相结合进行发酵的果酒。红酒比较典型的是葡萄红酒和蓝莓红酒，葡萄酒有许多分类方式。以成品颜色来说，可分为红葡萄酒、白葡萄酒及粉红葡萄酒三类 。
其中红葡萄酒又可细分为干红葡萄酒、半干红葡萄酒、半甜红葡萄酒和甜红葡萄酒，白葡萄酒则细分为干白葡萄酒、半干白葡萄酒、半甜白葡萄酒和甜白葡萄酒。粉红葡萄酒也叫桃红酒、玫瑰红酒。杨梅酿制的叫做杨梅红酒。还有一种蓝莓酿制的蓝莓红酒。
</p>
</div>
</div>
<div class="clearfix"></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}
.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模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
更多推荐
2022年期末网页设计作业——如何制作企业网站（html+css制作）
发布评论