目录

前言

高端大气的美食网页设计实例，应用html+css： Div、导航栏、留言表单、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。

一、网页概述

网页布局为“同字型”的布局，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底。

支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含6个页面：

 三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

logo

• 首页


• 饮食文化


• 美食分类


• 用户注册


• 用户登录


• 用户留言

辣味美食

辣味在众多味觉感受中最为奇特，它不似其它味道那么绵软，作为味觉感受中的一份子，吸引着人类不断尝试。

绿色美食

绿色食品定为A级和AA级两个标准。A级允许限量使用限定的化学合成物质，而AA级则禁止使用。

养生美食

药补不如食补,饮食养生是我国中医一个重要的传统理论，在长期的实践中积累了极为丰富的经验。

甜品美食

诱人的零食大多都是甜品，糕点是甜品，干果饮料是甜品，甜滑的口感让人心情愉悦，给人以幸福感。

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
body {
    margin: 0 auto;
    font-size: 12px;
    font-family: "微软雅黑",arial;
    line-height: 22px;
    background: #f9fae1;
}

div,p,input,ul,li,p,h1,h2,h3 {
    height: auto;
    margin: 0;
    ; padding: 0;
    vertical-align: middle;
}

li {
    list-style: none;
}

a {
    color: #333;
    text-decoration: none;
}

a:link {
    color: #333;
}

a:hover {
    color: #629705;
    text-decoration: none;
    overflow: hidden;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
}

.main {
    width: 1400px;
    height: auto;
    margin: 0 auto;
    background: #FFF;
}

.top {
    height: 545px;
    background:url(../images/top.jpg) no-repeat;
}
#nav{
    width:1400px;
    height:100px;
    background:#000000;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    z-index:9999;
    }
.logo{
    width:206px;
    height:54px;
    float:left;
    margin-top:19px;
    margin-left:110px;
    }
#nav ul{
    display:block;
    width:780px;
    height:50px;
    float:right;
    margin-right:70px;
    margin-top:36px;
    }
#nav ul li{
    height:50px;
    line-height:50px;
    float:left;
    margin:0px 30px;
    float:left;
    }
#nav ul li a{
    color:#FFF;
    font-size:18px;
    }

.i-div{
    width:1400px;
    height:942px;
    background:url(../images/ibg.jpg) no-repeat;
    }
.i-div-ner{
    width:1200px;
    height:570px;
    padding-top:20px;
    margin:0 auto;
    }
.idiv1{
    width:285px;
    height:570px;
    float:left;
    background:#282828;
    margin-right:17px;
    }
.idiv1 img{
    margin-bottom:15px;
    }
.idiv1 h1{
    height:35px;
    line-height:35px;
    color:#FFF;
    font-size:18px;
    padding:0px 17px;
    }
.idiv1 p{
    padding:0px 17px;
    line-height:25px;
    font-size:14px;
    color:#FFF;
    }
.mar0{
    margin-right:0px !important; 
    }
.green{
    background:#4d7c0b !important;
    }
.color2{
    background:#e16d0d !important;
    }
.color3{
    background:#67554b !important;
    }
.foot{
    height:136px;
    width:1400px;
    background:#272727;
    text-align:center;
    }
.foot img{
    margin-top:43px;
    }

/* 饮食文化 */
.whdiv{
    width:1400px;
    height: auto;
    overflow:hidden;
    background:#FFF;
    }
.whdiv-ner{
    width:1200px;
    padding-top:20px;
    margin:0 auto;
    }
.title{
    height:67px;
    padding-top:30px;
    margin-bottom:27px;
    text-align:center;
    }
.title h1{
    height:37px;
    line-height:37px;
    font-size:22px;
    font-weight:normal;
    }
.title h2{
    height:30px;
    line-height:30px;
    font-size:16px;
    font-weight:normal;
    }
.wh{
    width:1200px;
    height:818px;
    }
.wh-left{
    width:298px;
    height:795px;
    float:left;
    padding-top:20px;
    }
.wh-left img{
    margin-bottom:20px;
    }
.wh-right{
    width:854px;
    height:694px;
    float:left;
    }
.wshang{
    height:490px;
    }
.wshang .tit{
    width:60px;
    float:right;
    }
.wshang .wenzi{
    width:794px;
    height:460px;
    float:right;
    padding-top:20px;
    }
.wshang .wenzi .tit2{
    width:48px;
    height:245px;
    float:right;
    margin-left:15px;    
    }
.wshang .wenzi p {
    color:#272727;
    width: 30px;
    float: right;
    font-size: 16px;
    line-height: 18px;
    border-right:#333 1px solid;
    padding: 0px 2px;
    margin-right:10px;
    margin-right: 10px;
    text-align: right;
    }
.wxia{
    height:213px;
    }
.wxia img{
    margin-left:88px;
    }
/* 饮食分类 */
.fenlei{
    width:1200px;
    height:590px;
    margin-bottom:47px;
    }
.fenlei .titf{
    width:185px;
    height:70px;
    margin:0 auto;
    margin-bottom:35px;
    }
.fenlei ul{
    padding:0px;
    margin:0px;
    }
.fenlei ul li{
    width:251px;
    height:483px;
    float:left;
    margin-right:65px;
    text-align:center;
    }    
.fenlei ul li img{
    margin-bottom:5px;
    }
.fenlei ul li h1{
    height:33px;
    line-height:33px;
    font-weight:normal;
    color:#181818;
    font-size:20px;
    }
.fenlei ul li h2{
    display:block;
    width:55px;
    height:27px;
    border-bottom:#F00 1px solid;
    font-size:16px;
    line-height:27px;
    font-weight:normal;
    margin:0 auto;
    margin-bottom:17px;
    }
.fenlei ul li p{
    line-height:23px;
    font-size:14px;
    color:#1a1a1a;
    font-family:"宋体";
        }
/* 用户注册 */
.zhuce{
    height:575px;
    padding-top:20px;
    }
.zhuce-left{
    width:690px;
    height:595px;
    float:left;
    text-align:center;
    }
.zhuce-right{
    width:378px;
    height:383px;
    float:left;
    background:#fcf0e0;
    }
.zhuce-right .div1{
    height:30px;
    text-align:right;
    padding-right:10px;
    }
.zhuce-right .div2{
    height:37px;
    line-height:37px;
    font-size:16px;
    color:#080808;
    margin-bottom:12px;
    padding-left:35px;
    }

...

五、总结

一个优秀的网页应具备以下几个特点:

1.简洁实用

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

2.使用方便

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

3.整体性好

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

4.形象突出

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

5.交互式强

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

六、更多推荐

【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。