大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计美食美食模版1个页面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42431718/article/details/144909632

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css网页设计美食美食模版1个页面

网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

获取源码

1，访问该网站 https://download.youkuaiyun.com/download/qq_42431718/90219820
2，点击上方下载

目录1

在这里插入图片描述

项目视频

html+css网页设计美食美食模版1个页面

页面展示

页面1

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>美食网站</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<!-- 顶部-->
<div id="top"></div>
<!-- 导航-->
<div id="nav">
    <ul>
        <li><a href="#" class="select">home</a> </li>
        <li><a href="#">about us</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">order</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>
<!-- 列表-->
<div id="list">
    <!--食物-->

    <div class="item">
        <img src="img/food1.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food2.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food3.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food4.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food1.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food2.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food3.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food4.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
    <div class="item">
        <img src="img/food1.jpg">
        <p>there are countless reasons to prove the strengh of chinese cusine, here i just pick three of them to show the advantage of the chinese cusine. </p>
        <a href="#">read more</a>
    </div>
</div>
<!--尾部-->
<div id="footer">
    <!--尾部的标题-->
    <h2>contact us</h2>
    <!--尾部的分享-->
    <div>
        <ul>
            <li>
                <a href="#"><img src="img/fb.png"></a>
                <a href="#"><img src="img/g+.png"></a>
                <a href="#"><img src="img/rss.png"></a>
                <a href="#"><img src="img/tw.png"></a>

            </li>
        </ul>
    </div>
</div>
</body>
</html>