123. Web前端网页案例——【食全食美美食主题网页（ 6页）】大学生期末大作业 html+css

最新推荐文章于 2025-04-28 10:15:58 发布

码农的码

最新推荐文章于 2025-04-28 10:15:58 发布

阅读量552

点赞数 22

分类专栏：餐饮文章标签：前端美食课程设计 html javascript html5 css

本文链接：https://blog.csdn.net/2301_82212046/article/details/144790425

版权

餐饮专栏收录该内容

7 篇文章

订阅专栏

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html+css，div+css布局，代码简单，适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含6个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</div>

<div id="mian">
<div id="left">
<div id="jies">生活中注意的饮食健康</div>
<img src="images/21.jpg" width="211" height="320" /><img src="images/22.jpg" width="205" height="330" /></div>
<div id="middle"><img src="images/333.jpg" width="540" height="684" /></div>
<div id="right"><img src="images/22.jpg" width="203" height="332" /><img src="images/26.jpg" width="203" height="351" /></div>

</div>

<div id="footer">
版权所有|主页 |联系我们| 邮箱地址

</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

body {
   margin: 0px;
   padding: 0px;
   background-color: #FFF;
}
#head {
   height: 146px;
   width: 966px;
   margin-right: auto;
   margin-left: auto;
   margin-bottom: 0px;
   background-color: #BF2C0A;
}
#mian {
   width: 964px;
   height: 700px;
   margin-right: auto;
   margin-left: auto;
   margin-top: 4px;
   background-color: #FFF;
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: #CCC;
   border-left-width: 1px;
   border-left-style: solid;
   border-left-color: #CCC;
}
#footer {
   width: 964px;
   margin-right: auto;
   margin-left: auto;
   height: 40px;
   text-align: center;
   padding-top: 10px;
   color: #FFF;
   letter-spacing: 2px;
   background-image: url(../images/footer.jpg);
}

#head #logo {
   height: 145px;
   width: 240px;
   float: left;
}
#head #back {
   float: left;
   width: 725px;
   height: 98px;
   background-image: url(../images/head1.jpg);
   background-repeat: repeat;
   margin-bottom: 0px;
}
#head #nav {
   float: left;
   width: 726px;
   background-color: #ed6857;
   background-image: url(../images/nav.jpg);
   background-repeat: repeat-x;
   line-height: 47px;
   font-size: 12px;
   color: #FFF;
   height: 47px;
   overflow: hidden;
}
#head #nav ul {
   height: 45px;
   float: left;
   margin-top: 0px;
   background-image: url(../images/nav.jpg);
   background-repeat: repeat-x;
   width: 609px;
   background-color: #ed6857;
}
#head #back table {
   float: right;
   margin-top: 50px;
   color: #910000;
}
#head #nav ul li {
   float: left;
   width: 110px;
   list-style-type: none;
   height: 45px;
   line-height: 45px;
   text-align: center;
   background-image: url(../images/nav.jpg);
   background-repeat: repeat-x;
   margin-left: 1px;
   color: #FFF;
   border-right-width: 1px;
   border-right-style: solid;
   border-right-color: #FFF;
   font-size: 14px;
   margin-top: 2px;
}
#head #nav a {
   color: #FFF;
   text-decoration: none;
}
#head #nav a:hover {
   color: #F00;
   text-decoration: underline;
}