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

发布于:2025-02-11 ⋅ 阅读:(28) ⋅ 点赞:(0)

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

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

获取源码

1,访问该网站 https://download.csdn.net/download/qq_42431718/90208117
2,点击上方下载

目录1

在这里插入图片描述

项目视频

html+css网页制作 美食 美食网5个页面

页面展示

页面1

在这里插入图片描述

页面2

在这里插入图片描述

页面3

在这里插入图片描述

页面4

在这里插入图片描述

页面5

在这里插入图片描述

代码展示


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>美食网 - 美食列表</title>
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
    <div class="header">
        <div class="login-bar">
            <a class="qq-login" href="#">QQ登录</a>
            <a class="wb-login" href="#">微博登录</a>
        </div>
        <div class="logo">
            <img src="images/new_year_logo.gif" alt="美食网">
        </div>
        <ul class="nav">
            <li><a href="home.html">主页</a></li>
            <li><a href="recipes.html">美食菜单</a></li>
            <li><a href="suggest.html">讨论组</a></li>
        </ul>
    </div><!-- .header 结束-->
    <div class="main-content">
        <h2>美食列表</h2>
        <ul class="recipes">
            <li>
                <img src="images/egg.jpg" alt="西红柿炒鸡蛋">
                <h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
                <p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。</p>
                <!--<div class="clear"></div>-->
            </li>
            <li>
                <img src="images/egg.jpg" alt="西红柿炒鸡蛋">
                <h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
                <p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。</p>
                <!--<div class="clear"></div>-->
            </li>
            <li>
                <img src="images/egg.jpg" alt="西红柿炒鸡蛋">
                <h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
                <p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。</p>
                <!--<div class="clear"></div>-->
            </li>
            <li>
                <img src="images/egg.jpg" alt="西红柿炒鸡蛋">
                <h3><a href="egg.html">西红柿炒鸡蛋</a></h3>
                <p>这道菜,俺从小吃到大,它承载着我儿时的全部味觉记忆,啥也不说了,吃吧同志们。</p>
                <!--<div class="clear"></div>-->
            </li>
        </ul>
    </div><!-- .main-content 结束-->
    <div class="footer">
        <p>&copy;2015 - RecipeWorld - 美食网</p>
    </div><!-- .footer 结束-->
</body>
</html>

总结

设计一个样式美观又人性化的网页,除了具备扎实的专业知识,还需具备美学和人机工程学等相关知识,优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的,要去掉所有的冗余的东西;

2.使用方便

要满足使用者的要求,网页适合使用,显示出其功能美;

3.整体性好

围绕一个统一的目标设计,强调整体的功能性;

4.形象突出

尽量符合网页美的标准,能够使网站的形象得到最大限度的提升,追求雅俗共赏。页面用色协调,布局符合形式美的要求:布局有条理,充分利用美的形式,使网页富有可欣赏性,提高档次。

5.交互式强

发挥网络的优势,想方设法使每个使用者都参与到其中来。

更多推荐
【关注作者|获取更多源码|优质文章】;Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等,有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅:

html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客

关注作者,点赞收藏博文,获取更多源码,Thanks!5000+完整代码,主题涵盖30+种类型:

在这里插入图片描述


网站公告

今日签到

点亮在社区的每一天
去签到