<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background:;
}
img {
border: 0;
width: 640px;
height: 490px;
}
.hot {
width: 640px;
text-align: center;
position: relative;
float: left;
}
.hot-pics {
height: 426px;
overflow: hidden;
position: relative;
}
.hot-bar {
position: absolute;
bottom: 2px;
height: 30px;
width: 640px;
background: rgba(0, 0, 0, 0.3);
}
.hot-bar ul {
padding: 0;
margin: 0;
margin-top: 6px;
}
.hot-bar li {
width: 30px;
height: 4px;
background: aliceblue;
display: inline-block;
border-radius: 7px;
cursor: pointer;
}
.hot-bar li.current {
background: cornflowerblue;
}
.l2 ul{
list-style: none;
overflow: hidden;
text-align: center;
}
.l2 ul li{
float: left;
width: 100px;
margin: 20px;
}
.l2 ul li img{
width: 100px;
height: 80px;
}
.l2 ul li img{
border: 3px solid rgba(255,255,255,0.5);
box-shadow: 2px 2px 3px gray;
-webkit-transition-duration: 0.8s;
}
.l2 ul li img:hover{
-webkit-transform: rotate(360deg) scale(1.3);
}
#div2{
width:320px;
height:50px;
margin: 40px 0px 0px 0px;
font-family: "微软雅黑";
text-align: center;
font-size: 30px;
color: ;
background: orange;
}
#div2 a{
text-decoration: none;
}
#div1{
width: 320px;
height: 490px;
border: 1px solid orange;
background: url(img/0006.jpg);
}
.z1-5 .t-1{float: right;
}
.t1{
width: 960px;
height: 100px;
margin: 15px auto 15px auto;
background: url(img/13.jpg) ;
}
.t1 p{
font-family: "楷体";
font-size: 50px;
line-height: 100px;
color: green;
}
.nav{
list-style: none;
background: yellowgreen;
width: 960px;
height: 35px;
margin: auto;
}
.nav ul li{
margin:0px 5px 0px 0px;
padding:0px;
list-style: none;
float:left;
line-height: 35px;
}
.nav ul li a{
display: block;
color: gold;
text-decoration: none;
text-align: center;
width: 80px;height: 30px;
background: 3b3b3b;
}
.nav li a.on, .nav li a:hover{
color: white;background: cornflowerblue;
border-bottom: 5px solid darkblue;
}
.w1{
width:310px;
height: 430px;
float: left;
}
.w1 div{
width: 300px;
height: 93px;
margin-left: 10px;
font-family: "微软雅黑";
font-size: 35px;
text-align: center;
line-height: 90px;
}
.w1 div a{
color: blueviolet;
text-decoration: none;
}
.w1 .w12,.w13,.w14{
margin-top: 18px;
.w1 .w11,.w12,.w13,.w14
}
.w11{
background: url(img/w11.jpg) ;
}
.w12{
background: url(img/w12.jpg) ;
}
.w13{
background: url(img/w13.jpg) ;
}
.w14{
background: url(img/w14.jpg) ;
}
.z1{
width: 960px;
height: 430px;
margin: 13px auto 30px auto;
}
.z1-5{
width: 960px;
height: 490px;
border: 3px solid orange;
margin: 13px auto 30px auto;
}
.z2{
width: 960px;
height: 300px;
margin: 13px auto 30px auto;
background: url(img/bg2.jpg) repeat-x;
}
.z3{
width: 960px;
height: 200px;
margin: 13px auto 30px auto;
background: url(img/bg6.PNG);
}
.l1{
width: 320px;
height: 120px;
}
.l2{
width: 960px;
height: 120px;
float: left;
}
.l3{
width: 300px;
}
.z3 .l3 p{
background: darkorange;
}
footer{
clear: both;
text-align: center;
color: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.1.1.js">
</script>
<script type="text/javascript">
$(function() {
var height = 512;
var speed = 700;
var delay = 1000;
var now = 1;
var $picsUl = $('.hot-pics img');
var $barLi = $('.hot-bar li');
var max = 5;
var timer = null;
timer = setInterval(change_auto, delay);
function change_auto() {
if(now>max) {
now = 1;
}
change_next();
change_bar();
now++;
}
$('.hot').on({
mouseenter: function() {
clearInterval(timer);
},
mouseleave: function() {
clearInterval(timer);
timer = setInterval(change_auto, delay);
}
});
$barLi.click(function() {
now = $(this).index()+1;
change_next();
change_bar();
});
function change_next() {
$picsUl.attr("src","img/0"+now+".jpg");
}
function change_bar() {
$barLi.eq(now-1).addClass("current").siblings().removeClass("current");
}
});
</script>
<script type="text/javascript">
function lg1(){
img0001.src="img/0001.jpg";
}
function lg2(){
img0001.src="img/0002.jpg";
}
function lg3(){
img0001.src="img/0003.jpg";
}
function lg4(){
img0001.src="img/0004.jpg";
}
function lg5(){
img0001.src="img/0005.jpg";
}
</script>
</head>
<body>
<header>
<div class="t1">
<p>周口欢迎你！</p>
</div>
<div class="nav">
<ul>
<li class="cur"><a href="#"><span>首 页</span></a></li>
<li><a href="#"><span>周口介绍</span></a></li>
<li><a href="#"><span>历史沿革</span></a></li>
<li><a href="#"><span>著名人物</span></a></li>
<li><a href="#"><span>地理环境</span></a></li>
<li><a href="#"><span>自然资源</span></a></li>
<li><a href="#"><span>名胜古迹</span></a></li>
<li><a href="#"><span>社会事业</span></a></li>
<li><a href="#"><span>风俗民情</span></a></li>
<li><a href="#"><span>地方特产</span></a></li>
</ul>
</div>
</header>
<section>
<div class="z1">
<div class="hot">
<div class="hot-pics">
<img src="img/01.jpg"/>
</div>
<div class="hot-bar">
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="w1">
<div class="w11" ><a href="#">历史英雄</a></div>
<div class="w12"><a href="#">文化典故</a></div>
<div class="w13"><a href="#">美食小吃</a></div>
<div class="w14"><a href="#">风景古迹</a></div>
</div>
</div>
<div class="z1-5">
<div class="t-1"><img id="img0001" src="img/0001.jpg" /></div>
<div id="div1">
<div id="div2" onmouseover="lg1();" >
<a href="#">孔集卤鸡</a>
</div>
<div id="div2" onmouseover="lg2();">
<a href="#">逍遥镇胡辣汤</a>
</div>
<div id="div2" onmouseover="lg3();" >
<a href="#">羊肉版面</a>
</div>
<div id="div2" onmouseover="lg4();">
<a href="#">高炉烧饼</a>
</div>
<div id="div2" onmouseover="lg5();" >
<a href="#">试量集狗肉</a>
</div>
</div>
</div>
<div class="z2">
<div class="l1">
<h2>家乡的声音</h2>
<audio src="css/赵雷 - 家乡.mp3" controls="controls" loop="true"></audio>
</div>
<div class="l2">
<ul>
<li>太昊陵<img src="img/001.jpg" /></li>
<li>太清宫<img src="img/002.jpg" /></li>
<li>龙湖<img src="img/003.jpg" /></li>
H5结课项目《周口欢迎你》HTML设计 网页设计.rar
需积分: 39 8 浏览量
2020-06-17
09:08:11
上传
评论 23
收藏 18.31MB RAR 举报
网页设计.rar （38个子文件） 
网页设计 
.project 2KB
index.html 9KB img 
b12.jpg 3KB 0002.jpg 29KB 05.jpg 180KB w13.jpg 1.25MB b14.jpg 5KB 0004.jpg 215KB 0005.jpg 60KB 0006.jpg 541KB 0001.jpg 18KB 006.jpg 37KB 11.jpg 57KB 13.jpg 19KB 0003.jpg 89KB 02.jpg 472KB bg1.jpg 708KB 001.jpg 67KB 12.jpg 50KB bg7.jpg 105KB 14.jpg 3KB 002.jpg 475KB 005.jpg 68KB b13.jpg 3KB b11.jpg 3KB bg2.jpg 511KB
bg6.PNG 257KB bg3.jpg 32KB w12.jpg 21KB 03.jpg 211KB 004.jpg 64KB w11.jpg 186KB 01.jpg 129KB 003.jpg 140KB 04.jpg 168KB w14.jpg 511KB js jquery-3.1.1.js 261KB css 赵雷 - 家乡.mp3 11.94MB资源评论
