👨‍🎓静态网站的编写主要是用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 href="css/base.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
</head>

<body>
    <div id="header">
        <div class="header-con">
            <a class="logo"><img src="img/logo.png" alt="logo"></a>
            <div class="nav">
                <a href="javascript:void(0);">私宴介绍</a><a href="javascript:void(0);">解决方案</a><a href="javascript:void(0);">服务项目</a><a href="javascript:void(0);">关于我们</a>
                <b>私人宴请</b>
                <i>咨询热线：023-62791234</i>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div id="banner">
        <div class="banner">
            <div class="banner-bg">
                <div class="banner-con">
                    <h1>如需私宴定制请联系</h1>
                    <div class="line"></div>
                    <ul>
                        <li>
                            <a href="tel:023-62799534">
                                <div class="banner-img tel"></div>
                            </a>
                            <p>电话：023-62799534</p>
                        </li>
                        <li class="m-l-r-36">
                            <div class="banner-img erwei"></div>
                            <p>微信扫一扫咨询</p>
                        </li>
                        <li>
                            <a href="mailto:jubao@vip.sina.com">
                                <div class="banner-img email"></div>
                            </a>
                            <p>点击发送邮件</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="two">
        <div class="two-con">
            <h1>私宴介绍</h1>
            <div class="line"></div>
            <ul class="about">
                <li>
                    <div class="about-img imgone"></div>
                    <span class="bgo">历史久远  贵族尊享</span>
                    <p>现在很多人想跳出普通的饭局，来一次超然的吃喝体验，烹制独属自己的美食。其实，美食定制历史久远。太史蛇羹、历家菜、谭家菜、陆文夫在《美食家》中提到的苏州堂子菜，都是世家贵族玩得最高级的私人定制，出现在历史的长河里。</p>
                </li>
                <li class="m-l-r-80">
                    <div class="about-img imgtwo"></div>
                    <span class="bgo">量身打造  私人定制</span>
                    <p>这是一个崇尚个性的“私”时代，人人都想脱颖而出。每个人都想让自己的生活独一无二。不在意有多奢华，但必须恰当、舒心，我们无法做到真正物质上的私人定制，选择“私人定制”，只是一种新的生活方式。</p>
                </li>
                <li>
                    <div class="about-img imgthree"></div>
                    <span class="bgo">简单有内涵  永远的私人领域</span>
                    <p>选择一种新的生活方式，是对自己最大的放松，现在，人们不再希望与他人攀比，而是希望与别人不同，不同的体现不仅是私密还是特殊和唯一看似简单的用餐，要吃得最有品位、最有文化、最有内涵及最具传统，永远是私人领域。</p>
 
                <div class="tab-con tab-con6">
                    <div class="swiper-container swiper-container6">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="cs-con">
                                    <img src="img/hd/hd_1.jpg" width="250">
                                    <div class="cs-z">
                                        <h2>自娱活动</h2>
                                        <h3>宴请亲朋好友</h3>
                                        <p>生日约上朋友小聚，结婚接受亲朋好友的祝福，我们让您的宴会更加丰富多彩刻骨铭心。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="cs-con">
                                    <img src="img/hd/hd_2.jpg" width="250">
                                    <div class="cs-z">
                                        <h2>第三方活动</h2>
                                        <h3>宴请商业伙伴回馈客户</h3>
                                        <p>一个宴请有可能改变很多东西，安排客户一同享用一次愉快的用餐对建立起长久的人际关系有很大的帮助。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="cs-con">
                                    <img src="img/hd/hd_3.jpg" width="250">
                                    <div class="cs-z">
                                        <h2>定制活动</h2>
                                        <h3>专属于您的私人宴请</h3>
                                        <p>专业的定制服务团队为您量身打造专属于您的私人宴会，让你远离那些纷杂的餐厅，专心享受只属于你的欢乐时光，岂不是人生最大乐事？</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="arrow-left" href="javascript:void(0);">&lt;</a>
                    <a class="arrow-right" href="javascript:void(0);">&gt;</a>
                </div>
            </div>
        </div>
    </div>
    <div id="five">
        <div class="five-con">
            <div class="about-con">
                <img src="img/about.jpg" width="618">
                <div class="about-z">
                    <h1>关于我们</h1>
                    <div class="line"></div>
                    <p>我们为您提供私宴定制服务。我们专注于高品质的食材以及精湛的烹饪技艺顶级大厨将为您量身定制各类国际化的高端专属私宴，为您各种规模的商务宴请、客户回馈、私人特别纪念派对等提供精致以及美味的食物。<br><br>我们将以在私宴定制方面丰富的经验以及完善的服务，在所有的细节处为您和您的贵宾创造与传统晚宴迥然不同的高尚风格、优雅品位、独特享受。
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div id="six">
        <div class="six-con">
            <h1>如需私宴定制请联系</h1>
            <div class="line"></div>
            <ul>
                <li>
                    <a href="tel:023-62799534">
                        <div class="banner-img tel"></div>
                    </a>
                    <p>电话：023-62799534</p>
                </li>
                <li class="m-l-r-36">
                    <div class="banner-img erwei"></div>
                    <p>微信扫一扫咨询</p>
                </li>
                <li>
                    <a href="mailto:jubao@vip.sina.com">
                        <div class="banner-img email"></div>
                    </a>
                    <p>点击发送邮件</p>
                </li>
            </ul>
        </div>
    </div>
    <div id="footer">私人宴请定制 版权所有 201603041008</div>
