红酒项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红酒项目</title>
<!-- css样式的外部引入用link -->
<!-- js样式的外部引入用script -->
<style type="text/css">
#jiayou{
border: 1px solid;
border-color: white;
width: 3800px;
height: 4500px;
}
.q{
font-size:25px;
top: 0px;
padding-left: 300px;
text-decoration: none;
}
#jj{
position: fixed;
border-radius: 50px;
left:2850px;
top: 90px;
}
#two{
border: 1px solid white ;
width: 3300px;
height: 80px;
margin-top: 40px;
background-color:lightgray ;
}
.d{
text-decoration: none;
position: fixed;
left: 500px;
top: 150px;
font-size:30px;
color: black;
}
.eing{
text-decoration: none;
position: fixed;
left: 600px;
top: 150px;
font-size:30px;
color: black;
}
.ring{
text-decoration: none;
position: fixed;
left: 700px;
top: 150px;
font-size:30px;
color: black;
}
.g{
text-decoration: none;
position: fixed;
left: 2400px;
top: 150px;
font-size:30px;
color: black;
}
.f{
font-size: 45px;
margin-left: 450px;
position: relative;
top: 100px;
text-decoration: none;
color: black;
}
.h{
position: absolute;
top: 200px;
width: 2200px;
margin-left: 350px;
}
#j{
width: 2200px;
height: 100px;
position: relative;
top: 200px;
left: 350px;
font-size: 30px;
background-color:lightgray;
}
.k{
position: relative;
top: 0px;
text-align: center;
}
.mm{
height: 100px;
width: 150px;
text-align: center;
background-color: white;
}
#yy{
position: absolute;
top: 500px;
}
#m{
border: 1px solid red;
width: 360px;
height: 60px;
font-size: 30px;
color: red;
position: relative;
top: 1000px;
left: 330px;
background-color: white;
}
#n{
border: 1px solid red;
width: 260px;
height: 60px;
font-size: 30px;
color: red;
position: relative;
top: 1000px;
left: 1650px;
background-color: white;
}
#m:hover{
background-color: darkred;
color: white;
}
#n:hover{
background-color: darkred;
color: white;
}
.b{
position: relative;
top:1200px;
font-size: 60px;
}
.w{
margin-left: 350px;
}
.e{
margin-left: 550px;
}
#v{
position: relative;
top: 1230px;
}
.c{
font-size: 30px;
margin-left: 350px;
}
#x{
height: 50px;
width: 400px;
margin-left:350px;
position: relative;
top: 1250px;
}
.z{
border: 1px solid red ;
position: relative;
top: 1255px;
width:200px;
height:60px;
font-size: 25px;
background-color: white;
}
.z:hover{
background-color: darkred;
color: white;
}
.o{
position: relative;
top: 1280px;
font-size: 25px;
margin-left: 150px;
}
.u{
position: relative;
top: 1220px;
height: 55px;
width: 200px;
margin-left: 1480px;
font-size: 20px;
}
.t{
position: relative;
top: 1350px;
right: 580px;
font-size: 30px;
}
#y{
position: relative;
top: 1350px;
right: 470px;
font-size: 20px;
height: 55px;
width: 150px;
}
#r{
border: 1px solid red;
width: 260px;
height: 60px;
font-size: 30px;
color: red;
position: relative;
top: 1500px;
left: 1500px;
background-color: white;
}
#r:hover{
background-color: darkred;
color: white;
}
#zj{
border: 1px solid red;
width: 460px;
height: 60px;
font-size: 30px;
color: red;
position: relative;
top: 1560px;
left: 1850px;
background-color: white;
}
#zj:hover{
background-color: darkred;
color: white;
}
#qw{
border: 1px solid;
position: absolute;
top: 1400px;
left: 2000px;
width:600px;
height: 260px;
font-size: 30px;
}
.er{
line-height: 80px;
}
.rm{
line-height: 80px;
float: right;
}
#gh{
position: absolute;
top: 2800px;
}
.jk{
position: absolute;
top:2900px;
left: 1250px;
}
.rb{
font-size: 60px;
position: absolute;
top: 3100px;
left: 1150px;
}
.rb a{
color: black;
text-decoration: none;
}
.al{
position:absolute;
top: 3480px;
left: 600px;
font-size: 50px;
color: gray;
text-decoration: none;
}
.bl{
position:absolute;
top: 3480px;
left: 900px;
font-size: 50px;
color: gray;
text-decoration: none;
}
.cl{
position:absolute;
top: 3480px;
left: 1400px;
font-size: 50px;
color: gray;
text-decoration: none;
}
.dl{
position:absolute;
top: 3480px;
left: 1900px;
font-size: 50px;
color: gray;
text-decoration: none;
}
.el{
position:absolute;
top: 3480px;
left: 2300px;
font-size: 50px;
color: gray;
text-decoration: none;
}
.po{
position: absolute;
top: 3600px;
left: 1000px;
color: gray;
}
#qcc{
border: 1px solid;
width: 1370px;
height: 1900px;
position: absolute;
top: 410px;
left: 350px;
font-size: 30px;
}
.wcc{
border: 1px solid;
width: 1370px;
height: 90px;
}
.ecc{
position: relative;
top: 60px;
left: 50px;
}
.tcc{
width: 600px;
height: 70px;
margin-left: 50px;
margin-top: 70px;
}
.rcc{
position: relative;
top: 60px;
left: 550px;
}
.ycc{
width: 600px;
height: 70px;
margin-left: 50px;
margin-top: 70px;
}
.ucc{
margin-left: 50px;
margin-top: 30px;
}
.icc{
width: 1250px;
height: 70px;
margin-top:10px;
}
#occ{
margin-left: 50px;
margin-top: 100px;
width: 30px;
height: 30px;
}
#pcc{
margin-left: 50px;
margin-top: 20px;
width: 30px;
height: 30px;
}
.acc{
margin-left: 50px;
margin-top: 30px;
}
.scc{
border: 1px solid;
width: 800px;
height: 85px;
text-align: center;
font-size: 30px;
position: relative;
top: 285px;
left: 1800px;
}
.dcc{
position: relative;
top: 300px;
left: 1800px;
font-size:30px;
margin-top: 110px;
}
.fcc{
margin-left: 500px;
}
.gcc{
position: relative;
top: 110px;
}
.hcc{
margin-left: 320px;
position: relative;
top: 110px;
}
.jcc{
position: relative;
top: 210px;
}
.kcc{
position: relative;
top: 210px;
left: 330px;
}
.lcc{
position: relative;
top: 310px;
}
.zcc{
position: relative;
top: 310px;
left: 540px;
}
.xcc{
position: relative;
top: 410px;
}
.ccc{
position: relative;
top: 410px;
left: 500px;
}
.vcc{
position: relative;
top: 510px;
}
.bcc{
position: relative;
top: 510px;
left: 400px;
}
.ncc{
position: relative;
top: 910px;
left: 1800px;
font-size: 30px;
}
#mcc{
width: 30px;
height: 30px;
}
.qss{
position: relative;
top: 1000px;
left: 1800px;
font-size: 30px;
}
.wss{
position: relative;
top: 1000px;
left: 1800px;
font-size: 30px;
}
#ess{
width: 30px;
height: 30px;
}
.rss{
margin-top:50px;
margin-left:50px;
}
#tss{
position: relative;
top: 1100px;
left: 2000px;
font-size: 30px;
color: red;
border: 1px solid red;
height: 80px;
width: 420px;
background-color: white;
}
#tss:hover{
background-color: darkred;
color: white;
}
.qen{
position: relative;
top: 300px;
left: 400px;
font-size:30px;
}
.wen{
position: relative;
left: 200px;
font-size:30px;
top: 350px;
}
.een{
margin-left:200px;
font-size:50px;
}
#ren{
position: relative;
top: 400px;
left: 10px;
font-size: 30px;
}
.ten{
margin-left: 400px;
}
.yen{
margin-left: 450px;
}
.uen{
margin-left: 100px;
}
.ien{
margin-left: 250px;
}
.oen{
position: relative;
top: 500px;
left: 400px;
font-size:60px;
text-decoration: none;
color: black;
}
.pen{
border: 1px solid;
width: 2200px;
height: 1000px;
position: relative;
top: 510px;
left: 400px;
}
.aen{
font-size:30px;
padding-top:50px;
padding-left: 50px;
}
.sen{
font-size:30px;
padding-top:100px;
padding-left: 1200px;
}
a:hover{
color: red;
}
#ww:hover{
background-color:red;
color: white;
}
#qaa{
margin-left: 200px;
float: left;
list-style-type: none;
}
#qaa a{
text-decoration: none;
}
#waa{
display: none;
list-style-type: none;
border: 5px solid;
background-color: white;
border-color: white;
border-top-color: red;
}
#qaa:hover #waa{
display: block;
}
#eaa{
position: absolute;
left: 600px;
}
.raa{
color: black;
font-size: 25px;
line-height: 70px;
}
.saa{
color: black;
font-size: 25px;
}
#kaa{
position: absolute;
left: 2820px;
}
#ring{
position: fixed;
top: 0px;
z-index: 30;
border: 0px;
height: 300px;
width: 3300px;
background-color: white;
}
#wing{
position: relative;
top: 300px;
}
ul,li{
list-style-type: none;
}
a:hover{
text-decoration: none;
}
button:hover{
cursor: pointer;
}
.hpp{
font-size: 45px;
position:relative;
left: 1250px;
top: 50px;
text-decoration: none;
color: black;
}
.kpp{
font-size: 45px;
position: absolute;
left: 2050px;
text-decoration: none;
color: black;
}
#weikuang{
position: absolute;
top: 3280px;
left: 980px;
height: 100px;
width: 800px;
border-radius: 50px;
font-size: 30px;
}
#weikuangs{
position: absolute;
top: 3280px;
left: 1710px;
height: 100px;
width: 100px;
border-radius: 50px;
background-color: red;
font-size: 30px;
}
#weikuangs:hover{
background-color: black;
color: red;
}
#dakuang{
position: relative;
top: -2000px;
}
.show{
display: block;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="jiayou">
<div id="ring">
<div id="one">
<img src="./image/logo.png" width="200px" height="80px"/>
<div id="eaa">
<ul>
<li id="qaa"><a class="saa" href="">Home</a>
<ul id="waa">
<li><a class="raa" href="">Homepage1</a></li>
<li><a class="raa" href="首页2.html">Homepage2</a></li>
<li><a class="raa" href="">Homepage3</a></li>
<li><a class="raa" href="">Homepage4</a></li>
<li><a class="raa" href="">Homepage5</a></li>
</ul>
</li>
<li id="qaa"><a class="saa" href="">FEATURES</a>
<ul id="waa">
<li><a class="raa" href="">Event</a></li>
<li><a class="raa" href="">Coming Soon</a></li>
<li><a class="raa" href="">404 Page</a></li>
<li><a class="raa" href="">Wish List</a></li>
</ul>
</li>
<li id="qaa"><a class="saa" href="">PRODOUCTS</a>
<ul id="waa">
<li><a class="raa" href="">Shop Full Width List</a></li>
<li><a class="raa" href="">Shop Full Width Card</a></li>
<li><a class="raa" href="">Shop Rigrht Slldebar List</a></li>
<li><a class="raa" href="">Shop Rigrht Slldebar Card</a></li>
<li><a class="raa" href="">Shop Detaila Slldebar</a></li>
<li><a class="raa" href="">Shop Detaila</a></li>
<li><a class="raa" href="">Shop Border Tracking List</a></li>
<li><a class="raa" href="">Shop Cart</a></li>
</ul>
</li>
<li id="qaa"><a class="saa" href="">BTOG</a>
<ul id="waa">
<li><a class="raa" href="">Blog Crld 3Column</a></li>
<li><a class="raa" href="">Blog Crld 2Column</a></li>
<li><a class="raa" href="">Blog Rigrht Slldebar</a></li>
<li><a class="raa" href="">Blog Detaila Slldebar</a></li>
<li><a class="raa" href="">Blog Detaila FullWidth</a></li>
</ul>
</li>
<li id="qaa"><a class="saa" href="">CONTACT US</a>
<ul id="waa">
<li><a class="raa" href="">CONTACT US 1</a></li>
<li><a class="raa" href="">CONTACT US 2</a></li>
</ul>
</li>
</ul>
</div>
<input type="text" name="" id="jj" value="search..."/>
<ul id="kaa">
<li id="qaa"><a class="saa" href="">三</a>
<ul id="waa">
<li><a class="raa" href="">Long/Register</a></li>
<li><a class="raa" href="">My Account</a></li>
<li><a class="raa" href="">My Wishlist</a></li>
<li><a class="raa" href="">My Cart</a></li>
<li><a class="raa" href="">Tracking Oders</a></li>
<li><a class="raa" href="">LANGUAGE</a></li>
<li><img class="raa" src="./image/flash3.png" width="40px" height="40px">
<img class="raa" src="./image/flash1.png" width="40px" height="40px">
<img class="raa" src="./image/flash2.png" width="40px" height="40px">
</li>
</ul>
</li>
</ul>
</div>
<div id="two">
<span><a class="d" href="">HOME/</a></span>
<span><a class="eing" href="">Product/</a></span>
<span><a class="ring" href="">Shopping Cart</a></span>
<span><a class="g" href="">Cart</a></span>
</div>
</div>
<div id="wing">
<div>
<ul id="menu1">
<li id="one1" onclick="setTab(1)"><a class="f" href="">SHOPPING CART</a></li>
<li id="one2" onclick="setTab(2)" class="hpp">CHECKOUT</li>
<li id="one3" onclick="setTab(3)" class="kpp">ORDER COMPLETE</li>
</ul>
<hr class="h">
</div>
<div id="content">
<div id="con1">
<table id="j" border="0" solid>
<tr>
<td class="k">image</td>
<td class="k">ProductName</td>
<td class="k">Price</td>
<td class="k">Quantity</td>
<td class="k">Total</td>
<td class="k">✖</td>
</tr>
<tr class="mm">
<td><img src="./image/homepage79.png" width="50px"></td>
<td>Bougrier Rose d'Anjou</td>
<td style="color: red">$34.99</td>
<td>
<button id="sub">-</button>
<span id="res">2</span>
<button id="add">+</button>
</td>
<td style="color: red">69.98</td>
<td>✖</td>
</tr>
<tr class="mm">
<td><img src="./image/homepage59.png"></td>
<td>D'Autrefois Rose de Pinot Noir</td>
<td style="color: red">$28.99</td>
<td>
<button id="sub">-</button>
<span id="res">1</span>
<button id="add">+</button>
</td>
<td style="color: red">$28.99</td>
<td>✖</td>
</tr>
<tr class="mm">
<td><img src="./image/homepage61.png"></td>
<td>Chateau Vinonne Bandol Rose</td>
<td style="color: red">$46.99</td>
<td>
<button id="sub">-</button>
<span id="res">3</span>
<button id="add">+</button>
</td>
<td style="color: red">$40.97</td>
<td>✖</td>
</tr>
<tr class="mm">
<td><img src="./image/homepage60.png"></td>
<td>Olema Rose Cotes De</td>
<td style="color: red">$25.99</td>
<td>
<button id="sub">-</button>
<span id="res">1</span>
<button id="add">+</button>
</td>
<td style="color: red">$25.99</td>
<td>✖</td>
</tr>
</table>
<div id="yy">
<div>
<input type="button" id="m" onclick="1" value="CONTINUESHOPPING">
<input type="button" id="n" onclick="2" value="CLEAR CART"/> <input type="button" id="n" onclick="3" value="UPDATE CART"/>
</div>
<div class="b">
<span class="w">Discount Codes</span>
<span class="w">Estimate Shopping</span>
<span class="e">Cart Total</span>
</div>
<div id="v">
<span class="c">Enter your coupin if you have one</span>
<span class="c">Enteryour destination to get shipping</span><br></div>
<form action="">
<span><input type="text" name="" id="x"></span>
<span><input class="z" type="button" name="" value="submit"></span>
<span class="o">COUNTRY</span>
</form>
<span><select class="u">
<option value=""> UnitedStates</option>
<option value=""> Saad</option>
<option value=""> Opel</option>
<option value=""> Audi</option>
</select>
</span>
<span class="t">POSTALCODE/ZIP'</span>
<select id="y">
<option value=""> 01234567</option>
<option value=""> Saad</option>
<option value=""> Opel</option>
<option value=""> Audi</option>
</select>
<div> <input type="button" id="r" name="" value="GET A QUOTE">
<input type="button" id="zj" name="" value="PROCEED TO CHECH OUR"></div>
<div id="qw">
<span class="er">SUB TOTAL</span>
<span class="rm" style="color: red" >$320.00</span><br/>
<span class="er">SHIPPING</span>
<span class="rm" style="color: red"> Free </span> <br/>
<span class="er">TOTAL</span>
<span class="rm" style="color: red">$320.00 </span>
</div>
</div>
<div>
<div id="gh">
<img src="./image/footer.jpg" width="3300px" height="1000" />
</div>
<div id="wei"></div>
<div class="jk">
<img src="./image/logo.png" height="80px" width="260px">
</div>
<h1 class="rb"><a href="">Get news & offers</a></h1>
<input type="text" value="Your Email" name="" id="weikuang">
<button id="weikuangs">❤</button>
<span>
<a class="al" href="">About Us |</a>
<a class="bl" href="">Customer Sertive |</a>
<a class="cl" href="">Tems & Conditions |</a>
<a class="dl" href="">Privacy Policy |</a>
<a class="el" href="">Contact</a>
</span>
<h1 class="po">Copyright @ 2019 Company name All rights reserved网页模板</h1>
</div>
</div>
<div id="con2" class="hide"> <div class="scc"><h4>Your Order</h4></div>
<div class="dcc">Product<span class="fcc">Total</span><br/>
<span class="gcc">Bougrier Rose d'Anjou</span><span class="hcc">$29.99</span><br/>
<span class="jcc">Olema Rose Cotes De</span><span class="kcc">$36.89</span><br/>
<span class="lcc">Total</span><span class="zcc">$66.88</span><br/>
<span class="xcc">Shipping</span><span class="ccc">Free Shipping</span><br/>
<span class="vcc">ORDER TOTAL </span><span class="bcc">$66.88</span>
</div>
<div class="ncc"><input type="checkbox" name="" id="mcc"> DIRECT BANK TRANSFER</div>
<div class="qss"> Make your payment directly into our bank account. Please<br> use your Order ID as the pay ments reference. Your order<br> will not be shipped until the funds have cleared in our<br> account.</div>
<div class="wss"><input type="checkbox" name="" id="ess"> CHECK PAYMENTS </div>
<div class="wss"><input type="checkbox" name="" id="ess"> PAYPAL<img src="./image/homepage136.png" width="400px" height="80px" class="rss"></div>
<input type="button" id="tss" name="" value="PEOCEED TO CHECK OUR">
<div id="qcc">
<div class="wcc">
<h4 style="text-align: center;">Billing Address</h4>
</div>
<span class="ecc">First Name *</span><span class="rcc">List Name *</span><br>
<span><input type="text" name="" class="tcc"><input type="text" name="" class="ycc"></span>
<div class="ucc">Company Name *<br><input type="text" name="" class="icc"></div>
<div class="ucc">Coundry *<br><input type="text" name="" class="icc" value="Units States"></div>
<div class="ucc">Address *<br><input type="text" name="" class="icc" value="100A 8th St, Los Angeles, CA 90014"></div>
<div class="ucc">POSTCODE/ZIP *<br><input type="text" name="" class="icc"></div>
<div class="ucc">TOWN/CITY *<br><input type="text" name="" class="icc"></div>
<span class="ecc">Email Address *</span><span class="rcc">Phone Number *</span><br>
<span><input type="text" name="" class="tcc"><input type="text" name="" class="ycc"></span><br>
<input type="checkbox" name="" id="occ"><span> Create an account?</span><br>
<input type="checkbox" name="" id="pcc"><span> Ship to different address?</span>
<div class="acc">Order note *<br><textarea rows="15" cols="170"></textarea></div>
</div>
<div>
<div id="gh">
<img src="./image/footer.jpg" width="3300px" height="1000" />
</div>
<div class="jk">
<img src="./image/logo.png" height="80px" width="260px">
</div>
<h1 class="rb"><a href="">Get news & offers</a></h1>
<input type="text" value="Your Email" name="" id="weikuang">
<button id="weikuangs">❤</button>
<span>
<a class="al" href="">About Us |</a>
<a class="bl" href="">Customer Sertive |</a>
<a class="cl" href="">Tems & Conditions |</a>
<a class="dl" href="">Privacy Policy |</a>
<a class="el" href="">Contact</a>
</span>
<h1 class="po">Copyright @ 2019 Company name All rights reserved网页模板</h1>
</div>
</div>
<div id="con3" class="hide"><div class="qen">Thank you. Your order has been received</div>
<div class="wen">
<span class="een"> Order number: <b class="qing">|</b></span>
<span class="een">Datel <b>|</b></span>
<span class="een">Total: <b>|</b></span>
<span class="een">Payment methob: <b>|</b></span>
</div>
<div id="ren">
<span class="ten">1599</span>
<span class="yen">December 11, 2018</span>
<span class="uen">$88.95</span>
<span class="ien">Cash on deliery</span>
</div>
<a href="" class="oen">Order details</a>
<div class="pen">
<table border="0" solid>
<tr>
<td class="aen">PRODUCT</td><td class="sen">$TOTAL</td>
</tr>
<tr>
<td class="aen">Bougrier Rose dAnjou</td>
<td class="sen">$29.99</td>
</tr>
<tr>
<td class="aen">Olema Rose Cotes De</td>
<td class="sen">$36.89</td>
</tr>
<tr>
<td class="aen">Total</td>
<td class="sen">$66.88</td>
</tr>
<tr>
<td class="aen">Shipping</td>
<td class="sen">Free Shipping</td>
</tr>
<tr>
<td class="aen">Payment methob:</td>
<td class="sen">Cash on delivery</td>
</tr>
<tr>
<td class="aen">ORDER TOTAL </td>
<td class="sen">$69.99</td>
</tr>
</table>
</div>
<div id="dakuang">
<div id="gh">
<img src="./image/footer.jpg" width="3300px" height="1000" />
</div>
<div class="jk">
<img src="./image/logo.png" height="80px" width="260px">
</div>
<h1 class="rb"><a href="">Get news & offers</a></h1>
<input type="text" value="Your Email" name="" id="weikuang">
<button id="weikuangs">❤</button>
<span>
<a class="al" href="">About Us |</a>
<a class="bl" href="">Customer Sertive |</a>
<a class="cl" href="">Tems & Conditions |</a>
<a class="dl" href="">Privacy Policy |</a>
<a class="el" href="">Contact</a>
</span>
<h1 class="po">Copyright @ 2019 Company name All rights reserved网页模板</h1>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#menu1 li").click(function(){
var $index=$(this).index();
console.log($index);
$("#content").children("div").eq($index).attr("class","show");
$("#content").children("div").eq($index).siblings().attr("class","hide");
});
});
</script>
</div>
</body>
</html>
