👨🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
🎀 精彩专栏推荐👇🏻👇🏻👇🏻
🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
文章目录📂
- 一、网站题目👨🎓
- 二、网站描述✍️
- 三、网站介绍📚
- 四、网站效果🌐
- 五、代码实现 🪓
- 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>
<html>
<head>
<meta charset="UTF-8">
<title>咖啡</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
<div class="header">
<div class="logo"><a href="#"><img class=pic src="images/logo.png"></a></div>
<div class="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="kafei.html">咖啡及文化</a></li>
<li><a href="meishi.html">美食与饮品</a></li>
<li><a href="xinwen.html">美食新闻</a></li>
<li><a href="liuyan.html">留言板</a></li>
</ul>
</div>
</div>
<div class="lunbo">
<div class="flashbox">
<div id=SwitchBigPic>
<div><a href="#"><img class="pic" src="images/01.jpg"></a></div>
<div><a href="#"><img class="pic" src="images/02.jpg"></a></div>
<div><a href="#"><img class="pic" src="images/03.jpg"></a></div>
<div><a href="#"><img class="pic" src="images/04.jpg"></a></div>
<div><a href="#"><img class="pic" src="images/05.jpg"></a></div>
</div>
<ul id=SwitchNav>
<li><a href="#"><img src="images/01.jpg"><b>夏天是什么味道？</b></a> </li>
<li><a href="#"><img src="images/02.jpg"><b>夏季甜点</b></a> </li>
<li><a href="#"><img src="images/03.jpg"><b>美味香槟</b></a> </li>
<li><a href="#"><img src="images/04.jpg"><b>各式点心</b></a> </li>
<li><a href="#"><img src="images/05.jpg"><b>店长推荐</b></a> </li>
</ul>
</div>
</div>
<div class="main">
<div class="tuijian">
<div class="title">原色咖啡新品推荐 </div>
<ul>
<li><a href="#"><img src="images/tuijian1.jpg"><p>夏季饮品</p></a></li>
<li><a href="#"><img src="images/tuijian2.jpg"><p>夏季饮品</p></a></li>
<li><a href="#"><img src="images/tuijian3.jpg"><p>夏季饮品</p></a></li>
</ul>
</div>
<div class="share">
<div class="title">分享到 <a href="#"><img class=pic src="images/shrae.png" ></a></div>
<p>QQ：12345678</p>
<p>E-mail：<a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="05343736313033323d4574742b6666">[email protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></p>
</div>
</div>
<div class="footer">
<p> <a class="__yjs_email__" href="/cdn-cgi/l/email-protection" data-yjsemail="d83f51503e455b3e51583e4451983d7c573d757b3f4c443f5a61f53d564730516a3d4a4e3d4d79">[email protected]</a><script data-yjshash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-yjshash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-yjsemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> </p>
<p> 京ICP备12345678号</p>
</div>
<script src="js/changimages.js" type=text/javascript></script>
<script src="js/prototype.js" type=text/javascript></script>
<script>
var bigswitch = new SwitchPic(
{
bigpic:"SwitchBigPic",
switchnav:"SwitchNav",
selectstyle:"selected",
objname:"bigswitch"
}
) ;
bigswitch.goSwitch(bigswitch,0);
bigswitch.autoSwitchTimer = setTimeout("bigswitch.autoSwitch(bigswitch) ;", 3000);
</script>
</body>
</html>
CSS样式代码💒
@charset "utf-8";
* {
padding:0;
margin:0;
}
body {
font-size:12px;
font-family:arial;
color:#595959;
}
img {
border:none;
}
ul,li {
list-style-type:none;
}
a {
color:#333;
text-decoration:none
}
a:hover {
color:#ff0000;
text-decoration:underline
}
.content {
width:960px;
height:auto;
margin:auto;
padding:20px;
background:#fafafa;
}
.header {
width:960px;
height:80px;
margin:10px auto;
}
.logo {
width:120px;
height:80px;
float:left;
}
.logo img {
display:block;
height:72px;
margin-top:4px;
}
.nav {
height:80px;
line-height:80px;
}
.nav li {
float:left;
padding:5px 20px;
}
.nav li a {
font-size:24px;
color:#333;
font-weight:bold
}
.nav li a:hover {
font-size:24px;
color:#900;
text-decoration:none;
}
/*轮播*/
.lunbo {
width:960px;
height:430px;
margin:auto;
margin-bottom:30px;
}
.flashbox {
overflow:hidden;
position:relative;
width:100%;
height:430px;
}
.flashbox .pic {
width:760px;
height:430px;
position:absolute;
left:0;
top:0;
}
.flashbox ul {
width:200px;
height:340px;
position:absolute;
left:760px;
top:0;
}
.flashbox li {
margin-bottom:1px;
overflow:hidden;
line-height:24px;
height:85px
}
.flashbox li a {
display:block;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
background:#fff;
color:#333;
position:relative;
height:65px
}
.flashbox li.selected a {
background:#fff;
color:#333;
text-decoration:none
}
.flashbox li a:hover {
background:#74685b;
color:#333;
text-decoration:none
}
.flashbox li img {
width:100px;
height:65px;
float:left;
margin-right:5px;
}
/*内容*/
.main {
width:960px;
margin:auto;
overflow:hidden;
}
.tuijian {
width:620px;
height:180px;
float:left;
}
.tuijian .title {
height:30px;
line-height:30px;
border-bottom:2px solid #222;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.tuijian li {
width:190px;
height:140px;
float:left;
margin-left:8px;
margin-right:8px;
}
.tuijian li img {
width:190px;
height:116px;
display:block;
}
.tuijian li p {
height:24px;
line-height:24px;
background:#222;
text-align:center;
}
.tuijian li a {
color:#fff;
}
.tuijian li a:hover {
text-decoration:underline;
}
.share {
width:300px;
height:180px;
float:right;
}
.share .title {
height:30px;
line-height:30px;
border-bottom:2px solid #222;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.share p {
font-size:14px;
line-height:26px;
color:#666;
text-align:left;
}
/*底部*/
.footer {
width:960px;
height:60px;
margin:auto;
border-top:6px solid #ff0000;
background:#282828;
color:#fff;
padding-top:20px;
margin-top:20px;
}
.footer p {
text-align:center;
}
/*咖啡文化*/
.kafei {
overflow:hidden;
}
.kafei .title {
height:30px;
line-height:30px;
border-bottom:2px solid #222;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.kafei p {
line-height:2;
text-indent:24px;
}
.kafei img {
display:block;
width:100%;
margin:10px 0;
}
/*美食饮品*/
.meishi {
overflow:hidden;
}
.meishi .title {
height:30px;
line-height:30px;
border-bottom:2px solid #222;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.meishi li {
width:290px;
float:left;
margin:10px;
border:5px solid #fff;
}
.meishi li img {
width:290px;
height:200px;
}
/*美食新闻*/
.xinwen .title {
height:30px;
line-height:30px;
border-bottom:2px solid #222;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.xinwen li {
height:40px;
line-height:40px;
border-bottom:1px dashed #ccc;
}
.xinwen li p {
width:800px;
float:left;
}
.xinwen li span {
float:right;
}
/*留言*/
.liuyan .title {
height:30px;
line-height:30px;
border-bottom:2px solid #222;
font-size:16px;
font-weight:bold;
margin-bottom:8px;
}
.liuyan .input-box {
width:600px;
margin:auto;
line-height:30px;
margin-top:30px;
}
.liuyan .input-box input {
width:500px;
height:30px;
}
.liuyan .input-box textarea {
width:500px;
height:100px;
}
.liuyan .btn {
width:600px;
margin:auto;
margin-top:30px;
text-align:center;
}
.liuyan .btn input {
width:100px;
height:30px;
margin:10px;
}
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