</body>

</html>

CSS样式代码💒


img {
    border: 0;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #555;
}

* {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

* html {
    background-image: url(about:blank);
    background-attachment: fixed;
}

body {
    font-family: "Microsoft YaHei", "Lucida Sans Unicode", "Myriad Pro", "Hiragino Sans GB", "Heiti SC", Verdana, simsun;
    background: #fff;
    color: #555;
    font-size: 14px;
    overflow-x: hidden;
}

.line {
    width: 58px;
    height: 2px;
    background: #444;
    margin: 0 auto;
}

.m-l-r-36 {
    margin: 0 36px 0;
}

.m-l-r-80 {
    margin: 0 80px 0;
}

#header {
    width: 100%;
    height: 74px;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #fff;
    border-bottom: 1px solid #ccc;
    z-index: 99999
}

.header-con {
    width: 1220px;
    height: 75px;
    margin: 0 auto;
    padding-top: 10px;
}

.logo {
    width: 23px;
    height: 26px;
    display: block;
    margin: 0 auto;
}

.nav {
    width: 100%;
    font-size: 14px;
    position: relative;
    height: 35px;
    line-height: 40px;
}

.nav a {
    padding: 0 15px;
}

.nav b {
    width: 100%;
    font-size: 22px;
    font-weight: 100;
    position: absolute;
    bottom: 0px;
    display: block;
    text-align: center;
    z-index: -1;
}

.nav i {
    float: right;
    font-style: normal;
}

#banner {
    width: 100%;
    height: 600px;
    background: url(../img/banner1.jpg) no-repeat center center;
    margin: 0 auto;
    margin-top: 74px;
}


}


    text-align: left;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.about-z .line {
    width: 58px;
    height: 2px;
    background: #444;
    display: inline-block;
    text-align: left;
}

.about-z p {
    margin-top: 20px;
    line-height: 30px;
    font-size: 15px;
}

#six {
    width: 100%;
    height: 350px;
}

.six-con {
    width: 1220px;
    margin: 0 auto;
    height: 350px;
}

.six-con h1 {
    text-align: center;
    font-size: 24px;
    margin-top: 50px;
    font-weight: 500;
    margin-bottom: 20px;
    color: #333;
}

.six-con ul {
    width: 522px;
    height: 150px;
    margin: 0 auto;
    margin-top: 25px;
}

.six-con ul li {
    width: 148px;
    height: 195px;
    float: left;
}

.six-con ul li .banner-img {
    width: 148px;
    height: 148px;
    border: 1px solid #bbb;
    border-radius: 2px;
}

.six-con ul li p {
    line-height: 35px;
    text-align: center;
}

.six-con ul li .banner-img.tel {
    background: url(../img/tel.png) no-repeat 0px 0px;
}

.six-con ul li .banner-img.erwei {
    background: url(../img/erwei.png) no-repeat 0px 0px;
}

.six-con ul li .banner-img.email {
    background: url(../img/mail.png) no-repeat 0px 0px;
}

#footer {
    width: 100%;
    text-align: center;
    border-top: 1px solid #ddd;
    line-height: 45px;
    height: 45px;
}