1200字范文，内容丰富有趣，写作的好帮手！
1200字范文XML网站地图
全站
首页 50字 100字 200字 300字 400字 500字 600字 700字 800字 900字 1000字 1200字 1500字
推荐专题：
1200字范文 > 基于HTML的美食家网页设计 HTML+CSS+JavaScript简单的品牌红酒销售网页 餐饮网页设

基于HTML的美食家网页设计 HTML+CSS+JavaScript简单的品牌红酒销售网页 餐饮网页设

时间：2021-05-20 14:59:53

相关推荐

基于HTML的美食家网页设计 HTML+CSS+JavaScript简单的品牌红酒销售网页 餐饮网页设

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

​

文章目录📂

​​一、网站题目👨‍🎓​​​​二、网站描述✍️​​​​三、网站介绍📚​​​​四、网站效果🌐​​​​五、代码实现 🪓​​ ​​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代码)。

四、网站效果🌐

五、代码实现 🪓

HTML结构代码🧱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>首页</title>

<link href="css/index.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#F4F4F4">

<div id="login">

<h2>欢迎！</h2>

<div id="loginp"><a href="login.html">登录</a>|<a href="#">注册</a>|<a href="#">联系我们</a></div>

</div>

<div id="logoall">

<div id="logo">

<div id="logo1">

<a href="index.html">

<img src="image/logo.png" width="200" height="100" />

</a>

</div>

<div id="search">

<input type="text" id="search_txt" placeholder="请输入" />

<input type="submit" id="ss" value="搜索" />

</div>

<div id="logo2"><img src="image/logoright.png" width="100" height="25" /></div></div></div>

<div id="naviall">

<div id="navi">

<ul>

<li><div class="shouye"><a href="index.html">首页</a></div></li>

<li><a href="About.html">关于</a></li>

<li><a href="show.html">产品展示</a></li>

<li><a href="#">服务</a></li>

<li><a href="#">专题</a></li>

<li><a href="#">看点</a></li>

</ul>

</div>

</div>

<div class="wrap">

<div class="banner" style="background:#fbf8f3">

<div class="banner_img">

<img src="image/banner1.jpg" width="1200" />

</div>

</div>

<div class="banner" style="background:#f0f0f0">

<div class="banner_img">

<img src="image/banner2.jpg" width="1200" />

</div>

</div>

<div class="banner" style="background:#f7ead7">

<div class="banner_img">

<img src="image/banner3.jpg" width="1200" />

</div>

</div>

<div class="banner" style="background:#f1e6ea">

<div class="banner_img">

<img src="image/banner4.jpg" width="1200" />

</div>

</div>

<div class="banner" style="background:#f7ead7">

<div class="banner_img">

<img src="image/banner5.jpg" width="1200" />

</div>

</div>

<div class="btn">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

</div>

<div class="A1">

<div class="A2">

<div class="A4"></div>

<div class="A5">红酒知识</div>

<div class="A71"><img src="image/g1.jpg" width="270" /> </div>

<div class="A7"><h2><a href="#">红酒要怎么喝才既健康又不容易醉</a></h2>

<p>想喝到冰爽的葡萄酒，白葡萄酒干白葡萄酒的最佳饮用温度是7~10摄氏度，干红葡萄酒则是14~18摄氏度……</p></div>

<div class="A81"><img src="image/g2.jpg" width="270" /></div>

<div class="A8"><h2><a href="#">观察拉菲酒塞，教你识别真假拉菲</a></h2>

<p>观察酒标。真拉菲的酒标由于是丝印酒标，所以表面摸起来有凹凸的感觉，假的是普通印刷摸起来很滑……</p></div>

</div>

<div class="A3">

<div class="A4"></div>

<div class="A6">热门看点</div>

<div class="A9">六大“醉”受欢迎的红酒品牌</div>

<div class="A10">

<ul>

<li><div class="A101">1</div><div class="A102"><a href="#">拉菲(Lafite)</a></div><div class="A103"><img src="image/movie_top.gif" width="20" /></div></li>

