端午节小网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {margin: 0;padding: 0;list-style: none}
.background1{
margin: 0 auto;
width: 1400px;
height: 600px;
background: url("images/") no-repeat;
}
.title{
width: 1400px;
height: 120px;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
}
.word1{
line-height: 120px;
font-size: 60px;
color: white;
position: relative;
left: 30px;
}
.word2{
line-height: 120px;
font-size: 60px;
color:#FF9000;
position: relative;
left: 30px;
}
.btn0{
float:right;
font-size: 30px;
color: white;
}
.btn0 li{
height: 115px;
width: 150px;
float: right;
margin-left: 10px;
line-height: 120px;
text-align: center;
cursor: pointer;
}
.word3{
background-color: rgba(55,85,119,0.5);
border-bottom: 5px solid rgb(255,148,0);
}
.box1{
width: 600px;
height: 400px;
position: relative;
top:130px;
}
.box2{
width: 750px;
height: 468px;
position: relative;
top:-230px;
left: 640px;
}
.word4{
font-size: 40px;
color: white;
position: relative;
top:50px;
left: 40px;
}
.word5{
font-size: 45px;
color: #FF9700;
position: relative;
top:50px;
left: 40px;
}
.word6{
font-size: 25px;
font-style: italic;
color: white;
position: relative;
top:50px;
left: 40px;
}
.btn1{
width: 250px;
height: 60px;
font-size: 30px;
background-color: #3E5B74;
position: relative;
top:100px;
left: 60px;
cursor: pointer;
}
.picture2{
position: relative;
top: -473px;
}
.shadow{
margin: 0 auto;
width: 1400px;
height: 100px;
background: #EDEFF1;
}
.btn2{
position: relative;
left: 1035px;
z-index: 1;
cursor: pointer;
}
.btn3{
transform: rotate(180deg);
position: relative;
left: 300px;
z-index: 1;
cursor: pointer;
}
.back1{
width: 750px;
height: 150px;
background: rgba(0,0,0,0.5);
position: relative;
top: 318px;
left: -48px;
}
.round{
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid white;
position: relative;
top:45px;
left: 40px;
cursor: pointer;
}
.circle1
{
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
position: relative;
top:13px;
left: 12px;
}
.circle2
{
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
position: relative;
top:-3px;
left: 24px;
}
.circle3{
width: 16px;
height: 16px;
transform: rotateZ(45deg);
background-color: white;
position: relative;
top:-13px;
left: 18px;
}
.word7{
color: white;
font-size: 30px;
position: relative;
left: 120px;
}
.round1{
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid white;
position: relative;
top:-52px;
left: 200px;
cursor: pointer;
}
.tuo{
width: 40px;
height: 20px;
background: white;
border-radius: 20px/10px;
position: relative;
top:14px;
left: 4px;
font-size: 20px;
text-align: center;
line-height: 10px;
}
.word8{
font-size: 20px;
color: white;
position: relative;
top:-100px;
left:500px;
}
.word9{
font-size: 16px;
color: #FF9100;
position: relative;
top:-75px;
left:371px;
}
.shadow1{
position: relative;
top:-4px;
left: 562px;
}
.word10{
width: 1400px;
height:400px;
margin: 100px auto;
}
.word11{
font-size: 40px;
text-align: center;
}
.word12{
margin-top:30px;
font-size: 19px;
color: #A9A9A9;
text-align: center;
}
.line{
width: 400px;
height: 3px;
background: #FF9408;
margin: 50px auto;
}
.btn4{
width: 450px;
height: 200px;
margin: -100px auto;
}
.btn4 li{
width: 140px;
height: 50px;
border: 1px solid #A9A9A9;
float: left;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.word13{
background: #FF9408;
color: white;
}
.box3{
width: 1400px;
height: 600px;
margin: 0 auto;
}
.picture3-1{
width: 400px;
height: 300px;
border: 5px solid white;
position: relative;
top: 0px;
left:0px;
overflow: hidden;
}
.picture3-2{
width: 350px;
height: 223px;
border: 5px solid white;
position: relative;
top: 0px;
left:0px;
overflow: hidden;
}
.box3-1{
width: 389px;
height: 233px;
border:1px solid #A9A9A9;
}
.box3-2{
width: 361px;
height: 233px;
border:1px solid #A9A9A9;
position: relative;
top: -190px;
left: 23px;
}
.word14{
width: 800px;
height: 400px;
position: relative;
top:-478px;
left: 580px;
}
.word15{
font-size: 30px;
}
.word16{
margin-top: 10px;
color: #FF9408;
}
.word17{
font-size: 19px;
color: #A9A9A9;
margin-top: 10px;
}
.word18{
color: #00BDFF;
font-size: 19px;
margin-left: 5px;
}
.back2{
width: 1400px;
height: 750px;
background: url("images/") no-repeat;
margin: -200px auto;
}
.word19{
width: 1400px;
height:400px;
position: relative;
top:50px;
}
.word20{
font-size: 40px;
text-align: center;
color:white;
}
.picture4{
width: 1400px;
height: 400px;
position: relative;
top:-83px;
display: flex;
justify-content: space-around;
}
.picture4-1{
width: 245px;
height: 387px;
background: url("images/") no-repeat;
cursor: pointer;
}
.picture4-11{
width: 125px;
height: 125px;
background: url("images/") no-repeat;
position: relative;
top:50px;
left: 60px;
}
.picture4-10{
position: relative;
top:-96px;
left: 60px;
display: none;
}
.picture4-1:hover .picture4-10{
display: block;
}
.picture4-1:hover .word21{
color:white;
}
.word21{
color:#02A6E2;
position: relative;
top:70px;
left: 65px;
}
.picture4-2{
width: 245px;
height: 387px;
background: url("images/") no-repeat;
cursor: pointer;
}
.picture4-2:hover .picture4-10{
display: block;
}
.picture4-2:hover .word22{
color:white;
}
.picture4-22{
width: 125px;
height: 125px;
background: url("images/") no-repeat;
position: relative;
top:50px;
left: 60px;
}
.word22{
color:#FFAB3F;
position: relative;
top:70px;
left: 92px;
}
.picture4-3{
width: 245px;
height: 387px;
background: url("images/") no-repeat;
cursor: pointer;
}
.picture4-3:hover .picture4-10{
display: block;
}
.picture4-3:hover .word23{
color:white;
}
.picture4-33{
width: 125px;
height: 125px;
background: url("images/") no-repeat;
position: relative;
top:50px;
left: 60px;
}
.word23{
color:#AA362B;
position: relative;
top:70px;
left: 88px;
}
.picture4-4{
width: 245px;
height: 387px;
background: url("images/") no-repeat;
cursor: pointer;
}
.picture4-4:hover .picture4-10{
display: block;
}
.picture4-4:hover .word24{
color:white;
}
.picture4-44{
width: 125px;
height: 125px;
background: url("images/") no-repeat;
position: relative;
top:50px;
left: 60px;
}
.word24{
color:#5E5F61;
position: relative;
top:70px;
left: 90px;
}
.box4{
width: 1400px;
height:230px;
margin: 250px auto;
position: relative;
top:60px;
}
.box6{
width: 1400px;
height: 1200px;
background: #ECECEC;
margin: -250px auto;
}
.box5{
width: 1350px;
height: 600px;
margin: -120px auto;
}
.box5 li{
float: left;
}
.li1{
width: 150px;
height: 200px;
background: #FF9408;
}
.li1 p{
transform: rotate(270deg);
font-size: 50px;
position: relative;
top:60px;
}
ul:hover .li1{
background: #2D2D2D;
color: white;
cursor: pointer;
}
.li2{
width: 200px;
height: 200px;
background: #2D2D2D;
font-size: 50px;
color: #FF9C05;
display: flex;
justify-content: center;
align-items: center;
}
ul:hover .li2{
background: #FF9408;
color: white;
cursor: pointer;
}
.li3{
width: 200px;
height: 200px;
background: white;
font-size: 22px;
color: #8A8A8A;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
ul:hover .li3{
background: #2D2D2D;
color: white;
cursor: pointer;
}
.li3 div{
width: 200px;
height: 80px;
border-right: 1px solid #8A8A8A;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.word25{
color: white;
font-size: 30px;
}
.ul2{
position: relative;
top:50px;
}
.ul3{
position: relative;
top:100px;
}
.back3{
width: 1400px;
height: 1000px;
margin: 250px auto;
background: url("images/") no-repeat;
}
.word26{
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.picture5{
width: 1400px;
height: 600px;
overflow: hidden;
margin-top: -160px;
}
.picture5 img{
width: 1400px;
margin-top: -50px;
}
.back4{
width: 1400px;
height: 869px;
margin: -340px auto;
background: url("images/") no-repeat;
}
.box7{
width: 700px;
height: 750px;
position: relative;
top: 60px;
left: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn5{
width: 500px;
height: 60px;
color: #5A5A5A;
font-size: 40px;
}
.btn6{
width: 500px;
height: 150px;
font-size: 40px;
color: #5A5A5A;
}
.btn7{
width: 500px;
height: 60px;
font-size: 20px;
background: #E2850A;
cursor: pointer;
color:white;
font-weight: bold;
text-align: center;
}
.box8{
width: 600px;
height: 750px;
position: relative;
top:-685px;
left: 700px;
}
.word27{
font-size: 65px;
color:#FF9200;
position: relative;
top:24px;
}
.picture6{
position: relative;
top:135px;
width: 50px;
}
.word28{
font-size: 21px;
color: white;
position: relative;
top:84px;
left: 108px;
}
.picture7{
position: relative;
top:195px;
left: 0px;
width: 50px;
}
.picture8{
position: relative;
top:195px;
left: 35px;
width: 50px;
}
.picture9{
position: relative;
top:195px;
left: 70px;
width: 50px;
}
.box9{
width: 1400px;
height: 30px;
font-size: 20px;
background: rgba(0,0,0,0.5);
text-align: center;
position: relative;
top:337px;
left: -700px;
}
.picture1{
position: absolute;
top:0px;
left: -48px;
transition: 4s;
}
.picture2{
position: absolute;
top:0px;
left: -48px;
transition: 4s;
opacity: 0;
}
</style>
</head>
<body>
<div class="background1">
<div class="title">
<b class="word1">NO</b>
<b class="word2">VEM</b>
<b class="word1">BER</b>
<ul class="btn0">
<li>Contact</li>
<li>Pricing</li>
<li>Services</li>
<li>About</li>
<li class="word3">Home</li>
</ul>
</div>
<div class="box1">
<b class="word4">RESPONSIVE</b>
<p class="word5">MOBILE FRIENDLY</p>
<p class="word6">November is a professional website template<br>
that is responsive and mobile friendly for any<br>
template is provided by<br />
</p>
<input type="button" value=" MORE DETAILS" class="btn1">
<img class="btn2" src="images/">
<img class="btn3" src="images/">
</div>
<div class="box2">
<img class="picture1" src="images/" >
<img class="picture2" src="images/" >
<div class="back1">
<div class="round">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
<span class="word7">700</span>
<div class="round1">
<div class="tuo">....</div>
</div>
<span class="word8">LOREM QUIS BIBENDUM</span>
<span class="word9">Necagittis Nibel</span>
</div>
</div>
</div>
<div class="shadow">
<img src="images/" class="shadow1">
</div>
<div class="word10">
<p class="word11">ABOUT US</p>
<p class="word12">Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis
sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a
</p>
<p class="word12">sit</p>
<p class="word12">amet mauris. Morbi accumsan lpsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
<div class="line"></div>
</div>
<ul class="btn4">
<li class="word13">MISION</li>
<li>VISION</li>
<li>SPONSORS</li>
</ul>
<div class="box3">
<div class="picture3">
<div class="box3-1"><div class="picture3-1"><img src="images/"></div></div>
<div class="box3-2"><div class="picture3-2"><img src="images/"></div></div>
</div>
<div class="word14">
<p class="word15">SED AC URNASIT AMET LOREM</p>
<p class="word16">TACITI SOCIOSQU AD LITORA TORQUENT PERCONUBIA</p>
<p class="word17">November is free HTML CSS website template from<span class="word18">templatemo</span>
andyou can download and use it for any purpose. Lorerm ipsum dolor sit
amet, consectetur adipiscing elit. Nullam elit nunc, porta commodo
euismod eu, fermentum a neque. Fusce scelerisque tincidunt auctor.
Integer varius ullamcorper interdum.</p>
<br>
<p class="word17"> Phasellus pretium elementum rhoncus. Aenean sit amet odio eu ante
volutpat rutrum. Vestibulum ullamcorper faucibus orci, in blandit massa
fringilla at. Nulla in fermentum eros. Suspendisse vitae aliquam metus.
</p>
</div>
</div>
<div class="back2">
<div class="word19">
<p class="word20">OUR SERVICES</p>
<p class="word12">Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.
Sed non mauris vitae erat consequat auctor eu in elit. Class aptent</p>
<p class="word12">taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="line"></div>
</div>
<div class="picture4">
<div class="picture4-1" name="picture0">
<div class="picture4-11"></div>
<p class="word21">DEVELOPMENT</p>
<img src="images/" class="picture4-10">
</div>
<div class="picture4-2" name="picture0">
<div class="picture4-22"></div>
<p class="word22">DESIGE</p>
<img src="images/" class="picture4-10">
</div>
<div class="picture4-3" name="picture0">
<div class="picture4-33"></div>
<p class="word23">CONCEPT</p>
<img src="images/" class="picture4-10">
</div>
<div class="picture4-4" name="picture0">
<div class="picture4-44"></div>
<p class="word24">SYSTEM</p>
<img src="images/" class="picture4-10">
</div>
</div>
</div>
<div class="box6">
<div class="box4">
<p class="word11">PRICING</p>
<p class="word12">All plans come with unlimited disk space. Our support can be as quick
as 15 minutes to get a response. Sed non</p>
<p class="word12">mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu.</p>
<div class="line"></div>
</div>
<div class="box5">
<ul><li class="li1"><p>BASIC</p></li>
<li class="li2"><p>$27.5</p></li>
<li class="li3"><div><p>2,000GB</p><p>BAND WIDTH</p></div></li>
<li class="li3"><div><p>32GB</p><p>MEMORY</p></div></li>
<li class="li3"><div><p>SUPPORT</p><p>24 HOURS</p></div></li>
<li class="li3"><div><p>UPDATE</p><p>$20</p></div></li>
<li class="li2"><p class="word25">ORDER NOW</p></li>
</ul>
<ul class="ul2"><li class="li1"><p>BIZ</p></li>
<li class="li2"><p>$44.50</p></li>
<li class="li3"><div><p>5,500GB</p><p>BAND WIDTH</p></div></li>
<li class="li3"><div><p>64GB</p><p>MEMORY</p></div></li>
<li class="li3"><div><p>SUPPORT</p><p>1 HOURS</p></div></li>
<li class="li3"><div><p>UPDATE</p><p>$10</p></div></li>
<li class="li2"><p class="word25">ORDER NOW</p></li>
</ul>
<ul class="ul3"><li class="li1"><p>PRO</p></li>
<li class="li2"><p>$72.50</p></li>
<li class="li3"><div><p>12,000GB</p><p>BAND WIDTH</p></div></li>
<li class="li3"><div><p>128GB</p><p>MEMORY</p></div></li>
<li class="li3"><div><p>SUPPORT</p><p>15 MINS</p></div></li>
<li class="li3"><div><p>UPDATE</p><p>FREE</p></div></li>
<li class="li2"><p class="word25">ORDER NOW</p></li>
</ul>
</div>
</div>
<div class="back3">
<div class="box4">
<p class="word26">CONTACT US</p>
<p class="word12">Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum
fermentum nunc. Etiam pharetra, erat sed fermentum</p>
<p class="word12">feugiat velit mauris egestas quamut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
<div class="line"></div>
</div>
<div class="picture5"><img src="images/"></div>
</div>
<div class="back4">
<div class="box7">
<input type="text" placeholder="NAME" class="btn5">
<input type="text" placeholder="EMAIL" class="btn5">
<input type="text" placeholder="TITLE" class="btn5">
<input type="text" placeholder="MESSAGE" class="btn6">
<input type="button" value="SEND" class="btn7">
</div>
<div class="box8">
<p class="word27">GET IN TOUCH!</p>
<img src="images/" class="picture6">
<p class="word28">990 Proin Gravida Street, Aliquet Snean Tate, </p>
<p class="word28">Lincoln Way, San Francisco, California.</p>
<img src="images/" class="picture6">
<p class="word28">(+001)001 002 0034,(+002)009 008 0760 </p>
<p class="word28">(+003)456 050 0670</p>
<img src="images/" class="picture6">
<p class="word28">info@ </p>
<img src="images/" class="picture7">
<img src="images/" class="picture8">
<img src="images/" class="picture9">
<div class="box9">Copyright ㉢ name AlI rights reserved.网页模版</div>
</div>
</div>
<script>
window.οnlοad=function () {
var li = ("btn0")[0].getElementsByTagName("li")
var li2 = ("btn4")[0].getElementsByTagName("li")
var picture0 = ("picture0")
var picture10 = ("picture4-10")[0]
var picture1 = ("picture1")[0]
var picture2 = ("picture2")[0]
var btn2 = ("btn2")[0]
var btn3 = ("btn3")[0]
var box2 = ("box2")[0]
var num = 0;
for (var j = 0; j < ; j++) {
li[j].index = j;
li[j].onmouseover = function () {
for (var i = 0; i < ; i++) {
li[i].className = "";
}
li[this.index].className = "word3"
}
}
for (var j = 0; j < ; j++) {
li2[j].index = j;
li2[j].onmouseover = function () {
for (var i = 0; i < ; i++) {
li2[i].className = "";
}
li2[this.index].className = "word13"
}
}
//
function fun() {
if (num == 0) {
= 0;
= 1;
num++
}
else if (num == 1) {
= 1;
= 0;
num--
}
}
box2.οnmοuseοver=function(){
clearInterval(time);
}
btn2.οnmοuseοver=function(){
clearInterval(time);
}
btn2.οnmοuseοut=function () {
time=setInterval(fun, 4000);
}
btn3.οnmοuseοver=function(){
clearInterval(time);
}
btn3.οnmοuseοut=function () {
time=setInterval(fun, 4000);
}
box2.οnmοuseοut=function () {
time=setInterval(fun, 4000);
}
var time=setInterval(fun, 4000);
btn2.οnclick=function () {
num = num + 1;
if (num == 2) {
= 1;
= 0;
num = num - 2;
}else{
= 0;
= 1;
}
}
btn3.οnclick=function () {
num = num - 1;
if (num == 0) {
= 1;
= 0;
}
else {
= 0;
= 1;
num = num + 2;
}
}
}
</script>
</body>
</html>