求一份网页设计结课大作业，要求用到html，css，javascript，的知识

最新推荐文章于 2024-04-10 14:07:05 发布
最新推荐文章于 2024-04-10 14:07:05 发布
阅读量157 收藏
点赞数
分类专栏： 网页设计与制作 文章标签： html网页模版 学生网页作业 网页设计与制作 web期末大作业 网站建设
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512571/article/details/127503079
版权

👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

🎀 精彩专栏推荐👇🏻👇🏻👇🏻

🧡 【作者主页——🔥获取更多优质源码】
🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录📂

一、网站题目👨‍🎓

🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

二、网站描述✍️

🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

三、网站介绍📚

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、代码实现 🪓

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>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="header">
    	<div class="header-zj">
            <div class="login"><a href="zhuce.html">注册会员</a> | <a href="login.html">登陆入口</a></div>
            <div class="sc">设为首页 | 加入收藏夹 | <a href="contact.html">联系我们</a></div>
            <div class="lang">中文 | 韩语</div>
        </div>
    </div>
<div id="wrap">
    <div id="nav">
        <div class="logo"><img src="img/logo.png" width="100%" height="100%"/></div>
        <div class="nav-1">
            <select class="nav_op">
            	<option>青岛</option>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>天津</option>
                <option>沈阳</option>
                <option>大连</option>
                <option>重庆</option>
                <option>西安</option>
                <option>成都</option>
                <option>燕郊</option>
                <option>延边</option>
                <option>烟台</option>
                <option>威海</option>
            </select>
            </div>
            <div class="search">
            	<div id="search_box"> 
                <form id="search_form" method="post" action="#"> 
                    <input type="text" id="s" value="输入您想要的商品" class="swap_value" /> 
                    <input type="image" src="img/soso.png" width="25px" height="25px" id="go" alt="Search" title="Search" /> 
                </form> 
        		</div> 
        	</div>
    </div>
    
      <div id="nav-nav">
      <ul id="nav">
            <li><a href="#">网站首页</a></li>
            
            <li><a href="#">快餐送餐</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            
            <li><a href="#">特色饭店</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            
            <li><a href="#">休闲娱乐</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            
            <li><a href="#">综合超市</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            <li><a href="#">旅游宾馆</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            
            
            <li><a href="#">订制礼品</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            
            <li><a href="#">服务培训</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
            
            <li><a href="#">医院其他</a>
             <ul>
             <li><a href="#">炸鸡</a></li>
             <li><a href="#">烧烤</a></li>
             <li><a href="#">西餐</a></li>
             <li><a href="#">牛排</a></li>
             <li><a href="#">中餐</a></li>
             <li><a href="#">面包</a></li>
             </ul>
            </li>
    	</ul>             
      </div>
  <div id="mainbody">
  <div class="banner">
      	<table width="100%" border="0" cellspacing="0" class="b-pic">
        	<tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/1.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/2.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/3.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/4.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/5.png" width="100%" height="100%"/></a></td>
            </tr>
            <tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/6.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/7.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/8.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/9.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/10.png" width="100%" height="100%"/></a></td>
            </tr>
            <tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/11.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/12.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/13.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/14.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/15.png" width="100%" height="100%"/></a></td>
            </tr>
            <tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/1.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/2.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/3.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/4.png" width="100%" height="100%"/></a></td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/5.png" width="100%" height="100%"/></a></td>
            </tr>
        </table>
      </div>
    
    
  </div>
  <h4 class="text"><a href="fl.html">快餐送餐</a></h4>
  <div id="main1">
    <div class="con">
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/7.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/8.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/9.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/10.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/1.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单</span></p>
            </div></a>
            <a href="dc.html"><div class="left2">
                <div class="pic"><img src="img/2.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单</span></p>
            </div></a>
        </div>
  </div>
  <h4 class="text"><a href="fl.html">特色饭店</a></h4>
  <div id="main1">
    <div class="con">
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/7.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/8.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/9.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/10.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/1.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起</span></p>
            </div></a>
            <a href="dc.html"><div class="left2">
                <div class="pic"><img src="img/2.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起</span></p>
            </div></a>
        </div>
  </div>
  
  <!--休闲娱乐--><h4 class="text"><a href="fl.html">休闲娱乐</a></h4>
  <div id="main1">
  	<div class="con">
            <div class="left1">
                <table width="100%" border="0" cellspacing="0" class="conleft">
                	<tr>
                    	<td><a href="fl-qt.html">ktv</a></td>
                        <td><a href="fl-qt.html">洗浴</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">温泉</a></td>
                        <td><a href="fl-qt.html">足疗保健</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">美容美甲</a></td>
                        <td><a href="fl-qt.html">美发</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">瑜伽</a></td>
                        <td><a href="fl-qt.html">游泳</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">咖啡</a></td>
                        <td><a href="fl-qt.html">酒吧</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">高尔夫</a></td>
                        <td><a href="fl-qt.html">台球厅</a></td>
                    </tr>
                </table>
            </div>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/2.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/3.gif" width="100%"/></div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/4.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情</span></p>
            </div></a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/5.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情</span></p>
            </div></a>
            <a href="dc.html"><div class="left2">
                <div class="pic"><img src="img/6.gif" width="100%"/></div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情</span></p>
            </div></a>
        </div>
  </div><!--休闲娱乐-->
  
  <!--综合超市--><h4 class="text"><a href="fl.html">综合超市</a></h4>
  <div id="main1">
  	<div class="con">
            <div class="left1">
                <table width="100%" border="0" cellspacing="0" class="conleft">
                	<tr>
                    	<td><a href="fl-qt.html">ktv</a></td>
                        <td><a href="fl-qt.html">洗浴</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">温泉</a></td>
                        <td><a href="fl-qt.html">足疗保健</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">美容美甲</a></td>
                        <td><a href="fl-qt.html">美发</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">瑜伽</a></td>
                        <td><a href="fl-qt.html">游泳</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">咖啡</a></td>
                        <td><a href="fl-qt.html">酒吧</a></td>
                    </tr>
                    <tr>
                    	<td><a href="fl-qt.html">高尔夫</a></td>
                        <td><a href="fl-qt.html">台球厅</a></td>
                    </tr>
                </table>
            </div>

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