<li><div class="A101">2</div><div class="A102"><a href="#">木桐(Mouton)</a></div><div class="A103"><img src="image/movie_top.gif" width="20" /></div></li>

<li><div class="A101">3</div><div class="A102"><a href="#">玛歌(Margaux)</a></div><div class="A103"><img src="image/movie_top.gif" width="20" /></div></li>

<li><div class="A101">4</div><div class="A102"><a href="#">拉图(Latour)</a></div><div class="A103"><img src="image/movie_top.gif" width="20" /></div></li>

<li><div class="A101">5</div><div class="A102"><a href="#">奥比昂(Haut-Brion)</a></div><div class="A103"><img src="image/movie_top.gif" width="20" /></div></li>

<li><div class="A101">6</div><div class="A102"><a href="#">卡思黛乐(Castel)</a></div><div class="A103"><img src="image/movie_top.gif" width="20" /></div></li>

</ul>

</div>

</div>

</div>

<div id="B1">

<div id="B2"><p>世界红酒</p></div>

<div id="B3">

<ul>

<li>

<div class="B31"><a href="#"><img src="image/h1.jpg" width="220" height="220" /></a></div>

<div class="B321">

<div class="B32">52度 泸州老窖 特曲(7年)<br />产 老酒 500ml</div>

<div class="B33">249元</div>

<div class="B34">98人好评</div>

</div>

</li>

<li>

<div class="B31"><a href="#"><img src="image/h2.jpg" width="220" height="220" /></a></div>

<div class="B321">

<div class="B32">43度 麦卡伦 单一麦芽<br />苏格兰威士忌 700ml</div>

<div class="B33">2080元</div>

<div class="B34">8人好评</div>

</div>

</li>

<li>

<div class="B31"><a href="#"><img src="image/h3.jpg" width="220" height="220" /></a></div>

<div class="B321">

<div class="B32">人头马XO 干邑白兰地<br /> 700ml</div>

<div class="B33">1399元</div>

<div class="B34">121人好评</div>

</div>

</li>

<li>

<div class="B31"><a href="#"><img src="image/h4.jpg" width="220" height="220" /></a></div>

<div class="B321">

<div class="B32">【精品礼盒】 澳大利亚奔富<br />BIN389红葡萄酒 750ml</div>

<div class="B33">618元</div>

<div class="B34">28人好评</div>

</div>

</li>

<li>

<div class="B31"><a href="#"><img src="image/h5.jpg" width="220" height="220" /></a></div>

<div class="B321">

<div class="B32">传心(凛)纯米大吟酿<br /> 1800ml</div>

<div class="B33">1488元</div>

<div class="B34">0人好评</div>

</div>

</li>

</ul>

</div></div>

<div id="C1">

<div id="C2"><p>红酒类型</p></div>

<div id="C3">

<ul>

<li>

<div class="C31"><img src="image/i1.jpg" width="275" height="275" /></div>

<div class="C32">【精选六只装】</div>

<div class="C33">696元</div>

</li>

<li>

<div class="C31"><img src="image/i2.jpg" width="275" height="275" /></div>

<div class="C32">【名庄口感】雷司令1+伊诺奥塔维</div>

<div class="C33">606元</div>

</li>

<li>

<div class="C31"><img src="image/i3.jpg" width="275" height="275" /></div>

<div class="C32">【新世界红白组合】白诗南+老藤</div>

<div class="C33">236元</div>

</li>

<li>

<div class="C31"><img src="image/i4.jpg" width="275" height="275" /></div>

<div class="C32">【亲情酒】168+纯爱</div>

<div class="C33">660元</div>

</li>

</ul>

</div>

</div>

<div id="D1">

<div id="D2"><p>红酒精品</p></div>

<div id="D3">

<div id="D4"><!--手风琴-->

<ul id="shoufenq">

<li><img src="image/shou1.jpg"></li>

