豪酒首页

2021-03-02 02:02:27 作者：互联网

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豪酒首页</title>
<style type="text/css">
 *{
 padding: 0px;
 margin-left: 0;
 }
 body{
 border: 2px solid black;
 margin-left: 300px;
 height: 4100px;
 width: 900px;
 }
 img:hover{
 margin-left:5px;
 }
 .one{
 position: fixed;
 background-color: white;
 border: 1px solid red ;
 padding-left:100px;
 padding-top:7px;
 width:800px;
 height:85px;
 z-index: 9;
 }
 .one1{
 position: absolute;
 left: 300px;
 top: 105px;
 z-index:3;
 }
 #two{
 position: absolute;
 color: white;
 left: 700px;
 top: 190px;
 z-index:7;
 }
 .one ul li:hover{
 color: red;
 }
 #two:hover{
 color:red;
 }
 #three:hover{
 color:red;
 }
 #hour:hover{
 color:red;
 }
 #five:hover{
 color:red;
 }
 #six:hover a{
 color:white;
 }
 .two{
 border: 1px solid red ;
 width: 900px;
 height: 500px;
 }
 .three{
 position: absolute;
 left: 400px;
 top: 720px;
 }
 #three{
 position: absolute;
 color: white;
 left: 630px;
 top: 220px;
 z-index:7;
 }
 .hour{
 margin-left: 400px;
 padding-top: 100px;
 }
 .hour:hover{
 color:red;
 }
 #hour{
 position: absolute;
 color: white;
 left: 520px;
 top: 280px;
 z-index:7;
 }
 .five{
 position: absolute;
 left: 40px;
 top: 30px;
 }
 .five:hover {
 width: 140px;
 height: 50px;
 margin-left: 2px;
 }
 #five{
 position: absolute;
 color: white;
 left: 700px;
 top: 320px;
 z-index:7;
 }
 .six{
 border: 1px solid red ;
 margin-left: 400px;
 padding-left:15px;
 padding-top: 10px;
 margin-top: 10px;
 width: 100px;
 height: 30px;
 }
 .six:hover{
 background-color: red;
 }
 #six{
 border: 1px solid red;
 position: absolute;
 padding: 15px;
 width: 100px;
 height: 25px;
 left: 700px;
 top: 400px;
 z-index:7;
 }
 #six:hover{
 background-color: red;
 }
 .seven{
 margin-left: 65px;
 }
 #seven{
 z-index: 2;
 }
 .eight{
 margin-left: 130px;
 }
 #eight{
 position: absolute;
 z-index: 5;
 left: 660px;
 top: 1100px;
 }
 .nine{
 border: 1px solid red;
 padding-left: 10px;
 padding-top: 5px;
 margin-left:400px;
 margin-top:80px;
 height: 25px;
 width: 90px;
 }
 .nine:hover{
 background-color: red;
 }
 #nine{
 position:absolute;
 left: 560px;
 top: 1230px;
 z-index:5;
 }
 #ten{
 position:absolute;
 left: 710px;
 top: 1260px;
 z-index:5;
 }
 .ten{
 z-index: 2;
 }
 #eleven{
 border:1px solid red;
 position: absolute;
 width: 80px;
 height: 15px;
 padding: 20px;
 z-index: 5;
 left: 710px;
 top: 1440px;
 }
 #eleven:hover{
 background-color: red;
 }
 #twenty{
 position: absolute;
 z-index: 5;
 left: 590px;
 top: 1300px;
 }
 #twenty-one{
 position: absolute;
 z-index: 5;
 left: 590px;
 top: 1360px;
 }
 #twenty-two{
 position: absolute;
 z-index: 5;
 left: 610px;
 top: 1320px;
 }
 .fifteen{
 background-color: white;
 border: 1px solid red;
 position: absolute;
 padding-left:50px;
 padding-top:30px;
 height: 90px;
 left: 400px;
 top: 2760px;
 width: 90px;
 z-index: 3;
 }
 .sixteen{
 background-color: white;
 border: 1px solid red;
 position: absolute;
 padding-top:30px;
 padding-left:50px;
 height: 90px;
 width: 90px;
 left: 600px;
 top: 2760px;
 z-index: 3;
 }
 .seventeen{
 background-color: white;
 border: 1px solid red;
 position: absolute;
 padding-left:50px;
 padding-top:30px;
 width: 90px;
 height: 90px;
 left: 800px;
 top: 2760px;
 z-index: 3;
 }
 .eighteen{
 background-color: white;
 border: 1px solid red;
 position: absolute;
 padding-top: 30px;
 padding-left:50px;
 height: 90px;
 left: 1000px;
 width: 90px;
 top: 2760px;
 z-index: 3;
 }
 .ninteen{
 position: absolute;
 font-size: 25px;
 color:white;
 left:150px;
 top:2500px;
 z-index:3;
 }
 .twenty{
 position: absolute;
 left: 100px;
 top: 2930px;
 z-index:3;
 color:white;
 }
 .twenty-one{
 border: 1px solid red ;
 margin-left: 60px;
 width: 220px;
 height: 230px;
 float: left;
 }
 .twenty-one:hover{
 color:red;
 }
 .twenty-three-twenty-three{
 z-index:7;
 width:auto;
 height: auto;
 display: none;
 text-align:center;
 position: absolute;
 border:1px solid red;
 background-color: white;
 }
 .twenty-three{
 float: left;
 margin-left: 130px;
 margin-top:20px;
 }
 .twenty-hour{
 float: left;
 margin-left: 30px;
 margin-top:20px;
 }
 .twenty-five{
 float: left;
 margin-left: 30px;
 margin-top:20px;
 }
 .twenty-six{
 float: left;
 margin-left: 30px;
 margin-top:20px;
 }
 .twenty-seven{
 float: left;
 margin-left: 30px;
 margin-top:20px;
 }
 .twenty-three:hover .twenty-three-twenty-three{
 display: block;
 }
 .twenty-hour-twenty-hour{
 z-index:9;
 width:auto;
 height: auto;
 display: none;
 position: absolute;
 border:1px solid red;
 background-color: white;
 }
 .twenty-hour:hover .twenty-hour-twenty-hour{
 display: block;
 }
 .twenty-five-twenty-five{
 z-index:9;
 width:auto;
 height: auto;
 display: none;
 position: absolute;
 border:1px solid red;
 background-color: white;
 }
 .twenty-five:hover .twenty-five-twenty-five{
 display: block;
 }
 .twenty-hour:hover{
 color:red;
 }
 .twenty-six-twenty-six{
 z-index:9;
 width:auto;
 height: auto;
 display: none;
 position: absolute;
 border:1px solid red;
 background-color: white;
 }
 .twenty-six:hover .twenty-six-twenty-six{
 display: block;
 }
 .twenty-seven-twenty-seven{
 z-index:9;
 width:auto;
 height: auto;
 display: none;
 position: absolute;
 border:1px solid red;
 background-color: white;
 }
 .twenty-seven:hover .twenty-seven-twenty-seven{
 display: block;
 }
 .one10{
 float: left;
 }
 .one11{
 float: left;
 }
 .one12{
 float: left;
 }
 .one13{
 float: left;
 }
 .one14{
 float: left;
 }
 .one15{
 float: left;
 }
 .one16{
 float: left;
 }
 .one17{
 float: left;
 }
 .one10-one10{
 position: absolute;
 display: none;
 left: 520px;
 top: 1830px;
 color: red;
 }
 .one10:hover .one10-one10{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one11-one11{
 position: absolute;
 display: none;
 left: 740px;
 top: 1830px;
 color: red;
 }
 .one11:hover .one11-one11{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one12-one12{
 position: absolute;
 display: none;
 left: 940px;
 top: 1830px;
 color: red;
 }
 .one12:hover .one12-one12{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one13-one13{
 position: absolute;
 display: none;
 left: 1140px;
 top: 1830px;
 color: red;
 }
 .one13:hover .one13-one13{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one14-one14{
 position: absolute;
 display: none;
 left: 520px;
 top: 2160px;
 color: red;
 }
 .one14:hover .one14-one14{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one15-one15{
 position: absolute;
 display: none;
 left: 750px;
 top: 2160px;
 color: red;
 }
 .one15:hover .one15-one15{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one16-one16{
 position: absolute;
 display: none;
 left: 940px;
 top: 2160px;
 color: red;
 }
 .one16:hover .one16-one16{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 .one17-one17{
 position: absolute;
 display: none;
 left: 1140px;
 top: 2160px ;
 color: red;
 }
 .one17:hover .one17-one17{
 border: 1px solid red;
 display: block;
 width: auto;
 height: auto;
 }
 </style>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 var index=0;
 function sent(){
 index++;
 if (index>=2) {
 index=0;
 }
 var image1=document.getElementsByClassName('one1');
 for(var i=0; i<image1.length; i++){
 image1[i].style.display='none';
 }
 image1[index].style.display='block';
 }
 setInterval(sent,1000);
 $(function(){
 $(".one10").mouseover(function(){
 $(".one10-one10").animate({left:"480px"},);
 });
 });
 $(function(){
 $(".one11").mouseover(function(){
 $(".one11-one11").animate({left:"670px"});
 })
 });
 $(function(){
 $(".one12").mouseover(function(){
 $(".one12-one12").animate({left:"860px"});
 })
 });
 $(function(){
 $(".one13").mouseover(function(){
 $(".one13-one13").animate({left:"1040px"});
 })
 });
 $(function(){
 $(".one14").mouseover(function(){
 $(".one14-one14").animate({left:"480px"},);
 });
 });
 $(function(){
 $(".one15").mouseover(function(){
 $(".one15-one15").animate({left:"660px"},);
 });
 });

 $(function(){
 $(".one16").mouseover(function(){
 $(".one16-one16").animate({left:"860px"});
 })
 });
 $(function(){
 $(".one17").mouseover(function(){
 $(".one17-one17").animate({left:"1040px"});
 })
 });
 </script>
</head>
<body>
 <div class="one">
 <img class="five" src="./image/logo.png">
 <ul style="list-style-type:none;">
 <li class="twenty-three">HOME
 <ul class="twenty-three-twenty-three" style="list-style-type:none; color:black;">
 <li><hr style="color:red; height:5px"></li>
 <li><a href="赵美丽首页1.html" style="text-decoration:none;">&nbsp &nbsp Homepage1 &nbsp&nbsp</a></li>
 <li><a href="郭自豪首页2.html" style="text-decoration:none;">&nbsp &nbsp Homepage2 &nbsp&nbsp</a></li>
 <li><a href="董杏杏首页3.html" style="text-decoration:none;">&nbsp &nbsp Homepage3 &nbsp&nbsp</a></li>
 <li><a href="刘慧杰首页4.html" style="text-decoration:none;">&nbsp &nbsp Homepage4 &nbsp&nbsp</a></li>
 
 </ul>
 </li>
 <li class="twenty-hour">FEATURES
 <ul class="twenty-hour-twenty-hour" style="list-style-type:none ;color:black;">
 <li><hr style="color: red;"></li>
 <li>&nbsp &nbsp Event &nbsp &nbsp </li>
 <li>&nbsp &nbsp Comimg Soon &nbsp &nbsp </li>
 <li>&nbsp &nbsp 404 Page &nbsp &nbsp </li>
 <li>&nbsp &nbsp With List &nbsp &nbsp </li>
 
 </ul>
 </li>
 <li class="twenty-five">PRODCTS
 <ul class="twenty-five-twenty-five" style="list-style-type:none; color:black;">
 <li><hr style="color: red;"></li>
 <li>Shop Full Width List</li>
 <li>Shop Full Width Grid</li>
 <li>Shop Right Slidebar List</li>
 <li>Shop Right Slidebar Grid</li>
 <li>Shop Details Slidebar</li>
 <li>Shop Details</li>
 <li>Shop Order Tracking</li>
 <li>Shop Cart </li>
 
 </ul>
 </li>
 </li>
 <li class="twenty-six">BLOG
 <ul class="twenty-six-twenty-six" style="list-style-type:none; color:black;">
 <li><hr style="color: red;"></li>
 <li>Blog Grid 3Column</li>
 <li>Blog Grid 2Column</li>
 <li>Blog Right Slist</li>
 <li>Blog Details Slidebar</li>
 <li>Blog Details FullWidth</li>
 
 </ul>
 </li>
 <li class="twenty-seven">CONTACTUS
 <ul class="twenty-seven-twenty-seven" style="list-style-type:none; color:black;">
 <li><hr style="color: red;"></li>
 <li>Contact Us 1</li>
 <li>Contact Us 2</li>
 
 </ul>
 </li>
 <li class="twenty-seven">=
 <ul class="twenty-seven-twenty-seven" style="list-style-type:none; color:black;">
 <li><hr style="color: red;"></li>
 <li>Login/Register</li>
 <li>My Acctout</li>
 <li>My Wishlist</li>
 <li>My Cart</li>
 <li>Tracking Order</li>
 <li><hr></li>
 <li>LANCUACE</li>
 <li><img src="./image/flash3.png"width="30px" height="30px">
 <img src="./image/flash1.png"width="30px" height="30px">
 <img src="./image/flash2.png"width="30px" height="30px">
 </li>
 
 </ul>
 </li>
 </ul>
 </div>
 <ul style="list-style-type: none;">
 <li><img class="one1" src="./image/banner.jpg" width="900px" height="488px"></li>
 <li><img class="one1" src="./image/homepage46.png" width="900px" height="488px"></li>
 </ul>
 Welcome to Wizym
 Best Of Wine Store
 Wizay offers extensive collection of over 2,000 unique wines from prestigious
 Welcome to Wizym
 <div id="six"><a href="" style="text-decoration: none;">READ MORE</a></div>
 
 <div class="two">
 <img class="three" src="./image/homepage145.png" width="250px" height="250px">
 
 
 
 
 Our Form Wizym
 
 Welcome TO Wizym
 
 A New Generation of Wizym Lorem ipsum dolor sit amet,consetetuer adipiscing
 elit.Aenean commodo ligula eget dolor.Aenean massa.Cum sociis natoque
 penatibus et magnis dis parturient montes,mascetur mus
 
 Duis aute irue dolor in reprehende in voloptate velit esse cillum dolore eu
 wo want knows yous someings if you saying i'm will be happiness
 aut fugit
 <div class="six"><a href="" style="text-decoration: none;">ABOUT US</a></div>
 </div>
 <img id="seven" src="./image/homepage71.png" width="900px" height="500px">
 Our Products
 Deal Of The Week
 
 <img src="./image/nga.jpg">
 <img src="./image/homepage14.png">
 <img src="./image/nga.jpg">
 
 A New Gerneration of Winemmakers Lorem ipsum dolor sit elit acean
 commodo ligula
 <img id="twenty" style="margin-left:0px;" src="./image/homepage24.png">
 <img id="twenty" style="margin-left:40px;"src="./image/homepage25.png">
 <img id="twenty" style="margin-left:100px;"src="./image/homepage24.png">
 <img id="twenty" style="margin-left:140px;"src="./image/homepage25.png">
 <img id="twenty" style="margin-left:200px;"src="./image/homepage24.png">
 <img id="twenty" style="margin-left:240px;"src="./image/homepage25.png">
 <img id="twenty" style="margin-left:300px;"src="./image/homepage24.png">
 <img id="twenty" style="margin-left:340px;"src="./image/homepage25.png">
 <img id="twenty-one" style="margin-left:0px;"src="./image/homepage23.png">
 <img id="twenty-one" style="margin-left:40px;"src="./image/homepage26.png">
 <img id="twenty-one" style="margin-left:100px;"src="./image/homepage23.png">
 <img id="twenty-one" style="margin-left:140px;"src="./image/homepage26.png">
 <img id="twenty-one" style="margin-left:200px;"src="./image/homepage23.png">
 <img id="twenty-one" style="margin-left:240px;"src="./image/homepage26.png">
 <img id="twenty-one" style="margin-left:300px;"src="./image/homepage23.png">
 <img id="twenty-one" style="margin-left:340px;"src="./image/homepage26.png">
 0
 0
 0
 0
 <div id="eleven"><a href="" style="text-decoration: none;">ABOUT US</a></div>
 
 
 
 <center>Our Wines</center>
 
 <center>Our Products</center>
 
 
 <img src="./image/nga.jpg">
 <img src="./image/homepage14.png">
 <img src="./image/nga.jpg">
 
 
 Red Wine
 Sparking Wine
 White Wine
 Sparking Wine
 Champagne
 </div>
 
 <ul style="list-style-type:none;">
 <li class="one10"><img style="margin-left:110px" src="./image/homepage16.png" width="70px" height="200px">
 <ul style="list-style-type:none;" class="one10-one10">
 <li><a href="">&nbsp☾&nbsp&nbsp</a></li>
 <li><a href="">&nbsp♥&nbsp&nbsp</a></li>
 <li><a href="陈瑞晴购物车.html">

标签：color,twenty,top,nbsp,豪酒,首页,red,left
来源： https://www.cnblogs.com/gzh-like-your/p/14466905.html