CSS样式代码💒

/* CSS Document */

#nav {line-height: 24px; list-style-type:none;  width:100%; margin:0px auto; text-align:center;}
ul#nav{ width:100%; height:40px; background:#ff7f00;margin:0 auto; text-align:center; }
ul#nav li{display:inline; height:40px;}
ul#nav li a{display:inline-block; padding:0 15px; height:40px; line-height:40px; color:#FFF;  font-size:14px}
ul#nav li a span{ background:#f76647; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;}

#nav a {display:block; width:76px; text-align:center;}
#nav a:link {color:#fff; text-decoration:none;}
#nav a:visited {color:#fff; text-decoration:none;}
#nav a:hover {color:#FFF; text-decoration:none; font-weight:bold;}
#nav li {float:left; }
#nav li a:hover{background:#f76647;}
#nav li ul {line-height:27px; list-style-type: none; text-align:left; left:-999em; width: 100px; position: absolute; }
#nav li ul li{float:left; width: 110px; background:#F6F6F6; }
#nav li ul a{display: block; width:150px; width: 150px; text-align:left; padding-left:24px;}
#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3; text-decoration:none; font-weight:normal; width:70px; background:#ccc;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}


*{margin:0; padding:0; font-size:14px; color:#323232; list-style:none; font-family:"\5FAE\8F6F\96C5\9ED1";}
a{color:#666; text-decoration:none;}
a:hover{text-decoration:underline; color:#ed384b;}
h2{line-height:20px; margin-left:10px; margin-top:10px;}
h2 span{float:right;}
h2 span a{font-size:12px; font-weight:normal;}
h3{line-height:25px; margin-left:10px; margin-top:10px; margin-bottom:20px;}
h3 span{ color:#F00;}
h4{ margin-left:10px;}
#wrap{width:960px; margin:0 auto;}
#header,#mainbody{width:100%; overflow:hidden; margin-bottom:10px;}
.header{ width:100%; margin:0px auto; font-size:12px; height:25px; background:#fafafa; border-bottom:#CCC 1px solid;}
.header-zj{ width:80%; margin:0px auto; line-height:25px;}
.lang{ text-align:left; float:right; margin-right:20px;}
.login{ float:left; }
.sc{ float:right;}
.logo{ width:50%; height:auto; float:left; margin-top:10px;}
.header-2{ height:100px; width:100%;}
.nav_op{  height:30px; line-height:30px; width:80px; margin-top:80px;}
.nav-1{ height:50px; line-height:50px; float:left; width:15%;}
.logo{ width:50%; height:auto; float:left; margin-top:10px;}

.search{ float:right; margin-top:30px; color:#fff; width:30%;}
form { margin: 0; } 
#search_box { width: 250px; height: 30px; border:#ff7f00 1px solid; float:right;} 
#search_box #s { float: left; padding: 0; margin: 6px 0 0 6px; border: 0; width: 100px; background: none; font-size:12px; color:#999; }
#search_box #go { float: right; margin: 3px 4px 0 0; }



#con1{ width:100%; margin:0px auto; height:auto; height:230px; border-top:#e9e7ef 1px solid; margin-top:20px;}
#con1 .left1{ width:24.8%; border-right:#e9e7ef 1px solid;  float:left; height:253px;}
#con1 .left2{ width:24.8%; float:left; height:253px;}
#con1 .pic{ width:80%; margin:10px auto; height:auto;}
p{ width:80%; margin:0px auto; height:auto; font-size:14px; line-height:20px;}
p span{ color:#F00;}
#con1 .button{ width:90%; margin:0px auto; height:auto; font-size:12px; border:0px; background:#fff;}
#con1 .button-left{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}
#con1 .button-right{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}

#main1{ width:100%; border:#e9e7ef 1px solid; margin-top:10px; margin-bottom:10px;}
#main1 .con{ width:100%; margin:0px auto; height:230px; border-bottom:#e9e7ef 1px solid;}
#main1 .left1{width:16.5%; border-right:#e9e7ef 1px solid;  float:left; height:230px; margin:0px auto;}
#main1 .pic{ width:80%; margin:10px auto; height:auto; }
#main1 .left2{ width:16.5%; float:left; height:230px; margin:0px auto;}
#main1 p{ width:80%; margin:0px auto; height:auto; font-size:14px; }
#main1 .button{ width:90%; margin:0px auto; height:auto; font-size:12px; border:0px; background:#fff;}
#main1 .button-left{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}
#main1 .button-right{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}
.conleft{ margin:10px auto; text-align:left; line-height:30px; font-size:10px; margin-left:10px;}

.butto{width:100%; margin:10px auto; height:40px; font-size:12px; border:0px; text-align:center;}
.button-lef{width:48%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:left; text-align:center;}
.button-righ{width:48%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:right; text-align:center;}
.button-left{width:100%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:left; text-align:center;}
.button-right{width:100%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:right; text-align:center;}


.text{ width:100%; height:20px; line-height:20px; font-size:14px; color:#F00; margin-top:10px; margin-bottom:10px;}
.text a{ width:100%; height:20px; line-height:20px; font-size:14px; color:#F00; margin-top:10px;}
.text span{ width:100%; height:20px; line-height:20px; font-size:14px; color:#000; margin-top:10px;}

.downlist{width:100%; overflow:hidden;}
.downlist li{overflow:hidden; line-height:26px; padding-left:23px; margin-bottom:5px;}
.downlist li span{float:right; font-size:12px; color:#630063;}
.downlist li span a{font-size:12px; text-decoration:underline;}
.downlist li span a:hover{text-decoration:none;}

.newslist{width:95%; margin:10px auto;}
.newslist li{line-height:30px; border-bottom:#ccc 1px dashed; font-size:12px;}
.newslist p{line-height:30px; }

.fri_link{width:100%;}
.fri_link a{width:88px; float:left; font-size:12px; margin-right:5px; line-height:26px;}

.margin_btm_15{margin-bottom:15px;}


#footer{margin-top:10px; padding:15px 0; width:100%; text-align:center; border-top:1px solid #e6e6e6; background:#f8f8f8;}
#footer li{line-height:24px; color:#9e9e9e; font-size:12px;}
.footer{ width:100%; margin:0px auto; height:130px; margin-top:20px;  font-size:12px;}
.footer ul{ padding:5px; margin:10px; width:100%;  font-size:12px;}
.footer li{list-style-type:none; display:inline; width:10%; height:auto; float:left; margin-right:10px; position:relative; font-size:12px; color:#ccc; line-height:20px;}

.demo01{width:600px; overflow:hidden}
.demo01 .left{ width:100px; float:left}
.demo01 .left .userPic{margin-left:20px; margin-top:30px;}
.demo01 .right{ width:460px; float:right; padding:20px; border-bottom:#CCC 1px solid;}
.demo01 .right h6{ margin-bottom:5px}
.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}

.demo02{width:800px; overflow:hidden}
.demo02 .left{ width:50px; float:left;  text-align:right;}
.demo02 .left .userPic{margin-left:20px; margin-top:30px;}
.demo02 .right{ width:660px; float:right; padding:20px; border-bottom:#CCC 1px solid;}
.demo02 .right h6{ margin-bottom:5px}
.demo02 .right .pubTime{ float:right; color:#999; margin-top:-10px; text-align:right; line-height:30px;}
.demo02 .pubTimep{ float:right; color:#090;  text-align:right; line-height:30px; }




.main{ width:100%; margin:0px auto; margin-top:10px; }
#login{ width:100%; margin:0px auto; }
#login .left{ width:30%; float:left; padding-top:30px; padding-left:50px;}
#login .right{ width:55%; float:right; padding-top:10px; text-align:right; padding-right:50px;}
#login .right .name{ padding-top:20px; text-align:right;}
#login .submit{ width:50%; height:40px;}
#login-submit{ width:100%; margin:0px auto; margin-top:20px; text-align:right;}
#login-submit .zh{ font-size:14px; margin-top:20px;}
#login-submit .zh span{ color:#F30;}
#login .mima{ font-size:14px; color:#F30; margin-top:10px;}
#login-submit .submit { background:#ff7f00; border:0px; color:#FFF;}

/*注册*/
#zhuce{ width:100%; height:100%; padding-bottom:20px;}
#zc{ width:100%; height:50px; border-bottom:#ff7f00 1px solid;}
#zc .left{ width:50%; float:left; font-size:16px; color:#000; }
#zc .right{ width:50%; float:right; font-size:16px; color:#000; line-height:60px; text-align:right;}
#zc .right span{ color:#ff7f00;}
#zhuce .text{ width:50%; margin:0px auto; margin-top:30px;}
#zhuce .text .name{  margin:0px auto; padding-top:30px; font-size:14px; color:#666;}
#ss{ height:30px; width:70%;}
#zhuce .text .submit{ width:100%; margin:0px auto; height:40px;}
#submit{ width:50%; margin:10px auto; margin-top:40px;}
#submit .submit{ width:80%; height:40px; background:#ff7f00; border:0px; color:#FFF;}
.scc{ border:#CCC 1px solid; width:80%; height:40px; text-align:center; margin-top:10px; float:right; margin-bottom:10px;  background:#f8f8f8;}


*:focus {outline: none;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
    
}

.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

.xd-text{ width:100%; border-bottom:#CCC 1px solid; margin:10px auto; margin-bottom:20px;}
.dk{ width:100%; text-align:right; height:40px; border-bottom:#CCC 1px solid; margin:10px auto; line-height:40px; }
.dkk{ width:100%; text-align:right; height:40px;  margin:10px auto; line-height:40px; }
.dkk span{ color:#F00;}
.shdz{ width:100%; margin:0px auto; border:#CCC 1px solid; height:300px; margin-top:80px; }
.shdz1{ width:87%;  text-align:left; margin:0px auto;}
.shdz1 table{ width:100%;  text-align:left; margin-bottom:20px; }
.sh{ width:100%; height:40px; line-height:40px; background:#f8f8f8;}
.xd-right{width:100%; height:auto; margin:0px auto; float:right;}
#xd-dd{ margin-top:20px; width:90%; margin:10px auto;}
.xd-big{width:100%; margin:0px auto; border-bottom:#CCC 1px solid; background:#f8f8f8;  }
.dz{ width:100%; margin:20px auto; }
.sh-left{ width:20%; text-align:right; line-height:40px; font-size:14px;}
.sh-right{width:90%; text-align:left; line-height:40px; font-size:14px;}
.shh{ width:200px; height:30px; }
.shhh{ width:400px; height:30px;}
.xd-submit{ width:100%; height:50px; text-align:right; margin-top:70px; margin-bottom:50px;}
.xdsubmit{ width:300px; height:50px; text-align:center; color:#FFF; font-size:14px; border:0px; background:#ff7f00; line-height:50px;}

/*修改密码*/
#zhuce .textt{ width:50%; margin:0px auto; margin-top:10px;}
#zhuce .textt .name{  margin:0px auto; padding-top:30px; font-size:14px; color:#666;}
.mm-submit{ width:50%; margin:0px auto; }
.mmsubmit{ width:100%; height:40px; margin:10px auto; background:#ff7f00; color:#FFF; font-size:12px; border:0px; text-align:center; margin-top:20px; margin-bottom:20px;}

/*我的订单*/
#ddd{ width:95%; margin:0px auto; border:#CCC 1px solid; margin-top:20px; margin-bottom:20px;}
#ddd .ddd-1{width:100%; margin:0px auto; border-bottom:#CCC 1px solid; height:30px; background:#f5f5f5; line-height:30px;}
#ddd .left1{ float:left; width:40%; text-align:left; font-size:14px; color:#333; margin-left:20px;}
#ddd .right1{ float:right; width:50%; text-align:right; font-size:14px; color:#ccc; margin-right:20px;}
#ddd .big{width:90%; margin:0px auto; height:120px; }
.right-text-1{ width:60%; float:left; font-size:14px; color:#666; line-height:80px; margin-left:20px;}
.right-text-2{ width:60%; float:left; font-size:14px; color:#666; line-height:10px; margin-left:20px;}
.anniu-1{ font-size:14px;  color:#333; line-height:20px; }
.anniu-1 span{  color:#390;  }
.anniu-2 span{ font-size:14px;  color:#F00; line-height:20px; }

.tab{margin-top:10px}
#TabCon1{width:100%; }
#TabCon2{width:100%; }

.xixi1{width:100%; height:29px; line-height:29px; cursor:pointer; background:#ff7f00;}
.xixi2{width:100%; height:29px; line-height:29px; cursor:pointer; background:#ff7f00;}

.tab1{width:96px; height:29px; line-height:29px; float:left; text-align:center; cursor:pointer; color:#000;}
.tab2{width:116px; height:29px; line-height:29px; float:left; text-align:center; cursor:pointer; color:#000;}

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
在这里插入图片描述

web网站建设
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript 动态网页设计期末大作业(自己手写的，很适合期末作业)
12-13
js大作业写的是一个关于疫情的大作业，一共有7个页面，功能有首页，我的二维码浮动、背景音乐自动播放、表格增删改查、用户登录、用户注册、图片录播、随机数产生，算是一个比较齐全的网页。内容比较简单，都是书本东西。耗时一周，有些功能由于时间关键，待完善
Web前端开发技术课程大作业: 关于美食的HTML网页设计——HTML+CSS+JavaScript在线美食订餐网站html模板源码30个页面:
HTML网页设计
07-30 1万+
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。 🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🧡 【作者主页——🔥获取更多优质源码】 🧡 【...
JavaScript网页设计作业(美食网站设计与实现)
dreamweaver网页设计
11-24 292
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV
JavaScript交互式网页设计作业目录（作业笔记）
杨明金的博客
10-29 9105
持续更新中............. Java高级程序设计笔记 • 【目录】 我的大学笔记>>>
JavaScript交互式网页设计作业目录（作业笔记
2401_83974607的博客
04-05 430
安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**mvvm和mvc区别？它和其它框架（jquery）的区别是什么？描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？Vue 的 nextTick 的原理是什么？组件中写 name 选项有什么作用？Vue 中 key 值的作用？Vue 组件间通信有哪些方式?
web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)
08-10
综上所述，这份作业不仅涵盖了HTML、CSS和JavaScript的基础知识，还深入介绍了如何利用这些技术来实现丰富的网页布局和交互功能。通过实际案例的学习和实践，学生将能够更好地掌握网页设计的核心技能。
静态HTML旅行主题网页作业——青岛民俗7页html+css+javascript+jquery 地方民俗网页设计与实现
08-10
该项目是一份典型的HTML5期末考核大作业，主要涉及网页设计与实现，特别是针对青岛民俗文化的展示。项目包含了多种类型的网页设计，例如个人网页、美食介绍、公司简介、学校介绍等，共计7页。该作业不仅包括了基本的...
一个简单的HTML网页——传统节日春节网页(HTML+CSS)
08-10
综上所述，这份文档描述了一个基于HTML5、CSS3和JavaScript技术的静态网页项目，旨在帮助学生掌握基本的网页设计技能。通过对上述知识点的学习和实践，学生不仅可以完成期末考核项目，还能为未来的职业发展打下坚实...
美食网页设计
06-16
美食网页 美食网站与厨艺交流,拥有最多的美食做法、菜谱、食谱大全以及家常菜菜谱！
网页设计——美食
09-04
美食相关网页，能够实现注册、登录、上传、查阅详情、搜索食谱等功能。需要有Tomcat、MySQL等工具，利用J2EE。
学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计 汉语言文学设计题材网页
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
JavaScript交互式网页设计作业目录（作业笔记），2024年最新快速学会cad制图
最新发布
m0_60607397的博客
04-10 320
正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-eu45sNcq-1712729211358)]
html css JavaScript web网页设计期末作业 共5页【视频演示】
网页设计与制作
10-03 192
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
基于JavaScript的网页设计
soul_mingling的博客
01-18 7801
基于JavaScript的网页设计 所用软件：Notepad++ 基本功能：实现“学生信息管理系统”，实现基础的增，删，改，查，以及一些“花里胡哨”的操作。 （代码及图片文件在文末） 文章目录基于JavaScript的网页设计基础的“增删查改”配置的文件（这两个放在新建的“inc”文件夹下）主界面框架及“查”功能的实现“花里胡哨”的附加功能 基础的“增删查改” 配置的文件（这两个放在新建的“inc...
JavaScript大作业 制作简单的程序员个人博客网站（web前端网页制作课作业）
QQ_____365392777的博客
08-20 784
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
食品网页设计
weixin_44580278的博客
05-08 1743
食品网页设计 （作者：李某人，撰写时间：2019年5月2日） 食品网页的设计是一种可以多元化的网页，可以使用许许多多的设计类型， 做网页首先要先做出原型图的内容排版，再把网页分为几个板块进行设计一般是为开头，中间，结尾这些。原型图就是网页的一种不完全的展示形式，意思就是没有添加真正的设计和内容，原型图就是单纯的一种把网页继续进行下去的前提和摆放。 就是像上面那个一样就是原型图，里面的内容不多但是...
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
HTML5旅游网页设计作业模板: DIV+CSS布局与实现
"该资源是一份适用于学生HTML静态网页设计的个人作品，包含多种主题，如个人、美食、旅游等，适用于大学生网页设计作业。网页采用DIV+CSS布局，使用HTML5、CSS3和JavaScript技术，支持在各种HTML编辑器中进行编辑和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网站建设

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值