web网页设计实例作业 ——河南美食介绍(4页) web期末作业设计网页_甜品美食大学生网页设计作业成品

本文链接：https://blog.csdn.net/qq_524614081/article/details/122399483

这是一个HTML5期末大作业，展示了关于河南美食的四页介绍网站设计。内容包括作品展示、文件目录、代码实现和获取更多源码的途径。

摘要由CSDN通过智能技术生成

HTML5期末大作业：美食介绍网站设计——河南美食介绍(4页)

文章目录

HTML5期末大作业：美食介绍网站设计——河南美食介绍(4页)
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
    	*{
    		margin:0;
    		padding:0;
    		}
			ul{
				list-style:none;
				text-align: center;
			}
			a{
				display:block;
				text-align: center;
				text-decoration: none;	
			}
      .header{
        position:fixed;
        top:0;
        width:100%;
        height:70px;
        line-height:70px;
        z-index:999;
        text-align: center;
        color:#cacaca;
        padding:0 40px;
        background: #545454;
        min-width:1280px;
      }
      .header .logo{
        float: left;
        display:block;
        width:150px;
        margin-left:100px;
        font-size:20px;
      }
      .header .logo img{
        width:100%;
        height:70px;
        vertical-align: middle;
      }
      .header .logo .logo-hover{
        display:none;
        position:absolute;
        width:250px;
        height:50px;
      }
      .header .navs{
        float: left;
        margin-left:50px;
        display:block;
        width:500px;
      }
      .header .navs .navs-btn{
        float: left;
        display:block;
        width:20%;
      }
      .header .navs .navs-btn a{
        display:block;
        width:100%;
        line-height: 70px;
        font-size:25px;
        color:#cacaca;
      }
      .header .search{
        float: left;
        width:220px;