<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>eBay網站練習</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="eBay.css">
</head>
<body>
<!-- -------------------------------Header------------------------------- -->
<header>
<div class="container">
<ul class="navbar">
<li id="signinstyle" class="navitem ">Hi! <a href="#">Sign in </a>or <a href="#">register</a></li>
<li class="navitem"><a href="#">Daily Deals</a></li>
<li class="navitem"><a href="#">Sell</a></li>
<li class="navitem noborder"><a href="#">Help & Contact</a></li>
<li id="car" class="navitem floatright noborder"><img src="Image/shoppingcar.png" alt="shopping" title="shopping" "></li>
<li id="alarm" class="navitem floatright noborder"><img src="Image/alarm.png" alt="alarm" width="20px"></li>
<li class="navitem floatright noborder">My eBay</li>
</ul>
</div>
</header>
<!-- -------------------------Search Form----------------------------- -->
<div id="searchbar" class="clearfix setBGcolor">
<div class="container">
<img id="brand" src="Image/brand.png" alt="eBay" height="55px">
<button id="shoppingbutton" type="button">
<p>Shop by category</p>
<img id="arrow" src="Image/arrow.png" alt="arrow" width="20px">
</button>
<form id="searchform">
<table>
<tr>
<td>
<input class="text-field" id="searchfield" type="text" name="searchcontain" placeholder="Search for anything">
</td>
<td>
<div id="categorytextfield" class="text-field">
<select class="options" name="cate">
<option selected="selected" value="1">All categories</option>
<option value="2">Antiques</option>
<option value="3">Art</option>
<option value="4">Baby</option>
<option value="5">Books</option>
<option value="6">Business & Industrial</option>
<option value="7">Cameras & Photo</option>
<option value="8">Cell Phones & Accessories</option>
</select>
</div>
</td>
<td>
<input class="buttonprimary" value="search" type="submit" name="">
</td>
<td>
<a id="advancedbutton" href="#" title="Advanced">Advanced</a>
</td>
</tr>
</table>
</form>
</div>
</div>
<!-- --------------------------Navigation Bar---------------------------- -->
<nav class="clearfix setBGcolor">
<div class="container">
<ul id="navigationbar" class="navbar tb-border">
<li class="navitem li-space" ><a href="#">Follong</a></li>
<li class="navitem li-space active"><a href="#">Today</a></li>
<div class="divider"></div>
<li class="navitem li-space"><a href="#">Fashion</a></li>
<li class="navitem li-space"><a href="#">Electronics</a></li>
<li class="navitem li-space"><a href="#">Collectibies & Art</a></li>
<li class="navitem li-space"><a href="#">Home & Garden</a></li>
<li class="navitem li-space"><a href="#">Sporting Goods</a></li>
<li class="navitem li-space"><a href="#">Motors</a></li>
<li class="navitem li-space"><a href="#">Daily Deals</a></li>
</ul>
</div>
</nav>
<!-- ----------------------Advertisement---------------------- -->
<section id="ad-section" class="clearfix setBGcolor">
<div class="container">
<div id="column1">
<div>
<img id="ad1" class="add-border" src="Image/ad1.png" alt="ad1" width="658px">
</div>
</div>
<div id="column2">
<div>
<img id="ad2" class="add-border" src="Image/ad2.png" alt="ad2" width="300px">
</div>
<div>
<img id="ad3" class="add-border" src="Image/ad3.png" alt="ad3" width="300px">
</div>
</div>
</div>
</section>
<!-- -------------------------------Product Section------------------------------- -->
<section id="productSection" class="setBGcolor clearfix">
<div class="container">
<h2 class="hero-heading">Today's Featured Collections</h2>
<div id="show-product">
<!-- ----------------Product1----------------- -->
<div class="product-section">
<div class="product-photo">
<div class="photo-column1">
<img id="photo1" src="Image/product1.jpg" alt="product1">
</div>
<div class="photo-column2">
<div class="thumb">
<img class="thumbnail1" src="Image/thumbnail1-1.jpg" alt="thumbnail1-1" width="118px">
</div>
<div class="thumb">
<img class="thumbnail2" src="Image/thumbnail1-2.jpg" alt="thumbnail1-2" width="118px">
</div>
<div class="thumb">
<img class="thumbnail3" src="Image/thumbnail1-3.jpg" alt="thumbnail1-" width="118px">
</div>
</div>
</div>
<!-- ---------------------Article--------------------- -->
<article>
<div class="left-col">
<h3 class="title"> In a Flash</h3>
<div class="description-container">
<p class="product-details">Make new memories with instant camersa like a Fuji Insrax Mini 25, a Leica Sofort, or a Polaroid instant-print camera-plus a Lomo'Instant Automat from Lomography.
<a href="#" title="閱讀更多"><span class="read-more"></span></a>
</p>
</div>
</div>
<div class="right-col right-col-text">
<ul class="right-col-container">
<li class="right-col-item">15 item</li>
<li class="right-col-item">by ebaytecheditor</li>
<li class="right-col-item"><a class="active-link" href="#">Shop now</a></li>
</ul>
</div>
</article>
</div>
<!-- ----------------Product1 END----------------- -->
<!-- ----------------Product2----------------- -->
<div class="product-section rifgt-section">
<div class="product-photo">
<div class="photo-column1">
<img id="photo1" src="Image/product2.jpg" alt="product2">
</div>
<div class="photo-column2">
<div class="thumb">
<img class="thumbnail1" src="Image/thumbnail2-1.jpg" alt="thumbnail2-1" width="118px">
</div>
<div class="thumb">
<img class="thumbnail2" src="Image/thumbnail2-2.jpg" alt="thumbnail2-2" width="118px">
</div>
<div class="thumb">
<img class="thumbnail3" src="Image/thumbnail2-3.jpg" alt="thumbnail2-3" width="118px">
</div>
</div>
</div>
<!-- ---------------------Article--------------------- -->
<article>
<div class="left-col">
<h3 class="title"> Culinary Cuteness</h3>
<div class="description-container">
<p class="product-details">Find adorably playful kichen gadgets like a Kiplk porcupine toothpick holder, a Suck UK tea infuser shaped like a goldfish, or a ship-shaped butter dish from Alessi-plus a pair of Red Riding Hood and Big Bad Wolf salt and
<a href="#" title="閱讀更多"><span class="read-more"></span></a>
</p>
</div>
</div>
<div class="right-col right-col-text">
<ul class="right-col-container">
<li class="right-col-item">15 item</li>
<li class="right-col-item">by ebaytecheditor</li>
<li class="right-col-item"><a class="active-link" href="#">Shop now</a></li>
</ul>
</div>
</article>
</div>
<!-- ----------------Product2 END----------------- -->
</div>
</div>
</section>
<!-- ----------------Daily Deals----------------- -->
<section id="daily-deals" class="setBGcolor clearfix">
<div class="container">
<h2 class="hero-heading">Daily Deals</h2>
<div class="box">
<div class="box-subcontent">
<img class="sale" src="Image/1.jpg" alt="sale-pic">
<a href="#" class="details">Dyson SV07 V6 HEPA Cordless Vacuum</a>
<h4 class="price">HKD 431.63</h4>
</div>
<div class="box-subcontent">
<img class="sale" src="Image/2.jpg" alt="sale-pic">
<a href="#" class="details">Dyson SV07 V6 HEPA Cordless Vacuum</a>
<h4 class="price">HKD 431.63</h4>
</div>
<div class="box-subcontent">
<img class="sale" src="Image/3.jpg" alt="sale-pic">
<a href="#" class="details">Dyson SV07 V6 HEPA Cordless Vacuum</a>
<h4 class="price">HKD 431.63</h4>
</div>
<div class="box-subcontent">
<img class="sale" src="Image/4.jpg" alt="sale-pic">
<a href="#" class="details">Dyson SV07 V6 HEPA Cordless Vacuum</a>
<h4 class="price">HKD 431.63</h4>
</div>
<div class="box-subcontent">
<img class="sale" src="Image/5.jpg" alt="sale-pic">
<a href="#" class="details">Dyson SV07 V6 HEPA Cordless Vacuum</a>
<h4 class="price">HKD 431.63</h4>
</div>
<!-- -------------Pagination-------------- -->
<div class="pagination clearfix">
<div class="pagination-content">
<a href="#">(</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#" class="active">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">)</a>
</div>
</div>
</div>
<!-- ---------------Collections---------------- -->
<div id="collections">
<p>Get inspired! Explore all of our <a href="#">Trending Collections</a></p>
</div>
</div>
</section>
<!-- ---------------Footer---------------- -->
<footer>
<div class="container">
<div style="float: right;">
<p>© 2018 版權 Bruce.com</p>
</div>
</div>
</footer>
</body>
</html>
------------------------------------------------CSS-----------------------------------------------------
/*-------------------------------Header------------------------------- --*/
body{
margin: 0px;
}
header{
box-shadow: 0 3px 5px #CCCCCC;
padding:9px 0;
position: relative;
z-index: 1;
}
.container{
width: 980px;
margin: auto;
}
.navbar{
list-style: none;
font-size: 12px;
margin: 0px;
padding: 0px;
}
li.navitem{
display: inline;
border-right: 1px solid #777777;
}
li.navitem a{
padding: 0 9px;
color: #555555;
}
li.navitem a:link{
text-decoration: none;
}
li.navitem a:hover{
text-decoration: underline;
color: #0654BA;
}
#signinstyle a:link{
color: #0654BA;
padding: 0px;
}
#signinstyle a:link:last-child{
padding-right:16px;
}
.floatright{
float: right;
}
.noborder{
border-right: none !important;
}
#car{
margin-top: -2px;
padding: 0 10px 0 15px;
}
#alarm{
margin-top: -3px;
padding: 0 10px 0 25px;
}
/*--------------------------Search Form--------------------------*/
#searchbar{
width: 100%;
height: 65px;
overflow: hidden;
}
.setBGcolor{
background-color: #F9F9F9;
}
.clearfix{
clear: both;
}
#brand{
float: left;
}
#shoppingbutton{
float: left;
width: 70px;
font-size: 14px;
color: #555555;
border:none;
background-color: #F9F9F9;
margin-right: 15px;
}
#arrow{
position: relative;
bottom: 35px;
left: 40px;
}
#searchform{
float: left;
margin-top: 10px;
margin-left: 15px;
}
#searchfield{
border-radius: 3px 0 0 3px;
width: 360px;
height: 40px;
box-sizing: border-box;
}
.text-field{
font-size: 16px;
color: #767676;
padding: 10px 0 9px 8px;
border:1px solid #DDD;
box-sizing: border-box;
}
#categorytextfield{
border-radius: 0 3px 3px 0;
padding: 11px 10px;
height: 40px;
width: 180px;
background-color: #FFF;
box-sizing: border-box;
margin-left: -4px;
}
.options{
border:none;
font-size: 12px;
width: 100%;
background-color: transparent;
}
.buttonprimary{
font-size: 16px;
height: 38px;
border-radius: 3px;
font-weight: 500;
border:0;
background:linear-gradient(to bottom, #0079bc,#00509b);
color: #fff;
padding: .5em 1.2em;
}
.buttonprimary:hover{
background: #00509d;
}
#advancedbutton{
color: #555555;
text-decoration: none;
font-size: 11px;
margin-left: 10px;
}
#advancedbutton:hover{
color: #0654BA;
}
/*--------------------------Navigation Bar----------------------------*/
nav{
width: 100%;
height: 35px;
padding-top: 12px;
}
.tb-border{
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#navigationbar{
width: 100%;
height: 35px;
padding: 10px 0 11px 0;
box-sizing: border-box;
}
.li-space{
float: left;
padding: 0 1.2%;
border-right:none !important;
}
.divider{
width: 1px;
background-color: #DDD;
height: 24px;
float: left;
margin: -5px 8px 0 8px;
}
.active a{
font-weight: bold;
border-bottom: 2px solid #555;
padding-left: 0px !important;
padding-right: 0px !important;
padding-bottom: 8px !important;
}
.active a:hover{
text-decoration: none !important;
color:#555 !important;
}
/*-------------------------Advertisement----------------------------*/
#ad-section{
height: 410px;
padding:32px 0;
}
#column1{
float: left;
height: 402px;
overflow: hidden;
}
#column2{
float: right;
height: 402px;
width: 300px;
position: relative;
}
.add-border{
border:1px solid #ddd;
box-sizing: border-box;
}
#ad2{
position: absolute;
top: 0px;
right: 0px;
}
#ad3{
position: absolute;
right: 0px;
bottom: 0px;
}
/*-------------------------Product Section----------------------------*/
#productSection{
width: 100%;
height: 647px;
padding-bottom: 75px;
overflow: hidden;
}
.hero-heading{
height: 45px;
border-bottom: 1px solid #ddd;
font-weight: 400;
color: #555;
margin-top: 0px;
}
#show-product{
width: 100%;
height: 602.5px;
position: relative;
}
.product-section{
float: left;
width: 480px;
height: 6052.5px;
}
.product-photo{
width: 480px;
height: 360px;
}
.photo-column1{
float: left;
width: 360px;
height: 360px;
border-width: 1px 0 1px 1px;
border-color: #ddd;
border-style: solid;
box-sizing: border-box;
overflow: hidden;
}
#photo1{
height: 358px;
width: 358px;
}
.photo-column2{
float: left;
width: 120px;
height: 360px;
box-sizing: border-box;
overflow: hidden;
}
.thumb{
width: 120px;
height: 120px;
border-width: 1px 1px 0 1px;
border-color: #ddd;
border-style: solid;
box-sizing: border-box;
overflow: hidden;
}
.thumb:last-child{
border-width: 1px;
border-color: #ddd;
border-style: solid;
}
.thumbnail{
height: 140px;
}
/*---------------------Article---------------- --*/
article{
color: #333333;
}
.title{
font-weight: 400;
font-size: 26px;
margin: 18px 0 10px 0;
}
.description-container{
width: 340px;
height: 100px;
}
.product-details{
font-weight: 400;
font-size: 16px;
line-height: 1.5em;
}
.read-more{
display: inline-block;
width: 20px;
height: 20px;
background-image:url("Image/readmore.png");
background-size: cover;
vertical-align: middle;
}
.left-col{
float: left;
width: 340px;
}
.right-col{
float: right;
width: 140px;
}
.right-col-text{
text-align: center;
color: #333333;
font-size: 14px;
font-weight: bold;
}
.right-col-container{
padding-left: 8px;
padding-right: 8px;
margin: 0px;
list-style: none;
}
.right-col-item{
padding: 18px 0;
border-bottom: 1px solid #ddd;
}
.right-col-item:last-child{
border-bottom: none;
}
.right-col-item a:link {
text-decoration: none;
color: #0654BA;
}
.right-col-item a:hover {
text-decoration: underline;
}
/*------------Product2--------------*/
.rifgt-section{
position: absolute;
right: 0;
}
/*--------------Daily Deals--------------*/
#daily-deals{
width: 100%;
height: 530px;
padding-bottom: 75px;
border-bottom: 1px solid #ddd;
}
.box{
width: 100%;
height: 300px;
padding: 25px 0 0 8px;
vertical-align: middle;
overflow: hidden;
border:1px solid #ddd;
border-radius: 2px;
background-color: white;
margin-bottom: 80px;
}
.box-subcontent{
float: left;
width: 145px;
margin: 0 24px;
}
.sale{
width: 150px;
}
.details{
width: 160px;
display: inline-block;
font-size: 14px;
padding: 8px 0 0 8px;
color: black;
text-decoration: none;
}
.details:hover{
text-decoration: underline;
color: #0654BA;
}
.price{
padding: 8px 0 0 8px;
margin: 0px;
}
/*-------------------Pagination------------------*/
.pagination{
text-align: center;
}
.pagination-content{
padding-top: 20px;
display: inline-block;
}
.pagination-content a{
color: black;
float: left;
padding: 10px 16px;
text-decoration: none;
transition: background-color 0.3s
}
.pagination-content a:hover:not(.active){
background-color: #ddd;
}
.pagination-content a.active{
background-color: #4CAF50;
color: white;
}
/*-------------------Collections------------------*/
#collections{
border:1px solid #ddd;
background-color: white;
border-radius: 2px;
text-align: center;
color: #777777;
box-sizing: border-box;
}
#collections a{
color: #0754BA;
text-decoration: none;
}
#collections a:hover{
color: #0754BA;
text-decoration: underline;
}
/*-------------------Footer-----------------*/
footer{
color: #777777;
}
留言列表
Impression (1)
