179.大学生HTML期末大作业 —【美食主题网页】 Web前端网页制作 html+css

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/143737814

一、更多推荐

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

5000+网页案例完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html+css+js： Div、导航栏、下拉菜单、图片轮翻效果、悬浮菜单等。适用于大学生网页课程作业设计，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

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

四、网页效果

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

五、代码展示

1.html

<body>
<div class="con">
<div class="head">
<div class="logo"><a href="#"><img src="images/logo.png" /></a></div>
<div class="cart">
<ul>
<li><img class="fl" src="images/c1.png" /><a href="#.html">购物车中共有0个商品</a> </li>
<li><img class="fl pt3" src="images/c2.png" /><a href="#.html">去结算</a> </li>
</ul>
</div>

<div class="nav">
<ul>
<li><a href="#.html">首页</a> </li>
<li><a href="#.html">美食世界</a> </li>
<li><a href="#.html">美食地理</a></li>
<li><a href="#.html">美食DIY </a></li>
<li><a href="#.html">食材库 </a></li>
<li style="margin-left:250px;"><a href="#.html">关于我们</a></li>
</ul>
</div>

<div class="search"><a href="#"><img class="fl" src="images/search.png" /></a>
<div class="hot_search">
<ul>
<li><a href="#.html">热门搜索：</a> </li>
<li><a href="#.html">牛肉</a> </li>
<li><a href="#.html">鲜虾</a></li>
<li><a href="#.html">咖喱</a></li>
<li><a href="#.html">海鲜片 </a></li>
<li><a href="#.html">鱿鱼丝 </a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>

<div class="main">
<div class="main_list">
<h2>商品分类</h2>
<div class="clear"></div>

<ul>

</div>
<div class="clear"></div>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

body{ background:url(../images/bj.jpg) top center no-repeat #503415;}
* { margin:0; padding:0; font-family:黑体;}
IMG { border:none;}
ul,li{ list-style:none; list-style-type:none;}
A { COLOR: #257ec0; TEXT-DECORATION: none}
A:hover { COLOR: #ff7202; TEXT-DECORATION: underline}
.center{ text-align:center;}
.fl{ float:left;}
.fr{ float:right;}
.clear{ clear:both;}
.m10{ margin:10px;}
.m20{ margin:20px;}
.m30{ margin:30px;}
.pt3{ padding-top:3px;}
.pt5{ padding-top:5px;}

.con{ width:1600px; height:900px; margin:auto;}

.head{width:1600px; height:200px; margin:auto; background:url(../images/nav_bj.png) top right no-repeat;}
.logo{ width:110px; height:120px; float:left;}
.cart{ width:330px; height:30px; float:right;}
.cart li{ float:left; padding:5px;}
.cart a{ font-size:16px; color:#fff; line-height:26px;}

.nav{ width:1300px; height:80px; float:left;}
.nav ul{ padding-left:200px; padding-top:30px;}
.nav li{ float:left; padding:5px 40px;}
.nav li a{ font-size:18px; color:#fff; line-height:36px;}
.nav li a:hover{}
.nav dl{ width:auto; padding-bottom:10px; background-color:rgba(255,255,255,0.8);display:none;}
.nav dl dd{ height:20PX;padding:5px 30px; text-align:center;}
.nav dl dd a{ line-height:28px; color:#333;}
.nav li:hover{ }
.nav dd:hover{ }
.nav li:hover dl{ display:block; position:absolute}

.search{ width:770px; height:60px; float:left; margin-left:200px; margin-top:10px;}
.hot_search{ width:500px; height:60px; float:left;}
.hot_search ul{ padding-left:10px;}
.hot_search li{ float:left; padding:5px 10px;}
.hot_search li a{ font-size:16px; color:#fff; line-height:46px;}
.hot_search li a:hover{}

.main{ width:1380px; height:600px; margin:10px auto;}

.main_list{ width:340px; height:560px; float:left;}
.main_list h2{ width:330px; height:40px; background:#393836; font-size:18px; padding-left:10px; line-height:38px; color:#fff; text-align:left; float:left;}
.main_list ul{ width:340px; height:480px; background:#8c9d41; margin-top:5px; padding-top:30px;}
.main_list li{ width:200px; height:55px; padding-top:20px; margin:auto; text-align:center; background:url(../images/li_bj.png) bottom no-repeat;}
.main_list li a{ font-size:22px; color:#ddd; line-height:36px;}
.main_list li a:hover{font-size:24px; color:#fff; line-height:36px; text-decoration:none;}

.main_right{ width:1006px; height:590px; float:left; margin-left:20px; background:url(../images/main_right.png) top left no-repeat;}

.foot{ width:1600px; height:70px; background:#393836;}
.foot ul{ width:950px; height:30px; margin:20px auto; padding-top:20px;}
.foot li{ float:left; padding:1px 20px; border-left:1px solid #ddd;}
.foot li a{ font-size:16px; color:#ddd; line-height:26px;}

...