HTML5期末大作业：健康网页设计——健康菜谱7页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计

HTML5期末大作业：健康网页设计——健康菜谱7页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计

 HTML+CSS+JavaScript（毕业设计）
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, 可满足大学生网页大作业和毕业网页设计需求!

临近期末, 很多同学苦于没有参考的资料，或者下载的资料不全、代码有问题、数据有问题等等,造成一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
作品介绍

1.用 HTML 结构标记（或 div 标记）+CSS 进行布局定位（如在 1024×768下全屏显示无横向滚动条）。

2.作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

3.网站页面标题、创意设计制作的 Logo 图标和 Banner 广告符合网站主题。 

4.首页栏目数量不少于 3 个，各栏目能正确链接到相应栏目页面，同时各栏目页面能正确返回网站首页。

5.网站内容具有原创性，内容充实，特效且运用合理。

6.网站整体色系符合视觉习惯，布局合理美观，结构层次清楚，目录结构清晰，文件及文件夹命名规范。

一、作品展示

 

 

 

 

 

二、文件目录

三、代码实现

html xmlns=httpwww.w3.org1999xhtml
head
meta http-equiv=Content-Type content=texthtml; charset=utf-8 
title首页title
link href=..stylebase.css type=textcss rel=stylesheet 
link  href=..styleindex.css type=textcss  rel=stylesheet
head

body
div class=header
  ul class=nav
    li class=nav-lista href=#关于我们a
      ul class=sub-nav
        li class=nav-lista href=team.html团队ali
        lia href=work ith us和我们一起工作ali
      ul
    li
    li class=nav-list a href=#博客ali
    li class=nav-lista href=#联系我们ali
    li class=nav-lista href=index.html返回首页ali
    li class=nav-lista class=market href=#市场ali
    li class=nav-lista  class=product href=#产品ali
    li class=nav-lista  class=rsshref=#RSS Feedali
  ul
div
div class=middleimg  src=..imagelogo.pngdiv
div class=third
  div class=wrap
    ul class= menu clearfix
      li class=menu-lista href=nomeat.html菜谱a
        ul class=sub-menu
          li class=sub-menu-lista href=nomeat.html青豆香干ali
          li class=sub-menu-lista href=nomeat.html猪肉炖粉条ali
          li class=sub-menu-lista href=nomeat.html辣子鸡ali
          li class=sub-menu-lista href=nomeat.html糖醋排骨ali
          li class=sub-menu-lista href=nomeat.html宫保鸡丁ali
          li class=sub-menu-lista href=nomeat.html水煮鱼ali
          li class=sub-menu-lista href=nomeat.html黄鱼炖豆腐ali
          
        ul
      li
      li class=menu-lista href=health.html饮食健康a
        ul class=sub-menu
          li class=sub-menu-lista href=health.html饮食健康ali
          li class=sub-menu-list a href=health.html健康小常识ali
         
          li class=sub-menu-lista href=health.html健康水果ali
          li class=sub-menu-lista href=health.html健康标准ali
        ul
      li
      li class=menu-lista href=sport.html运动a
        ul class=sub-menu
          li class=sub-menu-lista href=sport.html瑜伽ali
          li class=sub-menu-lista href=sport.html健美操ali
          li class=sub-menu-lista href=sport.html慢跑ali
          li class=sub-menu-lista href=sport.html游泳ali
          li class=sub-menu-lista href=sport.html羽毛球ali
        ul
      li
      
      li class=menu-lista href=yangsheng.html养生菜谱a
        ul class=sub-menu
          li class=sub-menu-lista href=yangsheng.html养生粥ali
          li class=sub-menu-lista href=yangsheng.html养生菜ali
        ul
      li
      li style=floatright li
    ul
  div
div
div class=content
  div class= section1 clearfix 
    div class=sectiona href=nomeat.htmlimg  src=..imagelasagna_verde_recipe-600x400.jpgadiv
    div class=right
      h2a href=#59 Fabulous (and Vegetarian) Mother’s Day Brunch Recipesah2
      p在母亲节这天给你的妈妈做一个美味的菜肴吧!你的这个小小的动作充满了无限爱意！p
      span更多菜谱↓spandiv
  div
  div class= section2 clearfix
    div class=entry entry1img src=..image1.jpg 
      h2 class=entry-titlea href=nomeat.htmlFrench Onion Soup Sandwichesah2
    div
    div class=entry entry2img src=..image2.jpg 
      h2 class=entry-titlea href=nomeat.html50 Vegetarian Sandwich Recipesah2
    div
    div class=entry entry3img src=..image3.jpg 
      h2 class=entry-titlea href=nomeat.htmlZucchini & Corn Panini with Pepper Jack Cheeseah2
    div
  div
  div class=section3
    div class=clearfix
      h4让我们保持着联系!h4
      p请及时产看邮件p
      form
        input class=search type=text placeholder=邮箱地址 
        input  class=search-bt type=button value=sign in
      form
    div
  div
  div class=section4 span class=inner-header最新的菜单 span
 
    a href=# style= color#ff8d28; class=view-moreview morea div
  div class=section5span class=header5IN THE MARKETPLACEspan 
    div class=clearfix
      div class=entry-odd a href=sport.htmlimg src=..imagesection5-1.jpg a
        h2a href=sport.html瑜伽ah2
        pa href=sport.html消除烦恼  提高免疫力  集中注意力    增加活力ap
        h3a href=sport.html详细了解ah3
      div
      div class=entry-even a href=sport.html img src=..imagesport2.jpg a
        h2a href=sport.html健美操ah2
        pa href=sport.html有氧运动    集体操、舞蹈、音乐、健身、娱乐于一体的体育项目   强身健体  ap
        h3a href=sport.html详细了解ah3
      div
      div class=entry-odd a href=sport.htmlimg src=..imagesport3.jpg a
        h2a href=sport.html慢跑ah2
        pa href=sport.html有氧代谢运动    增进健康  增强体质ap
        h3a href=sport.html详细了解ah3
      div
      div class=entry-evena href=sport.html img src=..imagesport4.jpg a
        h2a href=sport.html游泳ah2
        pa href=sport.html改善心血管系统   增强抵抗力    健美形体    加强皮肤血液循环ap
        h3a href=sport.html详细了解ah3
      div
    div
  div
div
div class=footer© @版权所有div
script type=textjavascript src=..jsjquery-1.7.1.min.jsscript 
script type=textjavascript src=..jsbase.jsscript
body
html

看到这里了就 [点赞+好评+收藏] 三连 支持下吧！