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

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

大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计美食美食3个页面(带js)

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

获取源码

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

目录1

在这里插入图片描述

项目视频

html+css+js网页设计美食美食3个页面

页面展示

页面1

在这里插入图片描述

页面2

在这里插入图片描述

页面3

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>首页</title>
  <link rel="icon" href="./images/shrae.png">
  <link href="css/movie_index.css" type=text/css rel=stylesheet>
  <script src="js/prototype.js" type=text/javascript></script>

</head>

<body>
  <audio autoplay loop id="audios" preload="auto">
    <source src="./video/1.mp3">
  </audio>
  <div class="con">
    <div class="head">
      <div class="nav">
        <ul>
          <li><a href="index.html">首页</a></li>

          <li><a href="caipu.html">菌类菜谱</a></li>
          <li><a href="lianxi.html">联系我们</a></li>

        </ul>
      </div>
    </div>
    <div class="lunbo">
      <script src="js/changimages.js" type=text/javascript></script>
      <table width="1000" height="314" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left">
            <div class=flashbox align="center">
              <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="#"><strong>菌鱼汤</strong><img src="images/r1.jpg"></a> </li>
                <li><a href="#"><strong>菌类</strong><img src="images/r2.jpg"></a> </li>
                <li><a href="#"><strong>菌</strong><img src="images/r3.jpg"></a> </li>
                <li><a href="#"><strong>菌</strong><img src="images/r4.jpg"></a> </li>
                <li><a href="#"><strong>菌</strong><img src="images/r5.jpg"></a> </li>
              </ul>
            </div>
            <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>
          </td>
        </tr>
      </table>
    </div>
    <div class="main">
      <div class="tuijian">
        <div class="tuijian_t">展示 </div>
        <div class="tui_div">
          <div class="tui_div_t">菌</div>
          <div class="tui_div_img">

            <a href="#"><img class=pic src="images/1.jpg " width="190" height="116"></a>

          </div>
        </div>
        <div class="tui_div">
          <div class="tui_div_t">菌</div>
          <div class="tui_div_img"><a href="#"><img class=pic src="images/2.jpg" width="190" height="116"></a></div>
        </div>
        <div class="tui_div">
          <div class="tui_div_t">菌</div>
          <div class="tui_div_img"><a href="#"><img class=pic src="images/3.jpg" width="190" height="116"></a></div>
        </div>
      </div>
      <div class="share">
        <div class="share_t">菌 <a href="#"><img class=pic src="images/shrae.png"></a></div>
        <div class="">
          <p> 菌知食品科技有限公式</p>
          <p> 金经理 </p>
          <p>dfask@gmail.com</p>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
    <div class="foot">
      <div style="clear:both"></div>
      <p> 版权所有 </p>
    </div>
  </div>
</body>
<script>
  const audio = document.getElementById('audios');
  audio.play();
</script>

</html>```

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

### 1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

#### 2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；

### 3.整体性好
围绕一个统一的目标设计，强调整体的功能性； 

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

### 5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。 

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

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



  [html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
  [html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)
  [html+css+js网页设计 优快云博客](https://blog.youkuaiyun.com/qq_42431718)


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

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c50daa34ec5b4de380845efd7a73f8c1.png#pic_center)