【网页制作html】第002篇-html网页制作 [美食主题-甜品系列]

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

三、📚网站介绍

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

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

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

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaer、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字图片等；

四、🌐网站演示

完整效果：

目录结构

1、首页

2、蛋糕

3、面包

4、冰激凌

五、⚙️ 网站代码

🧱HTML结构代码

<!doctype html>
<html>
<!-- InstanceBegin template="/Templates/mb.dwt" codeOutsideHTMLIsLocked="false" -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>首页系列</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/sy.css">
</head>

<body>
    <!-- #BeginLibraryItem "/Library/header.lbi" -->
    <div class="header">
        <div class="wrap">
            <div class="logo"> <img src="images/logo.png" alt=""></div>
            <nav class="nav">
                <ul>
                    <li class="active"><a href="index.html">首页</a></li>
                    <li><a href="dangao.html">蛋糕</a></li>
                    <li><a href="mianbao.html">面包</a></li>
                    <li><a href="bingjiling.html">冰淇淋</a></li>
                    <li><a href="#">咖啡下午茶</a></li>
                </ul>
            </nav>
            <div class="login">
                <p><img width="28" height="24" src="images/che.png" alt=""> <a href="#">登录/注册</a></p>
            </div>
        </div>

    </div>
    <!-- #EndLibraryItem -->
    <div class="main">
        <section class="banner"><img src="images/banner.jpg" width="1140" height="480" alt="" /></section>
        <div class="main-part1">
            <ul>
                <li>
                    <div>新品</div><img width="170" height="125" src="images/白色红丝绒.png" alt="">
                </li>
                <li>
                    <div>人气产品</div><img width="170" height="125" src="images/慕尼黑巧克力.png" alt="">
                </li>
                <li>
                    <div>生日</div><img width="170" height="125" src="images/蓝妃儿.png" alt="">
                </li>
                <li>
                    <div>原料</div><img width="170" height="125" src="images/沃尔夫斯堡之春.png" alt="">
                </li>
            </ul>
        </div>
        <div class="main-part2 xp">
            <h4><span class="font-w">新品</span>/专区</h4>
            <img width="1140" height="467" src="images/焦点图1.jpg" alt="">
            <div class="img_text_text">
                <ul>
                    <li>
                        <img width="220" height="145" src="images/杏仁芝士蛋糕.jpg" alt="">
                        <p class="p1">杏仁芝士蛋糕</p>
                        <p class="p2">298.00/2.0磅</p>
                    </li>
                    <li>
                        <img width="220" height="145" src="images/黑巧克力.jpg" alt="">
                        <p class="p1">黑巧克力
                        </p>
                        <p class="p2">300/002.0磅</p>
                    </li>
                    <li>
                        <img width="220" height="145" src="images/梅果布丁蛋糕.jpg" alt="">
                        <p class="p1">梅果布丁蛋糕
                        </p>
                        <p class="p2">200/002.0磅</p>
                    </li>
                    <li>
                        <img width="220" height="145" src="images/蓝莓酸奶.jpg" alt="">
                        <p class="p1">蓝莓</p>
                        <p class="p2">300/002.0磅</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <footer class="footer">
        <img src="images/logo.png" alt="">
        <div class="foot_right">
            <p>Copyight © chaodake</p>
        </div>
    </footer>
</body>

</html>