English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Let's show you the effect diagram first:
Image resource link:http://pan.baidu.com/s/1jHAdLNg Password:5uo1
HTML code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/base.css">
<style type="text/css>
</style>
</head>
<body>
<div class="header">
<div class="w">
<div class="top_left">
<div class="top_left_1">
<a href="#" class="top_left_1_a">Taobao</a>
<span class="top_left_1_span"></span>
</div>
<div class="top_left_2">
<a href="#" class="top_left_2_a">Messages</a>
<span class="top_left_2_span"></span>
</div>
<div class="top_left_3">
<a href="#" class="top_left_3_a">Mobile Taobao</a>
<a href="#"><img src="img/qqq.gif" alt="[#0#]"></a>
</div>
</div>
<div class="top_right">
<div class="top_right_1">
<a href="#" class="top_right_1_a">My Taobao</a>
<span class="top_right_1_span"></span>
</div>
<div class="top_right_2">
<a href="#" class="top_right_2_a">Shopping Cart</a>
<span class="top_right_2_span"></span>
</div>
<div class="top_right_3">
<a href="#" class="top_right_3_a">Favorites</a>
<span class="top_right_3_span"></span>
</div>
<div class="top_right_4">
<a href="#" class="top_right_4_a">Product Categories</a>
<span class="top_right_4_span">|</span>
</div>
<div class="top_right_5">
<a href="#" class="top_right_5_a">Seller Center</a>
<span class="top_right_5_span"></span>
</div>
<div class="top_right_6">
<a href="#" class="top_right_6_a">Customer Service</a>
<span class="top_right_6_span"></span>
</div>
<div class="top_right_7">
<a href="#" class="top_right_7_a">Website Navigation</a>
<span class="top_right_7_span"></span>
</div>
</div>
</div>
</div>
<div class="head_main">
<div class="w">
<div class="head_main_img">
<a href="#"><img src="img/logo.gif" alt="[#1#]"></a>
</div>
<div class="head_main_search">
<div class="head_main_search_box">
<div class="head_main_search_box_left">
<a href="#" class="top_left_1_a">Baby</a>
<span class="top_left_1_span"></span>
</div>
<input type="search" class="head_main_search_box_input">
<input type="button" class="head_main_search_box_button" value="Search">
</div>
<div class="head_main_search_a">
<a href="#" class="head_main_search_a">Advanced Search</a>
</div>
<div class="head_main_search_down">
<a href="#">Women's Sandals</a>
<a href="#">Men's T-shirt</a>
<a href="#">Dress</a>
<a href="#">Fashion Women's Bag</a>
<a href="#">Women's T-shirt</a>
<a href="#">Chiffon Top</a>
<a href="#">Senior Women's Clothing</a>
<a href="#">Duster</a>
<a href="#">Children's Clothing</a>
<a href="#">Pregnant Women's Clothing</a>
<a href="#">Sports Suit</a>
<a href="#">Tights</a>
<a href="#">Mosquito Net</a>
<a href="#" class="head_main_search_down_a">More</a>
</div>
</div>
<div class="head_main_right">
<a href="#">Mobile Taobao</a>
<img src="img/code.png" alt="">
</div>
</div>
</div>
<div class="center_top">
<div class="w">
<div class="center_top_left">
<h5>Categories of Goods and Services</h5>
<div class="center_top_left_ul">
<ul>
<li class="center_top_left_li_1">
<h3>Clothing and Underwear</h3>
</li>
<li class="center_top_left_li_2">
<h3>Footwear and Accessories</h3>
</li>
<li class="center_top_left_li_3">
<h3>Sports and Outdoors</h3>
</li>
<li class="center_top_left_li_4">
<h3>Jewelry and Watches</h3>
</li>
<li class="center_top_left_li_5">
<h3>Mobile Phones and Digital Products</h3>
</li>
<li class="center_top_left_li_6">
<h3>Home Appliances and Office Supplies</h3>
</li>
<li class="center_top_left_li_7">
<h3>Skin Care and Cosmetics</h3>
</li>
<li class="center_top_left_li_8">
<h3>Maternity and Baby Products</h3>
</li>
<li class="center_top_left_li_9">
<h3>Home Textiles and Home Life</h3>
</li>
<li class="center_top_left_li_10">
<h3>Furniture and Building Materials</h3>
</li>
<li class="center_top_left_li_11">
<h3>Food and Specialties</h3>
</li>
<li class="center_top_left_li_12">
<h3>Daily Necessities</h3>
</li>
<li class="center_top_left_li_13">
<h3>Automobiles and Motorcycles</h3>
</li>
<li class="center_top_left_li_14">
<h3>Cultural Entertainment</h3>
</li>
<li class="center_top_left_li_15">
<h3>Local Life</h3>
</li>
<li class="center_top_left_li_16">
<h3>Virtual Services</h3>
</li>
</ul>
</div>
</div>
<div class="center_top_right">
<div class="center_top_right_head">
<a href="#" class="center_top_right_head_a">Tmall</a>
<a href="#" class="center_top_right_head_a">Group buy</a>
<a href="#" class="center_top_right_head_a">Second-hand</a>
<span>|</span>
<a href="#">Auction</a>
<a href="#">Yihaotao</a>
<a href="#">Electrical city</a>
<a href="#">Hitao's makeup</a>
<a href="#">Travel</a>
<a href="#">Cloud phone</a>
<a href="#">Featured China</a>
<img src="img/ad.gif" alt="">
<span class="center_top_right_head_s"><a href="#">Consumer protection</a></span>
</div>
<div class="center_top_right_left">
<div class="center_top_right_left_lunbo1">
<!--<ul>-->
<!--<li><a href="#"><img src="" alt=""></a></li>-->
<!--<li><a href="#"><img src="" alt=""></a></li>-->
<!--<li><a href="#"><img src="" alt=""></a></li>-->
<!--<li><a href="#"><img src="" alt=""></a></li>-->
<!--<li><a href="#"><img src="" alt=""></a></li>-->
<!--<li><a href="#"><img src="" alt=""></a></li>-->
<!--</ul>-->
<a href="#"><img src="img/1.jpg" alt=""></a>
<!--This one is the carousel, it should be written as-->
<div class="center_top_right_left_lunbo1_btn1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<a href="#"><img src="img/6.6.jpg" alt=""></a>
<div class="center_top_right_left_lunbo2">
<ul>
<li>
<a href="#"><img src="img/01.png" alt=""></a>
<a href="#"><img src="img/02.jpg" alt=""></a>
<a href="#"><img src="img/03.png" alt=""></a>
<a href="#"><img src="img/04.png" alt=""></a>
</li>
<!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a-->
<!--href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
<!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a-->
<!--href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
<!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a-->
<!--href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
<!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img-->
<!--src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
<!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img-->
<!--src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
</ul>
<div class="center_top_right_left_lunbo2_btn2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<a href="#"><img src="img/15.jpg" alt=""></a>
</div>
<div class="center_top_right_right">
<div class="center_top_right_right_top">
<ul>
<li class="li_"1">Announcement</li>
<li>Rules</li>
<li>Forum</li>
<li>Security</li>
<li>Public welfare</li>
</ul>
<div class="center_top_right_right_top_a">
<a href="#">Taobao2014: Open diversity</a>
<a href="#">Taste of China Season 2, Tmall first try</a>
<a href="#">Alibaba Communications self-built billing system</a>
<a href="#">The first419The universe festival</a>
</div>
</div>
<div class="center_top_right_right_center">
<div class="center_top_right_right_center_box">
<img src="img/user-head.jpg" alt="" width="62px" height="62px">
<div class="center_top_right_right_center_box_right">
<h3>Hi the Wolf2011</h3>
<a href="#" class="a_1">
<span class="s1></span>
<span class="s2">Zero Taobao Gold Points Offset Money</span>
</a>
<a href="#" class="a_2">Member Club</a>
</div>
</div>
<div class="center_top_right_right_center_down">
<a href="#" class="a1">Login</a>
<a href="#">Free Registration</a>
<a href="#">Free Store Opening</a>
</div>
</div>
<div class="center_top_right_right_down">
<h3>Convenience Services</h3>
<div>
<a href="#">
<h5><img src="img/phone.png" alt=""></h5>
<h6>Phone bill</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/game.png" alt=""></h5>
<h6>Games</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/plane.png" alt=""></h5>
<h6>Travel</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/save.png" alt=""></h5>
<h6>Insurance</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/18.png" alt=""></h5>
<h6>Lottery</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/move.png" alt=""></h5>
<h6>Movies</h6>
</a>
</div> <div>
<a href="#">
<h5><img src="img/eat.png" alt=""></h5>
<h6>Order takeout</h6>
</a>
</div> <div>
<a href="#">
<h5><img src="img/money.png" alt=""></h5>
<h6>Finance</h6>
</a>
</div> <div>
<a href="#">
<h5><img src="img/book.png" alt=""></h5>
<h6>E-books</h6>
</a>
</div> <div>
<a href="#">
<h5><img src="img/miusc.png" alt=""></h5>
<h6>Music</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/bag.png" alt=""></h5>
<h6>Water, electricity, gas</h6>
</a>
</div>
<div>
<a href="#">
<h5><img src="img/....png" alt=""></h5>
<h6>Please wait</h6>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="center_top2">
<div class="w">
<div class="center_top2_left center_top2_left1">
<h3>Theme Market</h3>
<ul>
<li><a href="#">Beautiful Women</a></li>
<li><a href="#">Quality Men</a></li>
<li><a href="#">Taobao Second-hand</a></li>
<li><a href="#">Global Shopping</a></li>
<li><a href="#">Brand Street</a></li>
<li><a href="#">Automotive Life</a></li>
<li><a href="#">Bridal</a></li>
<li><a href="#">Maternity and Child</a></li>
</ul>
</div>
<div class="center_top2_left center_top2_left2">
<h3 class="h3_2">Special Shopping</h3>
<ul>
<li><a href="#">Beautiful Women</a></li>
<li><a href="#">Quality Men</a></li>
<li><a href="#">Taobao Second-hand</a></li>
<li><a href="#">Global Shopping</a></li>
<li><a href="#">Brand Street</a></li>
<li><a href="#">Automotive Life</a></li>
<li><a href="#">Bridal</a></li>
<li><a href="#">Maternity and Child</a></li>
</ul>
</div>
<div class="center_top2_left center_top2_left3">
<h3 class="h3_3">Current Hot</h3>
<ul>
<li><a href="#">Beautiful Women</a></li>
<li><a href="#">Quality Men</a></li>
<li><a href="#">Taobao Second-hand</a></li>
<li><a href="#">Global Shopping</a></li>
<li><a href="#">Brand Street</a></li>
<li><a href="#">Automotive Life</a></li>
<li><a href="#">Bridal</a></li>
<li><a href="#">Maternity and Child</a></li>
</ul>
</div>
<div class="center_top2_left center_top2_left4">
<h3 class="h3_4">More Exciting</h3>
<ul>
<li><a href="#">Beautiful Women</a></li>
<li><a href="#">Quality Men</a></li>
<li><a href="#">Taobao Second-hand</a></li>
<li><a href="#">Global Shopping</a></li>
<li><a href="#">Brand Street</a></li>
<li><a href="#">Automotive Life</a></li>
<li><a href="#">Bridal</a></li>
<!--<li><a href="#">Maternity and Child</a></li>-->
<input type="button" class="center_top2_btn" value="More" >
</ul>
</div>
</div>
</div>
<div class="main">
<div class="w">
<div class="main_left">
<div class="main_left_top">
<h1>The万能's Taobao</h1>
<span>There are30 characteristic markets waiting for you to explore!</span>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="main_left_box">
<div class="main_left_center">
<div>
<span class="s1">|</span>
<span class="s2">Women Love Matching</span>
</div>
<div class="main_left_center_left">
<img src="img/show1.png" alt="">
<h1>
<a href="#">One Year of Snow Velvet Workshop</a>
</h1>
<span>Elegant Tenderness</span>
</div>
<div class="main_left_center_right">
<div class="main_left_center_right_top">
<a href="#">
<img src="img/shooes.jpg" alt="">
<p>Spring and Summer Leather Shoes</p>
</a>
<a href="#">
<img src="img/c.gif" alt="">
<p>Spring Bright Color Matching</p>
</a>
<table>
<tr>
<td><a href="#">Trendy Women's Clothing</a></td>
<td><a href="#">Short Height Fashion</a></td>
</tr>
<tr>
<td><a href="#">Plus Size Slimming</a></td>
<td><a href="#">Vintage Multi-Purpose Bag</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="main_right">
<div class="main_right_top">
<div class="main_right_top_up">
<h1>
<a href="#">
New Arrivals from Stores I've Collected
</a>
<span>Update
<span>3</span></span>
</h1>
<div class="main_right_top_up_box">
<a href="#">
<img src="img/inner1.png" alt="">
<p>￥118.00</p>
</a>
<a href="#">
<img src="img/inner2.png" alt="">
<p>￥118.00</p>
</a>
<a href="#">
<img src="img/inner3.png" alt="">
<p>￥118.00</p>
</a>
<h3><a href="#">More Store New Arrivals</a></h3>
</div>
</div>
<div class="main_right_top_up">
<h1>
<a href="#">
Store Recommendations You Might Like
</a>
<span>Update
<span>3</span></span>
</h1>
<div class="main_right_top_up_box">
<a href="#">
<img src="img/inner1.png" alt="">
<p>￥118.00</p>
</a>
<a href="#">
<img src="img/inner2.png" alt="">
<p>￥118.00</p>
</a>
<a href="#">
<img src="img/inner3.png" alt="">
<p>￥118.00</p>
</a>
<h3><a href="#">More Store New Arrivals</a></h3>
</div>
</div>
<div class="main_right_top_up">
<h1>
<a href="#">
My Footprints
</a>
<span>Update
<span>3</span></span>
</h1>
<div class="main_right_top_up_box">
<a href="#">
<img src="img/inner1.png" alt="">
<p>￥118.00</p>
</a>
<a href="#">
<img src="img/inner2.png" alt="">
<p>￥118.00</p>
</a>
<a href="#">
<img src="img/inner3.png" alt="">
<p>￥118.00</p>
</a>
<h3><a href="#">More Store New Arrivals</a></h3>
</div>
</div>
<h2 class="weitao">
WeiTao Dynamics
<a href="#">Go to the Square</a>
</h2>
<div class="main_right_top_center">
<h3>
Tmall Beauty
<span>04-19 10:00</span>
</h3>
<p>【Cosmetics Class】"YU" Meets You in a Moving Romance, Xiao Xi and Fourth Young Master Continue
<a href="#">View Full Article</a>
</p>
<a href="#" class="a1">
<img src="img/dynamic1.jpg" alt=""width="8"height="80">
</a>
<a href="#" >
<img src="img/dynamic2.jpg" alt="" width="8"height="80">
</a>
<a href="#" >
<img src="img/dynamic3.jpg" alt="" width="8"height="80">
</a>
<h6>评论(26)</h6>
<h4> <a href="#" class="a2>更多动态 </a></h4>
</div>
<div class="main_right_top_center">
<h3>
Tmall Beauty
<span>04-19 10:00</span>
</h3>
<p>【Cosmetics Class】"YU" Meets You in a Moving Romance, Xiao Xi and Fourth Young Master Continue
<a href="#">View Full Article</a>
</p>
<a href="#" class="a1">
<img src="img/dynamic1.jpg" alt=""width="8"height="80">
</a>
<a href="#" >
<img src="img/dynamic2.jpg" alt="" width="8"height="80">
</a>
<a href="#" >
<img src="img/dynamic3.jpg" alt="" width="8"height="80">
</a>
<h6>评论(26)</h6>
<h4> <a href="#" class="a2>更多动态 </a></h4>
</div>
</div>
<div class="main_center">
<div class="main_center_up">
<h1>逛逛<-精选</h1>
<div class="main_center_up_up">
<div class="main_center_up_up_lunbo1img">
<a href="#"><img src="img/sub1.jpg" alt=""></a>
</div> .
<div class="main_center_up_up_lunbo1btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="main_center_up_up_right">
<img src="img/hand.jpg" alt="">
<img src="img/aaaaa.jpg" alt="">
</div>
</div>
<div class="main_center_up_p">
<p>
<span class="box">
<span class="red">[雪纺]</span>
<a href="#">无袖雪纺背心巧减龄</a>
</span>
<span class="box">
<span>[配饰]</span>
<a href="#">萌！美妙星空配饰</a>
</span>
<span class="box">
<span>[家装]</span>
<a href="#">29平小户竟啥都有！</a>
</span>
<span class="box">
<span class="red">[包包]</span>
<a href="#">浪漫蕾丝包 淑女范</a>
</span>
</p>
</div>
<div class="main_center_up_center">
<a href="#" class="ma">
<img src="img/female.png" alt="">
<h5>超美公主装搭配</h5>
</a>
<a href="#" class="ma">
<img src="img/home.jpg" alt="">
<h5>小户型这样装</h5>
</a>
<a href="#" class="ma">
<img src="img/shoes.jpg" alt="">
<h5>闪耀水晶凉鞋</h5>
</a>
</div>
<div class="main_center_up_p">
<p>
<span class="box">
<span >[雪纺]</span>
<a href="#">无袖雪纺背心巧减龄</a>
</span>
<span class="box">
<span class="red">[配饰]</span>
<a href="#">萌！美妙星空配饰</a>
</span>
<span class="box">
<span class="red">[家装]</span>
<a href="#">29平小户竟啥都有！</a>
</span>
<span class="box">
<span >[包包]</span>
<a href="#">浪漫蕾丝包 淑女范</a>
</span>
</p>
</div>
<div class="main_center_up_center">
<a href="#" class="ma">
<img src="img/female.png" alt="">
<h5>超美公主装搭配</h5>
</a>
<a href="#" class="ma">
<img src="img/home.jpg" alt="">
<h5>小户型这样装</h5>
</a>
<a href="#" class="ma">
<img src="img/shoes.jpg" alt="">
<h5>闪耀水晶凉鞋</h5>
</a>
</div>
<ul class="main_center_up_ul">
<li><em>1</em><a href="#">85后小夫妻！3室2厅温馨窝</a><span>jjwwlove99</span></li>
<li><em>2</em><a href="#">糖果色豆豆鞋 甜美减龄</a><span>qh100330</span></li>
<li><em>3</em><a href="#">小美妞可爱装扮 吸睛百分百</a><span>琉光易彩</span></li>
<li><em class="e1">4</em><a href="#">Slim Fit Casual Pants - Leg Slimming Tool</a><span>vnc9999</span></li>
</ul>
</div>
<div class="main_center_down">
<img src="img/last1.png" alt="">
<img src="img/last2.jpg" alt="">
</div>
</div>
</div>
<div class="main_down">
<div class="main_down_top">
<h1>Best Selling Items</h1>
<div class="main_down_top_right">
<a href="#">s5Skin Case</a>|
<a href="#">Bose</a>|
<a href="#">Spring and Autumn</a>|
<a href="#">Customized</a>|
<a href="#">High-Waisted Pants</a>|
<a href="#">Base Dress</a>|
<a href="#">Bra</a>|
<a href="#">Spring Outfit</a>|
<a href="#">Men's Shoes</a>|
<a href="#">iPhone</a>|
<a href="#">Wedding Dress</a>|
<a href="#">Men's Denim</a>|
<a href="#">Women's T-Shirt</a>|
<a href="#">Knitted Sweater</a>|
<a href="#">Living Room Lamp</a>|
<a href="#">Chocolate</a>|
<a href="#">More</a>
</div>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
<div class="main_down_goods">
<a href="#">
<img src="img/sing1.jpg" alt="">
<h3> Wrinkle-Free Stand Collar Chiffon Top</h3>
</a>
<p class="p1">
<span class="red">￥/span>
<span class="red">129.00</span>
<span class="green">Free Shipping</span>
</p>
<p class="p2">
<span>￥/span>
<span><del>399.00</del></span>
|
<span>Sales in the Month<29Piece</span>
</p>
</div>
</div>
<div class="main_ad">
<img src="img/ad.jpg" alt="" width="1200" height="90">
</div>
<div class="main_help">
<div class="main_help_info">
<h1>
<img src="img/help4.png" alt="">
<span>Consumer Protection</span>
</h1>
<a href="#">Scope of Protection</a>
<a href="#">Return and Refund Process</a>
<a href="#">Customer Service Center</a>
<a href="#">More Special Services</a>
</div>
<div class="main_help_info">
<h1>
<img src="img/help1.png" alt="">
<span>Newcomer's Guide</span>
</h1>
<a href="#" class="a2">Newcomer Zone</a>
<a href="#" class="a2">Consumer Warning</a>
<a href="#" class="a2">Transaction Security</a>
<a href="#">24Hourly Online Assistance</a>
</div>
<div class="main_help_info">
<h1>
<img src="img/help2.png" alt="">
<span>Payment Method</span>
</h1>
<a href="#" class="a3">Alipay Quick Payment</a>
<a href="#" class="a3">Alipay Card (Cash) Payment</a>
<a href="#" class="a3">Alipay Balance Payment</a>
<a href="#" class="a3">Cash on Delivery</a>
</div>
<div class="main_help_info">
<h1>
<img src="img/help3.png" alt="">
<span>Taobao Features</span>
</h1>
<a href="#">Taobao Index</a>
<a href="#">Taobao Character</a>
<a href="#">Mobile Taobao</a>
<a href="#">Wangxin</a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="w">
<div class="footer_left">
<div class="footer_left_1">
<a href="#">Alibaba Group</a>|
<a href="#">Alibaba Global Site</a>|
<a href="#">Alibaba China Site</a>|
<a href="#">Alibaba.com</a>|
<a href="#">Taobao</a>|
<a href="#">Tmall</a>|
<a href="#">Juhuasuan</a>|
<a href="#">Yihaotao</a>|
<a href="#">Alibaba Mama</a>|
<a href="#">Alibaba Cloud Computing</a>|
<a href="#">YunOS</a>|
<a href="#">NetEase</a>|
<a href="#">Alipay</a>|
<a href="#">Laiwang</a>
</div>
<div class="footer_left_2">
<a href="#">About Taobao</a>|
<a href="#">Partners</a>|
<a href="#">Marketing Center</a>|
<a href="#">Whistleblower</a>|
<a href="#">Customer Service</a>|
<a href="#">Open Platform</a>|
<a href="#">Recruit Talent</a>|
<a href="#">Contact Us</a>|
<a href="#">Sitemap</a>|
<a href="#">Legal Statement</a>|
<span>© 2014 Taobao.com All Rights Reserved</span>
</div>
<p class="footer_left_3">
<span>Culture Network Operation License: Wenwangwen[2010]040号</span>|
<span增值电信业务经营许可证：Zhejiang B2-20080224-1</span>|
<span>Information Network Audio-Visual Program Broadcasting License:1109364号</span>
</p>
<div class="footer_left_4">
<img src="img/some.png" alt="">
</div>
</div>
<div class="footer_right">
<img src="img/tao-man.png" alt="">
</div>
</div>
</div>
</div>
<!--<div class="kong">-->
<!--</div>-->
</body>
</html>
css code as follows
[html] view plain copy
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
.kong{
width: 100%;
height: 2000px;
}
a{color:#6C6C6C;; text-decoration:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","Songti";}
select, input { vertical-align:middle; }/*The text inside is centered*/
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*Prevent dragging*/
a:hover{color:red;}
img {border:0; vertical-align:middle; } /* Remove the default bottom image3Pixel gap*/
/*The header navigation starts*/
.header{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
/*position: relative;*/
width: 100%;
height: 35px;
background-color: #F5F5F5;
font-size: 12px;
color:#6C6C6C;
line-height: 35px;
}
/*Content area*/
.w{
width: 1200px;
margin: 0 auto;
}
/*The left side of the header starts*/
.top_left {
width: 30%;
height: 35px;
float: left;
}
.top_left_1,.top_left_2,.top_left_3{
width: 48px;
height: 35px;
float: left;
margin-right: 5px;
}
.top_left_3{
width: 205px;
}
.top_left_1:hover,.top_left_2:hover{
background: #FFFFFF;
}
.top_left_1_a,.top_left_2_a,.top_left_3_a{
margin-left: 5px;
color:#6C6C6C;
text-decoration: none;
float: left;
}
.top_left_1_a:hover,.top_left_2_a:hover,.top_left_3_a:hover{
color: red;
}
.top_left_1_span,.top_left_2_span{
display: block;
width: 15px;
height: 35px;
background: url("../img/arrow.png")no-repeat center center;
float: left;
}
/*The left side of the header ends*/
/*The right side of the header starts*/
.top_right{
position: relative;
width: 44%;
height: 35px;
float: right;
}
.top_right_1,.top_right_2,.top_right_3,.top_right_4,.top_right_5,.top_right_6{
width: 75px;
height: 35px;
float: left;
margin-right: 5px;
}
.top_right_2,.top_right_3{
width: 60px;
}
.top_right_4{
width: 85px;
margin-right: 0;
}
.top_right_1:hover,.top_right_2:hover,.top_right_3:hover,.top_right_5:hover,.top_right_6:hover{
background: #FFFFFF;
}
.top_right_1_a,.top_right_2_a,.top_right_3_a,.top_right_4_a,.top_right_5_a,.top_right_6_a,.top_right_7_a{
margin-left: 5px;
color:#6C6C6C;
text-decoration: none;
float: left;
}
.top_right_1_a:hover,.top_right_2_a:hover,.top_right_3_a:hover,.top_right_4_a:hover,.top_right_5_a:hover,.top_right_6_a:hover,.top_right_7_a:hover{
color: red;
}
.top_right_1_span,.top_right_2_span,.top_right_3_span,.top_right_4_span,.top_right_5_span,.top_right_6_span,.top_right_7_span{
display: block;
width: 15px;
height: 35px;
background: url("../img/arrow.png")no-repeat center center;
float: left;
}
.top_right_4_span{
background: none;
margin-left: 17px;
}
/*The right side of the header ends*/
/*The header navigation ends*/
/*The main section starts*/
.head_main{
width: 100%;
height: 115px;
margin-top: 45px;
/*background: red;*/
}
/*The main left section starts*/
.head_main_img{
float: left;
width: 250px;
height: 100px;
}
/*The main left header ends*/
/*The main header search begins*/
.head_main_search{
margin-top: 20px;
float: left;
width: 730px;
height: 86px;
/*background: peru;*/
}
/*The main header search above begins*/
.head_main_search_box{
position: relative;
float: left;
margin-top: 10px;
width: 664px;
height: 40px;
margin-right: 10px;
border: 3px solid #f50;
}
.head_main_search_box_left{
width: 72px;
height: 40px;
line-height: 40px;
background: #f6f6f6;
cursor: pointer;
border-left: 1px solid #ffffff;
border-right:1px solid #e5e5e5 ;
font-size: 12px;
float: left;
}
.head_main_search_box_left a{
margin-left: 20px;
color: black;
}
.head_main_search_box_input{
float: left;
width: 495px;
height: 38px;
padding-left: 10px;
border: none;
outline: none;
background: url(../img/search.png) no-repeat 98% center,
url(../img/s.png) no-repeat 2% center;
}
/*The main header search above ends*/
/*The main header search below begins*/
.head_main_search_box_button{
float: left;
width: 95px;
height: 40px;
border: none;
outline: none;
font-size: 20px;
letter-spacing: 5px;/*Allow characters to have5spacing of px*/
background: #f50;
cursor: pointer;
color: #fff;
}
.head_main_search_a{
width: 27px;
height: 40px;
font-size: 13px;
color:#6C6C6C;
text-decoration: none;
float: left;
}
.head_main_search_a a{
margin-top: 14px;
}
.head_main_search_down{
clear: both;
width: 100%;
height: 30px;
line-height: 30px;
}
.head_main_search_down a{
font-size: 13px;
color:#6C6C6C;
text-decoration: none;
margin-right: 2px;
}
.head_main_search_down a:hover{
color: white;
background-color: red;
}
.head_main_search_down_a{
margin-left: 3px;
border: 1px solid #ccc;
padding: 2px 5px;
}
.head_main_search_down_a:hover{
color: red;
/*background: red;*/
}
/*The main header search below ends*/
/*The main header search to the right begins*/
.head_main_right{
width: 94px;
height: 112px;
float: right;
position: relative;
text-align: center;
border: 1px solid #eee;
}
.head_main_right a{
font-size: 13px;
color: red;
text-decoration: none;
margin-right: 6px;
}
.head_main_right img{
margin-top: 6px;
}
/*The main header search to the right ends*/
/*The main header ends*/
/*center_top begins*/
/*center_top_left begins*/
.center_top{
width: 100%;
height: 582px;
clear: both;
}
.center_top_left{
width: 150px;
height: 582px;
float: left;
/*background-color: yellowgreen;*/
}
.center_top_left h5{
width: 100%;
height: 41px;
line-height: 41px;
text-align: center;
font-size: 14px;
background-color: #f40;
color: #fff;
}
.center_top_left_ul{
position: relative;
width: 148px;
height: 540px;
border:1px solid #bbb;
border-top: none;
}
.center_top_left_ul ul{
position: relative;
list-style: none;
}
.center_top_left_ul li{
width: 146px;
height: 31px;
line-height: 32px;
text-align: center;
border:1px solid #fff;
cursor: pointer;
}
.center_top_left_ul li h3{
margin: 0 auto;
width: 93%;
height: 100%;
border-bottom: 1px solid #DEDEDE;
color: #707070;
font-size: 14px;
}
.center_top_left_li_1{
background: url("../img/001.png") no-repeat 10px center;
}
.center_top_left_li_2{
background: url("../img/002.png") no-repeat 10px center;
}.center_top_left_li_3{
background: url("../img/003.png") no-repeat 10px center;
}.center_top_left_li_4{
background: url("../img/004.png") no-repeat 10px center;
}.center_top_left_li_5{
background: url("../img/005.png") no-repeat 10px center;
}.center_top_left_li_6{
background: url("../img/006.png") no-repeat 10px center;
}.center_top_left_li_7{
background: url("../img/007.png") no-repeat 10px center;
}.center_top_left_li_8{
background: url("../img/008.png") no-repeat 10px center;
}.center_top_left_li_9{
background: url("../img/009.png") no-repeat 10px center;
}.center_top_left_li_10{
background: url("../img/010.png") no-repeat 10px center;
}.center_top_left_li_11{
background: url("../img/011.png") no-repeat 10px center;
}.center_top_left_li_12{
background: url("../img/012.png") no-repeat 10px center;
}.center_top_left_li_13{
background: url("../img/013.png") no-repeat 10px center;
}.center_top_left_li_14{
background: url("../img/014.png") no-repeat 10px center;
}.center_top_left_li_15{
background: url("../img/015.png") no-repeat 10px center;
}.center_top_left_li_16{
background: url("../img/016.png") no-repeat 10px center;
}
.center_top_left_ul li:hover{
border: 1px solid red;
}
/*center_top_left ends*/
/*center_top_right begins*/
/*center_top_right_head begins*/
.center_top_right{
width: 1031px;
height: 582px;
float: right;
}
.center_top_right_head{
width: 100%;
height: 41px;
line-height: 38px;
font-weight: 900;
font-size: 14px;
border-bottom: 2px solid #f40;
}
.center_top_right_head a{
color: black;
font-size: 15px;
margin-left: 16px;
padding: 4px;
}
.center_top_right_head a:hover
{
background-color: #EBEBEB;
color: red;
}
.center_top_right .center_top_right_head_a{
font-size: 16px;
color: red;
}
.center_top_right_head span{
margin-left: 29px;
color: #bbbbbb;
}
.center_top_right_head img{
cursor: pointer;
margin-left: 40px;
}
.center_top_right_head .center_top_right_head_s{
margin-left: 5px;
}
.center_top_right_head_s a{
color: black;
font-weight: 600;
font-size: 12px;
margin: 0;
}
/*center_top_right_head ends*/
/*center_top_right_left begins*/
.center_top_right_left{
position: relative;
float: left;
margin-top: 10px;
width: 720px;
height: 500px;
/*background-color: red;*/
}
.center_top_right_left_lunbo1{
position: relative;
float: left;
width: 520px;
height: 280px;
overflow: hidden;
}
.center_top_right_left_lunbo1_btn1{
position: absolute;
left:50%;
top:250px;
margin-left: -35px;
width: 70px;
height: 11px;
/*background-color: #bbbbbb;*/
}
.center_top_right_left_lunbo1_btn1 span{
display: inline-block;
float: left;
width: 9px;
height: 9px;
margin-right: 4px;
border-radius: 9px;
cursor: pointer;
background-color: #cccccc;
}
.center_top_right_left_lunbo1_btn1 span:hover{
background-color: #6C6C6C;
}
.center_top_right_left_lunbo2{
position: relative;
float:left;
width: 520px;
height: 220px;
overflow: hidden;
}
.center_top_right_left_lunbo2 img{
margin-left: -3px;
}
.center_top_right_left_lunbo2_btn2{
position: absolute;
left:50%;
top:192px;
margin-left: -35px;
width: 70px;
height: 11px;
}
.center_top_right_left_lunbo2_btn2 span{
display: inline-block;
float: left;
width: 9px;
height: 9px;
margin-right: 4px;
border-radius: 9px;
cursor: pointer;
background-color: #cccccc;
}
.center_top_right_left_lunbo2_btn2 span:hover{
background-color: #6C6C6C;
}
/*center_top_right_left ends*/
/*center_top_right_right begins*/
.center_top_right_right{
position: relative;
margin-top: 10px;
float: right;
width: 300px;
height: 531px;
overflow: hidden;
/*background-color: red;*/
}
.center_top_right_right_top{
width: 298px;
height: 98px;
border-bottom: 1px solid #eee;
}
.center_top_right_right_top ul{
margin-left: -1px;
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, this site will immediately delete the suspected infringing content.)