<li><img src="image/shou2.jpg" /></li>

<li><img src="image/shou3.jpg"/></li>

<li><img src="image/shou4.jpg" /></li>

<li><img src="image/shou5.jpg" /></li>

<li><img src="image/shou6.jpg" /></li>

</ul>

</div>

<div id="D5">

<ul>

<li><a href="#"><img src="image/j8.png" width="238" height="130" /></a></li>

<li><a href="#"><img src="image/j9.png" width="238" height="130" /></a></li>

<li><a href="#"><img src="image/j10.png" width="238" height="130" /></a></li>

<li><a href="#"><img src="image/j11.png" width="238" height="130" /></a></li>

<li><a href="#"><img src="image/j12.png" width="238" height="130" /></a></li>

</ul>

</div>

</div>

</div>

<div class="E1">

<div class="E2">世界红酒名庄</div>

<div class="E3">

<div class="F1">

<div class="F2"><img src="image/k1.jpg" width="175" height="175" />

<ul>

<li><a href="#">雷诺帝酒庄阿玛罗尼经典红葡萄酒</a></li>

<li>【WE91】分</li>

<li><span>¥450</span></li>

</ul>

</div>

<div class="F2"><img src="image/k2.jpg" width="175" height="175" />

<ul>

<li><a href="#">索维酒庄史维瓦岩阿玛罗尼红葡萄酒</a></li>

<li>【WE93】分</li>

<li><span>¥4515</span></li>

</ul>

</div>

<div class="F2"><img src="image/k3.jpg" width="175" height="175" />

<ul>

<li><a href="#">拉瓦里酒庄阿玛罗尼经典红葡萄酒</a></li>

<li>【WE88】分</li>

<li><span>¥339</span></li>

</ul>

</div>

</div>

<div class="G1"><img src="image/k7.jpg" width="400" />

<div id="G2">

<ul>

<li><a href="#">萨莱特酒庄阿玛罗尼经典…</a><br /><div class="G21"> Le Salette Amarone Della Valplicella Class…</div></li>

<li><a href="#">蔻福酒庄欧尚阿玛罗尼经典…</a><br /><div class="G21"> Corteforte Amarone Della Valpolicella Class…</div></li>

<li><a href="#">蔻福酒庄圣泽诺阿玛罗尼经典…</a><br /><div class="G21"> Corteforte Amarone Della Valpolicella Class…</div></li>

<li><a href="#">安琪洛阿玛罗尼经典红葡萄酒…</a><br /><div class="G21"> Antichello Amarone della Valpolicella Class…</div></li>

</ul>

</div>

<div id="G3">

<div class="G31">¥380</div>

<div class="G31">¥525</div>

<div class="G31">¥380</div>

<div class="G31">¥389</div>

</div>

</div>

<div class="H1">

<div class="H2"><img src="image/k4.jpg" width="175" height="175" />

<ul>

<li><a href="#">布里加德拉酒庄维奇阿玛罗尼红葡萄酒</a></li>

<li>【WE85】分</li>

<li><span>¥565</span></li>

</ul>

</div>

<div class="H2"><img src="image/k5.jpg" width="175" height="175" />

<ul>

<li><a href="#">萨来特酒庄马瑞嘉阿玛罗尼红葡萄酒</a></li>

<li>【WE95】分</li>

<li><span>¥4515</span></li>

</ul>

</div>

<div class="H2">

<img src="image/k6.jpg" width="175" height="175" />

<ul>

<li><a href="#">福山酒庄阿玛罗尼经典红葡萄酒</a></li>

<li>【WE84】分</li>

<li><span>¥485</span></li>

</ul>

</div>

</div>

</div>

<div class="E4">意大利名庄：阿玛罗尼<br/><span1>AMARONE DELLA VAPOLICELLA DOCG</span1></div>

</div>

<div class="E5"><a href="#">更多》</a></div>

<div id="version"><p>关于我们 |

<script type="text/javascript" src="js/lunbo.js"></script>

