![]()
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, textarea, hr, img, label, span, select, strong, b {
margin: 0px;
padding: 0px;
}
a {
color: #333;
text-decoration: none;
outline: none;
}
a, img {
border: none;
outline: none;
}
a, button {
text-decoration: none;
}
a, img, button {
border: none;
text-decoration: none;
}
body{
font-family: "宋體,Arial, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif";
font-size: 12px;
font-weight: normal;
color: #000;
width: 100%;
background-color: #fff;
}
.product-sotr{
margin: 20px;
width: 226px;
height: 644px;
background-color: #fff;
background:url(img/img_226x95.jpg) no-repeat left bottom ;
border: 1px solid #3299fd;
position: relative;
z-index: 90;
}
.product-sotr .hd{
width: 226px;
background: url(img/img_226x40.jpg) no-repeat;
height: 40px;
line-height: 40px;
text-indent: 15px;
font-size: 15px;
font-weight: bold;
font-family: "微軟雅黑";
color: #fff;
}
.product-sotr .bd{
padding-bottom: 10px;
}
.product-sotr .bd .item{
border-bottom: 1px solid #3299FD;
height: 60px;
position: relative;
}
.product-sotr .bd .item .title{
width: 226px;
text-indent: 43px;
height: 30px;
overflow: hidden;
line-height: 30px;
font-size: 14px;
font-weight: bold;
color: #292929;
}
.product-sotr .bd .item .title a{
color: #3299fd;
position: relative;
}
.product-sotr .bd .item .list{
width: 210px;
padding-left: 15px;
height: 30px;
line-height: 30px;
overflow: hidden;
}
.product-sotr .bd .item .one a i {
width: 19px;
height: 19px;
background-position: 0 0;
left: -25px;
}
.product-sotr .bd .title a i{
top: 0px;
position: absolute;
background: url(img/icon_nav.jpg) no-repeat;
}
.product-sotr .bd .item .arrow{
font-family: "微軟雅黑";
font-size: 20px;
color: #c0d7f9;
position: absolute;
right: 10px;
top: 14px;
}
.product-sotr .bd .item .two a i {
width: 22px;
height: 20px;
background-position: 0 -51px;
left: -28px;
}
.product-sotr .bd .item .three a i {
width: 22px;
height: 20px;
background-position: 0 -102px;
left: -28px;
}
.product-sotr .bd .item .four a i {
width: 22px;
height: 20px;
background-position: 0 -153px;
left: -28px;
}
.product-sotr .bd .item .five a i {
width: 22px;
height: 20px;
background-position: 0 -204px;
left: -28px;
}
.product-sotr .bd .item .six a i {
width: 22px;
height: 20px;
background-position: 0 -255px;
left: -28px;
}
.product-sotr .bd .item .seven a i {
width: 22px;
height: 20px;
background-position: 0 -306px;
left: -28px;
}
.product-sotr .bd .item .eight a i {
width: 22px;
height: 20px;
background-position: 0 -357px;
left: -28px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="product-sotr fl">
<div class="hd">旅遊產品導航</div>
<div class="bd">
<div class='item'>
<div class="title one">
<a href="#"><i></i>出境遊</a>
</div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title two"><a href="#"><i></i>國內遊</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title three"><a href="#"><i></i>周邊遊</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title four"><a href="#"><i></i>郵輪</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title five"><a href="#"><i></i>東南亞</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title six"><a href="#"><i></i>日本，韓國，朝鮮</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title seven"><a href="#"><i></i>歐美</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
<div class="item">
<div class="title eight"><a href="#"><i></i>澳洲</a></div>
<div class="list">
<a href="#">泰國</a>
<a href="#">首爾</a>
<a href="#">曼谷</a>
<a href="#">大阪</a>
<a href="#">普吉島</a>
</div>
<div class="arrow">></div>
</div>
</div>
</div>
</div>
</body>
</html>
