<!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>
网页设计.rar
需积分: 5 165 浏览量
2021-12-04
11:48:15
上传
评论
收藏 18.31MB RAR 举报
网页设计.rar （38个子文件） 
网页设计 css 
赵雷 - 家乡.mp3 11.94MB .project 2KB img 
bg7.jpg 105KB bg1.jpg 708KB 006.jpg 37KB bg3.jpg 32KB 003.jpg 140KB 02.jpg 472KB 01.jpg 129KB 0003.jpg 89KB w11.jpg 186KB b12.jpg 3KB 03.jpg 211KB bg2.jpg 511KB 0006.jpg 541KB 12.jpg 50KB b13.jpg 3KB 04.jpg 168KB w13.jpg 1.25MB 002.jpg 475KB 001.jpg 67KB b11.jpg 3KB w12.jpg 21KB 05.jpg 180KB 0005.jpg 60KB 005.jpg 68KB 11.jpg 57KB 14.jpg 3KB 0002.jpg 29KB 004.jpg 64KB w14.jpg 511KB
bg6.PNG 257KB b14.jpg 5KB 0004.jpg 215KB 0001.jpg 18KB 13.jpg 19KB js jquery-3.1.1.js 261KB
index.html 9KB
评论0