</body>

</html>

CSS样式代码💒

#logoall {

background-color: #FFF;

height: 160px;

}

#login {

background-color: #f3eff0;

height: 35px;

width: 1200px;

margin-right: auto;

margin-left: auto;

}

#login h2 {

font-size: 14px;

color: #333;

margin-top: 5px;

float:left;

}

#loginp{

font-size: 14px;

color: #333;

float: right;

margin-top:5px;

}

#loginp a{

text-decoration:none;

color:#333;

margin-left:3px;

margin-right:3px;

}

#loginp a:hover{

text-decoration:none;

margin-left:3px;

margin-right:3px;

color:#00F;

}

#logo {

height: 160px;

width: 1200px;

margin-right: auto;

margin-left: auto;

position:relative;

clear:both;

}

#logo1 {

position: absolute;

height: 100px;

width: 200px;

left: 100px;

top: 30px;

}

#logo2 {

height: 50px;

width: 200px;

position:absolute;

top:80px;

right:100px;

}

基于HTML的美食家网页设计 HTML+CSS+JavaScript简单的品牌红酒销售网页 餐饮网页设计成品 美食甜品网页制作模板 大学生静态HTML网页源码 dreamweaver网页作业...

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法，并不表明网站立场。
相关阅读
Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript...

Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript...

2024-06-13

Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript

Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript

2022-12-09

HTML5期末大作业：餐饮美食网页设计——精美花甲美食网页(8页) HTML+CSS+JavaScript

HTML5期末大作业：餐饮美食网页设计——精美花甲美食网页(8页) HTML+CSS+JavaScript

2021-06-27

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript

HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript

2019-03-10

最近发布
教师清廉教育征文 1200字

教师清廉教育征文 1200字

2024-08-15

格林童话读后感1200字3篇

格林童话读后感1200字3篇

2024-08-15

英语作文强化：36句谚语格言1200字作文

英语作文强化：36句谚语格言1200字作文

2024-08-15

情系故土作文 1200字

情系故土作文 1200字

2024-08-15

再读莲花作文1200字

再读莲花作文1200字

2024-08-15

张良拜师的故事1200字

张良拜师的故事1200字

2024-08-15

一路上有你作文1200字

一路上有你作文1200字

2024-08-15

校园一角1200字作文素材大全

校园一角1200字作文素材大全

2024-08-15

企业管理论文 1200字

企业管理论文 1200字

2024-08-15

狗狗的奇妙冒险：小升初作文

狗狗的奇妙冒险：小升初作文

2024-08-15

推荐专题
爱国与爱党1200字作文 厨师心得体会1200字 大数据概论1200字论文 高三规划1200字 家乡特色作文1200字 奥运与人生1200字 潮州春节风俗1200字 科普文章1200字 1200字考察材料 关于爱国的作文1200字 我的1200字作文 读后感1200字 读风俗论有感1200字 军训心得体会1200字数 人物通讯1200字范文
猜你喜欢：
觉醒年代1200字作文 学党史有感1200字 我与思维阅读1200字 希望的作文1200字 1200字论语赏析免费 毕业焦虑作文1200字 曾国藩的故事1200字 文明言行1200字 故事型软文1200字 关于爱党的1200字作文 体育名人文章1200字 时政新闻近期1200字 跟党走的文章1200字 绿色仁化丹霞1200字 中学作文除夕1200字 1200米粗体字 蓝信封模拟回信1200字 寒假做家务感悟1200字 1200字演讲稿 生涯规划1200字论文 难忘的小事1200字 客家印象作文1200字 文明交友作文1200字 三体读后感1200字 夹竹桃作文1200字 日记1200字怎么写 春节的起源1200字 舒展青春模样1200字 1200字初三检讨 1200字日记高中
展开

1200字范文 免责声明© 2024 All Rights Reserved.

湘ICP备2024057051号网站地图XML

© 2024 All Rights Reserved.

1200字范文 免责声明