HTML+CSS+JS网页设计与制作期末大作业：网站——宏源山庄

本文链接：https://blog.csdn.net/qq_55989149/article/details/124406116

宏源山庄网站是学生期末大作业，包含首页、山庄简介、新闻资讯等七个页面，使用HTML、CSS和JavaScript进行设计与制作。提供了部分效果图和代码目录。

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

宏源山庄网站主要包括首页、山庄简介、新闻资讯、特色美食、山庄环境、人才招聘、联系我们等七个页面适合学生作业。

部分效果图展示：

index.html页面：

about.html页面：

news.html页面：

代码目录：

源码：


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>宏源山庄</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript"  src="JavaScript/jquery.js"></script>
<script type="text/javascript"  src="JavaScript/jquery-1.7.2.min.js"></script>
<script type="text/javascript"  src="JavaScript/jquery-1.9.1.min.js"></script>
<script type="text/javascript"  src="JavaScript/Carousel.js"></script>
</head>

<body>
	<div class="xian"></div>
	<div class="top">
		<div class="header">
    		<span class="wec">欢迎访问宏源山庄！</span>
        	<div class="call">
        		<img  src="img/phone.png">
        		<span class="call">0851-84418118</span>
        	</div>
        	<div class="clearfix"></div>
            <hr/>
   		</div>
    	<div>
    		<img id="logo"  src="img/LOGO_big.png">
        	<ul class="nav">
        		<li style="color:#d7000f">首页</li>
            	<li class="dw">
            		<a href="about.html">山庄简介</a>
              		<ul class="in_menu">
                		<li><a href="about.html">山庄简介</a>
                        	<ul class="in_menu_1">
                				<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 class="in_menu_1">
                				<li><a href="news.html">宏源新闻</a></li>
                    			<li><a href="#">行业新闻</a></li>
                			</ul>
                        </li>
                	</ul>
            	</li>
            	<li class="dw">
                	<a href="news.html">新闻资讯</a>
                    <ul class="in_menu">
                		<li><a href="news.html">宏源新闻</a></li>
                    	<li><a href="#">行业新闻</a></li>
                	</ul>
                </li>
            	<li class="dw">
                	<a href="picture.html">特色美食</a>
                    <ul class="in_menu">
                		<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 class="dw"><a style="background:none;padding-right:0;" href="#">山庄环境</a></li>
            	<li class="dw"><a style="background:none;padding-right:0;" href="#">人才招聘</a></li>
            	<li class="dw">
                	<a href="#">联系我们</a>
                    <ul class="in_menu">
                		<li><a href="message.html">在线留言</a></li>
                    	<li><a href="#">联系我们</a></li>
                	</ul>
                </li>
         		<div class="clearfix"></div>
        	</ul>
       		<div class="clearfix"></div> 
    	</div>
	</div>
    <!--导航条-->
    <div class="banner">
    	<img  src="img/5-1.jpg">
        <img  src="img/banner.jpg">
        <img  src="img/1516872886.jpg">
        <div class="clearfix"></div>        
       	<ul>
        	<li id="red"></li>
            <li></li>
            <li></li>
        </ul>
        
        	<div class="zuo"></div>
            <div class="you"></div>