这篇博客主要介绍了HTML和CSS的基础知识，包括HTML的基本结构和CSS的样式设置，适合初学者入门学习。
项目
《html》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="asa.css">
</head>
<body>
<header>
<div class="a">
<div class="sou fl">
<div class="s_city_b">
<span>送货至：四川</span>
</div>
</div>
<div class="fr top_right">
<div class="fl">
你好! 请<a href="#">登录</a>
<a href="#" style="color:#ff4e00;">免费注册</a> | <a href="#">我的订单</a> |
</div>
<ul class="ss">
<li class="ss_list">
<a href="#">收藏夹</a>
</li>
<li class="ss_list">
<a href="#">客户服务</a>
<div class="ss_list_bg">
<div class="ss_list_c">
<ul>
<li><a href="#">客户服务</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">客户服务</a></li>
</ul>
</div>
</div>
</li>
<li class="ss_list">
<a href="#">网站导航</a>
</li>
</ul>
<span class="fl"> | 关注我们：</span>
<span class="s_sh">
<a href="#" class="sh1">新浪</a>
<a href="#" class="sh2">微信</a>
</span>
<span class="fr"> |
<a href="#">手机版
<img src="asa/s_tel.png" align="absmiddle"/>
</a>
</span>
</div>
</div>
<div class="top">
<div class="logo">
<a href="#">
<img src="asa/logo.png" height="72" width="210"/>
</a>
</div>
<div class="search">
<form>
<input type="search" value="" placeholder="请输入关键字" class="s_ipt"/>
<input type="submit" value="搜索" class="s_btn"/>
</form>
<div class="fl">
<a href="#">咖啡</a>
<a href="#">iphone 6S</a>
<a href="#">新鲜美食</a>
<a href="#">蛋糕</a>
<a href="#">日用品</a>
<a href="#">连衣裙</a>
</div>
</div>
<div class="i_car">
<div class="car_t">购物车</div>
</div>
</div>
</header>
<section class="center clear">
<div class="clear">
<div class="menu_bg">
<div class="menu">
<nav class="nav">
<div class="nav_t">全部商品分类</div>
<div class="leftNav">
<ul>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav1.png"/></span>
<span class="fl">进口食品、生鲜</span>
</div>
<div class="zj">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav2.png"/></span>
<span class="fl">食品、饮料、酒</span>
</div>
<div class="zj" style="top:-40px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力2</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav3.png"/></span>
<span class="fl">母婴、玩具、童装</span>
</div>
<div class="zj" style="top:-80px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力3</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav4.png"/></span>
<span class="fl">家居、家庭清洁、纸品</span>
</div>
<div class="zj" style="top:-120px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力4</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav5.png"/></span>
<span class="fl">美妆、个人护理、洗护</span>
</div>
<div class="zj" style="top:-160px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力5</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav6.png"/></span>
<span class="fl">女装、内衣、中老年</span>
</div>
<div class="zj" style="top:-200px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力6</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav7.png"/></span>
<span class="fl">鞋靴、箱包、腕表配饰</span>
</div>
<div class="zj" style="top:-240px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力7</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav8.png"/></span>
<span class="fl">男装、运动</span>
</div>
<div class="zj" style="top:-280px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力8</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav9.png"/></span>
<span class="fl">手机、小家电、电脑</span>
</div>
<div class="zj" style="top:-320px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力9</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
<li>
<div class="fj">
<span class="n_img"><span></span><img src="asa/nav10.png"/></span>
<span class="fl">礼品、充值</span>
</div>
<div class="zj" style="top:-360px;">
<div class="zj_l">
<div class="zj_l_c">
<h2>零食 / 糖果 / 巧克力10</h2>
<a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a
href="#">巧克力</a>|
<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<a
href="#">红枣</a>|
<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|
</div>
</div>
<div class="zj_r">
<a href="#"><img src="asa/n_img1.jpg" width="236" height="200"/></a>
<a href="#"><img src="asa/n_img2.jpg" width="236" height="200"/></a>
</div>
</div>
</li>
</ul>
</div>
</nav>
<nav>
<ul class="menu_r">
<li class="active"><a href="">首页</a></li>
<li class="active"><a href="">自营超市</a></li>
<li><a href="">1号团</a></li>
<li><a href="">1号超市</a></li>
<li><a href="">女装</a></li>
<li><a href="">美妆</a></li>
<li><a href="">1号海购</a></li>
<li><a href="">团购</a></li>
</ul>
</nav>
<a href="#" class="m_ad"><img src="asa/phone.png" alt=""/></a>
</div>
</div>
<div class="banner">
<div class="top_slide_wrap">
<ul class="slide_box ">
<li><img src="asa/ban1.jpg" height="594" width="1125"/></li>
</ul>
<ul class="num">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<div class="op_btns">
<a href="#" class="op_btn op_prev"></a>
<a href="#" class="op_btn op_next"></a>
</div>
</div>
</div>
<div class="inews">
<div class="news_t">
<h3 class="fl">快讯</h3>
<span class="fr"><a href="#">更多 ></a></span>
</div>
<ul>
<li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li>
<li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
<li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li>
<li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
<li><span>【公告】</span><a href="#">家电低至五折</a></li>
</ul>
<div class="charge_t">
<h3>1号钱包</h3>
<p>收益日结，收益赚High！</p>
<img src="asa/oneAD.jpg" alt=""/>
</div>
</div>
</div>
<div class="content clear ">
<div class="hot">
<div class="img">
<img src="asa/l_img.jpg" width="188" height="188"/>
</div>
<div class="pri_bg">
<span class="price fl">￥53.00</span>
<span class="fr">16R</span>
</div>
</div>
<div class="hot_pro">
<div id="feature">
<ul class="featureUL">
<li class="featureBox">
<div class="h_icon"><img src="asa/hot.png" width="50" height="50"/></div>
<div class="imgbg">
<a href="#"><img src="asa/hot1.jpg" width="160" height="136"/></a>
</div>
<div class="name">
<a href="#">
<h2>德国进口</h2>
德亚全脂纯牛奶200ml*48盒
</a>
</div>
<div class="price">
<strong>￥<span>189</span></strong> 26R
</div>
</li>
<li class="featureBox">
<div class="h_icon"><img src="asa/hot.png" width="50" height="50"/></div>
<div class="imgbg">
<a href="#"><img src="asa/hot2.jpg" width="160" height="136"/></a>
</div>
<div class="name">
<a href="#">
<h2>iphone 6S</h2>
Apple/苹果 iPhone 6s Plus公开版
</a>
</div>
<div class="price">
<strong>￥<span>5288</span></strong> 25R
</div>
</li>
<li class="featureBox">
<div class="h_icon"><img src="asa/hot.png" width="50" height="50"/></div>
<div class="imgbg">
<a href="#"><img src="asa/hot3.jpg" width="160" height="136"/></a>
</div>
<div class="name">
<a href="#">
<h2>倩碧特惠组合套装</h2>
倩碧补水组合套装8折促销
</a>
</div>
<div class="price">
<strong>￥<span>368</span></strong> 18R
</div>
</li>
<li class="featureBox">
<div class="h_icon"><img src="asa/hot.png" width="50" height="50"/></div>
<div class="imgbg">
<a href="#"><img src="asa/hot4.jpg" width="160" height="136"/></a>
</div>
<div class="name">
<a href="#">
<h2>品利特级橄榄油</h2>
750ml*4瓶装组合 西班牙原装进口
</a>
</div>
<div class="price">
<strong>￥<span>280</span></strong> 30R
</div>
</li>
</ul>
<a class="h_prev" href="#">Previous</a>
<a class="h_next" href="#">Next</a>
</div>
</div>
</div>
<div class="content">
<img src="asa/mban_2.jpg"/>
</div>
<section class="content clear">
<div class="floorTitle ">
<span class="floor_num">1F</span>
<span class="fl">进口 <b>·</b> 生鲜</span>
<div class="i_mores fr">
<a href="#">进口咖啡</a>
<a href="#">进口酒</a>
<a href="#">进口母婴</a>
<a href="#">新鲜蔬菜</a>
<a href="#">新鲜水果</a>
</div>
</div>
<div class="main">
<div class="fresh_left">
<div class="fre_ban">
<div id="imgPlay1">
<ul class="imgs" id="actor1">
<li><a href="#"><img src="asa/fre_r.jpg" width="211" height="286"/></a></li>
</ul>
<div class="prevf">上一张</div>
<div class="nextf">下一张</div>
</div>
</div>
<div class="fresh_txt">
<div class="fresh_txt_c">
<a href="#">进口水果</a><a href="#">奇异果</a><a href="#">西柚</a><a href="#">海鲜水产</a><a href="#">品质牛肉</a><a
href="#">奶粉</a><a href="#">鲜活禽蛋</a><a href="#">进口酒</a><a href="#">进口奶粉</a><a href="#">鲜活禽蛋</a>
</div>
</div>
</div>
<div class="fresh_mid">
<ul>
<li>
<div class="name"><a href="#">贝思客 草莓先生&蓝莓小姐</a></div>
<div class="price">
<span>￥98.00</span>
</div>
<div class="img"><a href="#"><img src="asa/fre_1.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">微笑果园SMILE 智利进口绿奇异果</a></div>
<div class="price">
<span>￥84.00</span>
</div>
<div class="img"><a href="#"><img src="asa/fre_2.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">新鲜美味 进口美食</a></div>
<div class="price">
<span>￥98.00</span>
</div>
<div class="img"><a href="#"><img src="asa/fre_3.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">新鲜美味 进口美食</a></div>
<div class="price">
<span>￥24.00</span>
</div>
<div class="img"><a href="#"><img src="asa/fre_4.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">新鲜美味 纯牛奶</a></div>
<div class="price">
<span>￥142.00</span>
</div>
<div class="img"><a href="#"><img src="asa/fre_5.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">莫斯利安</a></div>
<div class="price">
<span>￥62.00</span>
</div>
<div class="img"><a href="#"><img src="asa/fre_6.jpg" width="185" height="155"/></a></div>
</li>
</ul>
</div>
<div class="fresh_right">
<ul>
<li><a href="#"><img src="asa/fre_b1.jpg" width="260" height="220"/></a></li>
<li><a href="#"><img src="asa/fre_b2.jpg" width="260" height="220"/></a></li>
</ul>
</div>
</div>
</section>
<section class="content clear">
<div class="floorTitle ">
<span class="floor_num">2F</span>
<span class="fl">个人美妆</span>
<div class="i_mores fr">
<a href="#">洗发护发</a>
<a href="#">面膜</a>
<a href="#">洗面奶</a>
<a href="#">香水</a>
<a href="#">沐浴露</a>
</div>
</div>
<div class="main">
<div class="make_left">
<div class="make_ban">
<div id="imgPlay3">
<ul class="imgs" id="actor3">
<li><a href="#"><img src="asa/make_r.jpg" width="211" height="286"/></a></li>
</ul>
<div class="prev_m">上一张</div>
<div class="next_m">下一张</div>
</div>
</div>
<div class="fresh_txt">
<div class="fresh_txt_c">
<a href="#">洗发护发</a><a href="#">牙刷牙膏</a><a href="#">面膜</a><a href="#">补水面膜</a><a href="#">香水</a><a
href="#">面霜</a><a href="#">洗面奶</a><a href="#">脱毛膏</a><a href="#">沐浴露</a>
</div>
</div>
</div>
<div class="fresh_mid">
<ul>
<li>
<div class="name"><a href="#">美宝莲粉饼</a></div>
<div class="price">
<span>￥260.00</span>
</div>
<div class="img"><a href="#"><img src="asa/make_1.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">洗衣液</a></div>
<div class="price">
<span>￥60.00</span>
</div>
<div class="img"><a href="#"><img src="asa/make_2.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">洗发水</a></div>
<div class="price">
<span>￥160.00</span>
</div>
<div class="img"><a href="#"><img src="asa/make_3.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">男士洗发水</a></div>
<div class="price">
<span>￥120.00</span>
</div>
<div class="img"><a href="#"><img src="asa/make_4.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">美宝莲粉饼</a></div>
<div class="price">
<span>￥260.00</span>
</div>
<div class="img"><a href="#"><img src="asa/make_5.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">男士设计 洗面奶</a></div>
<div class="price">
<span>￥90.00</span>
</div>
<div class="img"><a href="#"><img src="asa/make_6.jpg" width="185" height="155"/></a></div>
</li>
</ul>
</div>
<div class="fresh_right">
<ul>
<li><a href="#"><img src="asa/make_b1.jpg" width="260" height="220"/></a></li>
<li><a href="#"><img src="asa/make_b2.jpg" width="260" height="220"/></a></li>
</ul>
</div>
</div>
</section>
<div class="content">
<img src="asa/mban_2.jpg" width="1200" height="110"/>
</div>
<section class="content">
<div class="floorTitle">
<span class="floor_num">3F</span>
<span class="fl">母婴玩具</span>
<div class="i_mores fr">
<a href="#">营养品</a>
<a href="#">孕妈背带裤</a>
<a href="#">儿童玩具</a>
<a href="#">婴儿床</a>
<a href="#">喂奶器</a>
</div>
</div>
<div class="main">
<div class="baby_left">
<div class="baby_ban">
<div id="imgPlay4">
<ul class="imgs" id="actor4">
<li><a href="#"><img src="asa/baby_r.jpg" width="211" height="286"/></a></li>
<li><a href="#"><img src="asa/baby_r.jpg" width="211" height="286"/></a></li>
<li><a href="#"><img src="asa/baby_r.jpg" width="211" height="286"/></a></li>
</ul>
<div class="prev_b">上一张</div>
<div class="next_b">下一张</div>
</div>
</div>
<div class="fresh_txt">
<div class="fresh_txt_c">
<a href="#">孕妈必备</a><a href="#">儿童玩具</a><a href="#">重装童鞋</a><a href="#">辅助食品</a><a href="#">奶粉</a><a
href="#">鲜活禽蛋</a><a href="#">维生素</a><a href="#">重装童鞋</a><a href="#">辅助食品</a>
</div>
</div>
</div>
<div class="fresh_mid">
<ul>
<li>
<div class="name"><a href="#">儿童推车</a></div>
<div class="price">
<span>￥560.00</span>
</div>
<div class="img"><a href="#"><img src="asa/baby_1.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">妈咪纸尿裤</a></div>
<div class="price">
<span>￥260.00</span>
</div>
<div class="img"><a href="#"><img src="asa/baby_2.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">儿童玩具 挖掘机</a></div>
<div class="price">
<span>￥160.00</span>
</div>
<div class="img"><a href="#"><img src="asa/baby_3.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">纸尿裤</a></div>
<div class="price">
<span>￥260.00</span>
</div>
<div class="img"><a href="#"><img src="asa/baby_4.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">儿童推车</a></div>
<div class="price">
<span>￥86.00</span>
</div>
<div class="img"><a href="#"><img src="asa/baby_5.jpg" width="185" height="155"/></a></div>
</li>
<li>
<div class="name"><a href="#">奶粉</a></div>
<div class="price">
<span>￥660.00</span>
</div>
<div class="img"><a href="#"><img src="asa/baby_6.jpg" width="185" height="155"/></a></div>
</li>
</ul>
</div>
<div class="fresh_right">
<ul>
<li><a href="#"><img src="asa/baby_b1.jpg" width="260" height="220"/></a></li>
<li><a href="#"><img src="asa/baby_b2.jpg" width="260" height="220"/></a></li>
</ul>
</div>
</div>
</section>
</section>
<footer class="center">
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="asa/b1.png" width="62" height="62"/></a>
<div><h2>正品保障</h2>正品行货 放心购买</div>
</li>
<li >
<a><img src="asa/b2.png" width="62" height="62"/></a>
<div><h2>满38包邮</h2>满38包邮 免运费</div>
</li>
<li>
<a><img src="asa/b3.png" width="62" height="62"/></a>
<div><h2>天天低价</h2>天天低价 畅选无忧</div>
</li>
<li>
<a><img src="asa/b4.png" width="62" height="62"/></a>
<div><h2>准时送达</h2>收货时间由你做主</div>
</li>
</ul>
</div>
<div class="b_nav">
<dl>
<dt><a href="#">新手上路</a></dt>
<dd><a href="#">售后流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">订购方式</a></dd>
<dd><a href="#">隐私声明</a></dd>
<dd><a href="#">推荐分享说明</a></dd>
</dl>
<dl>
<dt><a href="#">配送与支付</a></dt>
<dd><a href="#">货到付款区域</a></dd>
<dd><a href="#">配送支付查询</a></dd>
<dd><a href="#">支付方式说明</a></dd>
</dl>
<dl>
<dt><a href="#">会员中心</a></dt>
<dd><a href="#">资金管理</a></dd>
<dd><a href="#">我的收藏</a></dd>
<dd><a href="#">我的订单</a></dd>
</dl>
<dl>
<dt><a href="#">服务保证</a></dt>
<dd><a href="#">退换货原则</a></dd>
<dd><a href="#">售后服务保证</a></dd>
<dd><a href="#">产品质量保证</a></dd>
</dl>
<dl>
<dt><a href="#">联系我们</a></dt>
<dd><a href="#">网站故障报告</a></dd>
<dd><a href="#">购物咨询</a></dd>
<dd><a href="#">投诉与建议</a></dd>
</dl>
<div class="b_tel_bg">
<a href="#" class="b_sh1">新浪微博</a>
<a href="#" class="b_sh2">腾讯微博</a>
<p>
服务热线：<br/>
<span>400-123-4567</span>
</p>
</div>
<div class="b_er">
<div class="b_er_c"><img src="asa/er.gif" /></div>
<img src="asa/ss.png"/>
</div>
</div>
<div class="btmbg">
<div class="btm">
备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 ,
Technical Support: Dgg Group <br/>
<img src="asa/b_1.gif"/>
<img src="asa/b_2.gif"/>
<img src="asa/b_3.gif"/>
<img src="asa/b_4.gif"/>
<img src="asa/b_5.gif"/>
<img src="asa/b_6.gif"/>
</div>
</div>
</footer>
</body>
</html>
《css》
*{
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 25px;
color: #555555;
margin: 0 auto;
}
a {
color: #555555;
text-decoration: none;
}
a:hover {
color: #ff4e00;
}
img {
border: 0;
}
ul, li, dl, dt, dd {
list-style: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear:after{
content: '';
display: block;
clear: both;
}
.center{
width: 1200px;
margin: 0 auto;
}
/*---------------header---------------*/
.a {
width: 100%;
min-width: 1200px;
height: 35px;
line-height: 35px;
background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
}
.sou{
margin-left: 50px;
}
.top_right{
margin-right: 50px;
}
.s_city_b {
width: 150px;
height: 35px;
float: left;
}
.ss {
/*width: 225px;*/
height: 35px;
float: left;
}
.ss_list {
height: 35px;
background: url(../xiangmu/asa/t_arrow.gif) no-repeat right center;
float: left;
margin-left: 10px;
padding-right: 15px;
position: relative;
}
.ss_list:hover .ss_list_bg {
display: block;
}
.ss_list_bg {
width: 116px;
overflow: hidden;
position: absolute;
left: 50%;
top: 29px;
margin-left: -58px;
z-index: 900;
display: none;
}
.ss_list_c {
overflow: hidden;
background-color: #FFF;
margin-top: 6px;
padding: 10px 0;
border: 1px solid #cdcdcd;
}
.ss_list_c ul li {
height: 25px;
line-height: 25px;
overflow: hidden;
text-align: center;
}
.s_sh {
width: 55px;
height: 35px;
overflow: hidden;
float: left;
}
.s_sh a {
width: 20px;
height: 35px;
line-height: 35px;
overflow: hidden;
float: left;
display: inline;
margin: 0 3px;
text-indent: -9999em;
}
.s_sh a.sh1 {
background: url(../xiangmu/asa/sh1.png) no-repeat center 8px;
}
.s_sh a.sh2 {
background: url(../xiangmu/asa/sh2.png) no-repeat center center;
}
/*头部，logo和搜索*/
.top {
width: 1200px;
height: 140px;
}
.logo {
width: 207px;
height: 72px;
overflow: hidden;
float: left;
display: inline;
margin-top: 40px;
margin-left: 60px;
box-sizing: border-box;
}
.search {
width: 520px;
height: 65px;
overflow: hidden;
float: left;
display: inline;
margin-left: 100px;
margin-top: 50px;
}
.s_ipt {
width: 408px;
height: 40px;
line-height: 36px;
overflow: hidden;
color: #555555;
font-size: 14px;
float: left;
padding: 0 10px;
border: 2px solid #ff3c3c;
border-right: 0;
}
.s_btn {
width: 90px;
height: 40px;
line-height: 40px;
background-color: #ff3c3c;
color: #FFF;
font-size: 16px;
text-align: center;
float: left;
border: 0;
cursor: pointer;
}
.search a {
margin-right: 12px;
display: inline-block;
}
.i_car {
width: 120px;
height: 38px;
line-height: 38px;
background: #f6f6f6 url(../xiangmu/asa/car.png) no-repeat 10px center;
float: right;
margin-top: 50px;
border: 1px solid #d9d9d9;
position: relative;
}
.car_t {
width: 80px;
height: 38px;
overflow: hidden;
font-size: 14px;
margin-left: 38px;
cursor: pointer;
padding-left: 10px;
}
.car_t span {
color: #ff3c3c;
}
.i_car:hover .car_bg {
display: block;
}
.car_bg {
width: 283px;
overflow: hidden;
background-color: #FFF;
border: 1px solid #d9d9d9;
position: absolute;
right: -1px;
top: 38px;
z-index: 900;
display: none;
}
/*---------------首页---------------*/
/*主体部分，焦点图部分*/
.menu_bg {
width: 100%;
min-width: 1200px;
height: 43px;
border-bottom: 2px solid #ff4e00;
}
.menu {
width: 1200px;
height: 43px;
line-height: 43px;
color: #3e3e3e;
font-size: 16px;
position: relative;
z-index: 800;
}
ul.menu_r {
width: 720px;
height: 40px;
line-height: 40px;
float: left;
margin-left: 211px;
}
ul.menu_r li {
width: 70px;
height: 40px;
text-align: center;
float: left;
display: inline;
margin-right: 10px;
font-weight: bold;
}
ul.menu_r li a {
color: #3e3e3e;
}
ul.menu_r li a:hover, ul.menu_r .active a {
color: #ff3c3c;
}
.m_ad {
width: 260px;
height: 43px;
line-height: 40px;
overflow: hidden;
color: #ff3600;
font-size: 20px;
font-weight: bold;
text-align: right;
float: right;
}
.nav {
width: 220px;
background-color: #ff3c3c;
position: absolute;
left: 0;
top: 0;
}
.nav_t {
width: 220px;
height: 43px;
line-height: 43px;
overflow: hidden;
color: #FFF;
font-size: 16px;
text-indent: 35px;
}
.leftNav {
width: 220px;
background-color: #b01d1d;
position: absolute;
left: 0;
top: 44px;
}
.none {
display: none;
}
.leftNav ul li {
height: 40px;
line-height: 40px;
background: url(../xiangmu/asa/n_arrow.gif) no-repeat 204px center;
color: #FFF;
font-size: 14px;
margin-left: 1px;
cursor: pointer;
position: relative;
/*鼠标移入过渡动画*/
transition: all 1s;
}
/*鼠标移入商品列表，右移*/
.leftNav ul li:hover{
transform: translate(20px,0);
}
.leftNav ul li .n_img {
width: 20px;
height: 21px;
text-align: center;
float: left;
margin:0 10px ;
}
.leftNav ul li .n_img span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.leftNav ul li .n_img img {
vertical-align: middle;
}
.leftNav ul li ul {
width: 220px;
min-height: 70px;
overflow: hidden;
position: absolute;
left: 196px;
top: 0;
border: 1px solid #d4d2d2;
border-left: 0;
z-index: 900;
display: none;
}
.leftNav ul li ul li {
width: 195px;
height: auto;
line-height: 25px;
overflow: hidden;
font-size: 12px;
font-weight: normal;
background: none;
margin: 10px auto;
padding: 0 0 5px;
border-bottom: 1px dashed #d1d0d1;
}
.leftNav ul li ul li a {
color: #989797;
margin: 0 10px;
}
.leftNav ul li ul li a:hover {
color: #e02d02;
}
.leftNav ul li ul li .n_t {
width: 50px;
height: 20px;
line-height: 20px;
overflow: hidden;
text-align: center;
font-weight: bold;
float: left;
}
.leftNav ul li ul li .n_c {
width: 142px;
overflow: hidden;
float: left;
}
.leftNav ul li ul li .n_c a {
width: 60px;
height: 20px;
line-height: 20px;
overflow: hidden;
float: left;
display: inline-block;
margin: 0 0 0 10px;
}
.leftNav ul li .fj {
width: 210px;
height: 40px;
line-height: 40px;
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 901;
}
.leftNav ul li .fj.nuw {
width: 211px;
text-decoration: none;
height: 40px;
line-height: 40px;
background-color: #FFF;
color: #ff4e00;
z-index: 800;
}
.leftNav .zj {
width: 989px;
height: 411px;
overflow: hidden;
background-color: #FFF;
position: absolute;
left: 210px;
top: 0;
/*控制鼠标移入出现或消失*/
display: none;
}
.leftNav .zj .zj_l {
width: 685px;
height: 385px;
overflow: hidden;
float: left;
display: inline;
margin-left: 20px;
margin-top: 15px;
}
.leftNav .zj .zj_l_c {
width: 280px;
height: 108px;
line-height: 25px;
color: #dbdbdb;
float: left;
display: inline;
margin-right: 50px;
margin-bottom: 25px;
}
.leftNav .zj .zj_l_c h2 {
height: 25px;
line-height: 25px;
color: #3e3e3e;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
margin-left: 10px;
}
.leftNav .zj .zj_l_c a {
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0;
}
.leftNav .zj .zj_r {
width: 236px;
height: 402px;
float: right;
margin-right: 10px;
margin-top: 5px;
}
.leftNav .zj .zj_r img {
width: 236px;
height: 200px;
display: block;
margin-bottom: 1px;
}
/*焦点图*/
.banner {
width: 700px;
height: 401px;
float: left;
margin-left: 226px;
}
.banner .top_slide_wrap {
width: 700px;
height: 401px;
overflow: hidden;
position: relative;
z-index: 1;
}
.num{
position: absolute;
bottom: 20px;
right: 300px;
z-index: 2;
}
.num li{
float: left;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
background: #ccc0b3;
text-align: center;
margin: 0 4px;
font-weight: bold;
}
.num li a{
color: #000;
}
.num li:hover{
background: #ff3c3c;
}
.num li:hover a{
color: #fff;
}
.banner .slide_box li {
height: 401px;
position: relative;
}
/* 焦点图左右按钮 */
.banner .op_btns {
width: 700px;
margin-top: -730px;
position: relative;
z-index: 3;
}
.banner .op_btns .op_btn {
display: block;
width: 32px;
height: 60px;
cursor: pointer;
position: absolute;
margin-top: 80px;
}
.banner .op_btns .op_prev {
background: url(../xiangmu/asa/b_left.png) no-repeat center top;
left: 0;
top: 420px;
}
.banner .op_btns .op_next {
background: url(../xiangmu/asa/b_right.png) no-repeat center top;
right: 0;
top: 420px;
}
/*新闻快讯*/
.inews {
height: 399px;
background-color: #FFF;
float: right;
border: 1px solid #d9d9d9;
}
.news_t {
height: 39px;
line-height: 39px;
overflow: hidden;
color: #3e3e3e;
font-size: 16px;
padding: 0 10px;
border-bottom: 1px dotted #d9d9d9;
}
.news_t span {
font-size: 12px;
color: #888888;
}
.inews a {
color: #888888;
}
.inews a:hover {
color: #ff3c3c;
}
.news_t h3{
height: 39px;
line-height: 39px;
color: #3e3e3e;
font-size: 16px;
}
.inews ul {
margin: 10px 10px 20px;
}
.inews ul li {
height: 30px;
line-height: 30px;
overflow: hidden;
color: #888888;
}
.inews ul li span {
color: #3e3e3e;
font-weight: bold;
}
.charge_t {
width: 206px;
}
.charge_t h3{
height: 39px;
line-height: 39px;
color: #3e3e3e;
font-size: 16px;
padding: 0 10px;
margin-top: 10px;
border-top: 1px solid #d9d9d9;
border-bottom: 1px dotted #d9d9d9;
}
.charge_t p{
margin-left: 10px;
}
.charge_t img{
width: 90%;
padding: 0 5%;
}
/*----------首页（热门商品）-----------*/
.content{
margin-top: 20px;
}
.hot {
width: 211px;
height: 230px;
overflow: hidden;
background-color: #d8eefc;
float: left;
position: relative;
}
.hot .img {
width: 188px;
height: 188px;
margin-top: 8px;
}
/*热门商品下面的图片鼠标移入放大动画*/
.hot .img img,.imgbg{
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.hot:hover img,.imgbg:hover{
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.hot .pri_bg {
width: 100px;
height: 20px;
line-height: 20px;
color: #ff4e00;
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 5px;
}
.hot .price {
height: 20px;
line-height: 20px;
overflow: hidden;
background-color: #ff4e00;
color: #FFF;
font-size: 14px;
text-align: center;
float: left;
padding: 0 5px;
margin-right: 5px;
}
.hot_pro {
width: 975px;
height: 228px;
overflow: hidden;
background-color: #FFF;
float: right;
border: 1px solid #eaeaea;
}
.hot_pro #feature {
overflow: hidden;
position: relative;
}
.hot_pro #feature .button {
position: absolute;
left: 0;
top: 0;
}
.hot_pro #feature .h_prev {
width: 32px;
height: 60px;
overflow: hidden;
background: url(../xiangmu/asa/b_left.png) no-repeat center top;
display: block;
text-indent: -9999px;
float: left;
position: absolute;
left: 0;
top: 84px;
}
.hot_pro #feature .h_next {
width: 32px;
height: 60px;
overflow: hidden;
background: url(../xiangmu/asa/b_right.png) no-repeat center top;
display: block;
text-indent: -9999px;
float: left;
position: absolute;
right: 0;
top: 84px;
}
.hot_pro .featureUL {
width: 2800px;
height: 375px;
overflow: hidden;
float: left;
position: relative;
}
.hot_pro .featureBox {
width: 243px;
height: 228px;
overflow: hidden;
float: left;
border-right: 1px solid #eaeaea;
position: relative;
z-index: 0;
}
.hot_pro .h_icon {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
.hot_pro .imgbg {
width: 160px;
height: 136px;
margin-top: 10px;
margin-left: 10px;
}
.hot_pro .name {
height: 40px;
line-height: 20px;
overflow: hidden;
color: #888888;
font-size: 12px;
text-align: center;
margin-top: 10px;
}
.hot_pro .name h2 {
height: 20px;
line-height: 20px;
color: #555555;
font-size: 16px;
text-align: center;
}
.hot_pro .name h2 a {
color: #555555;
}
.hot_pro .name h2 a:hover {
color: #555555;
text-decoration: underline;
}
.hot_pro .name a {
color: #888888;
}
.hot_pro .name a:hover {
color: #888888;
text-decoration: underline;
}
.hot_pro .price {
height: 30px;
line-height: 30px;
overflow: hidden;
color: #999999;
text-align: center;
text-transform: uppercase;
}
.hot_pro .price strong {
color: #ff4e00;
font-size: 14px;
}
.hot_pro .price span {
font-size: 20px;
}
/*---------------首页（进口 生鲜）---------------*/
.floorTitle {
width: 1190px;
height: 39px;
line-height: 39px;
overflow: hidden;
color: #ff4e00;
font-size: 18px;
padding: 0 5px;
border-bottom: 2px solid #ff4e00;
}
.i_mores {
font-size: 12px;
color: #555555;
}
.i_mores a {
color: #555555;
margin: 0 10px;
}
.i_mores a:hover {
color: #ff4e00;
}
.floor_num {
width: 33px;
height: 34px;
line-height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/floor.png) no-repeat center top;
color: #FFF;
font-size: 14px;
text-transform: uppercase;
text-indent: 6px;
float: left;
display: inline;
margin-right: 15px;
}
.fresh_left {
width: 211px;
height: 441px;
overflow: hidden;
background-color: #a6e5be;
float: left;
}
.fre_ban {
width: 211px;
height: 286px;
overflow: hidden;
}
.fre_ban #imgPlay1 {
width: 211px;
height: 286px;
overflow: hidden;
margin: 0 auto;
zoom: 1;
position: relative;
}
.fre_ban #imgPlay .imgs img {
width: 211px;
}
.fre_ban #imgPlay1 .imgs li {
position: relative;
float: left;
width: 211px;
height: 286px;
}
.fre_ban #imgPlay1 .imgs {
width: 5760px;
}
.fre_ban #imgPlay1 .btn {
width: 112px;
height: 29px;
overflow: hidden;
text-indent: -9999px;
position: absolute;
right: 12px;
bottom: 12px;
}
.fre_ban #imgPlay1 .btn a {
width: 46px;
height: 71px;
overflow: hidden;
display: block;
background: url(../xiangmu/asa/b_left.png) no-repeat;
}
.fre_ban #imgPlay1 .btn a:hover {
background: url(../xiangmu/asa/b_left.png) no-repeat;
}
.fre_ban .prevf {
width: 20px;
height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/s_left.png) no-repeat;
cursor: pointer;
text-indent: -9999px;
position: absolute;
left: 0;
top: 123px;
}
.fre_ban .nextf {
width: 20px;
height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/s_right.png) no-repeat;
cursor: pointer;
text-indent: -9999px;
position: absolute;
right: 0;
top: 123px;
}
.fresh_txt {
width: 211px;
height: 155px;
background: url(../xiangmu/asa/s_txt.png) no-repeat center top;
padding-top: 1px;
}
.fresh_txt_c {
height: 120px;
line-height: 30px;
overflow: hidden;
margin-top: 10px;
}
.fresh_txt_c a {
display: inline-block;
margin-left: 20px;
margin-right: 12px;
}
.fresh_mid {
width: 729px;
height: 441px;
overflow: hidden;
background-color: #FFF;
float: left;
}
.fresh_mid ul li {
width: 242px;
height: 220px;
text-align: center;
overflow: hidden;
float: left;
border-left: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
}
.fresh_mid ul li .name {
height: 40px;
line-height: 40px;
font-size: 14px;
margin-top: 12px;
}
.fresh_mid ul li .price {
height: 30px;
line-height: 30px;
overflow: hidden;
text-transform: uppercase;
color: #ff4e00;
font-size: 14px;
}
.fresh_mid ul li .price span {
font-size: 18px;
}
.fresh_mid ul li .img {
margin-top: 5px;
}
.fresh_mid ul li .img img {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.fresh_mid ul li:hover .img img {
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.fresh_right {
width: 260px;
height: 441px;
overflow: hidden;
background-color: #FFF;
float: right;
}
.fresh_right ul li {
width: 260px;
height: 220px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
/*---------------首页（个人美妆）---------------*/
.make_left {
width: 211px;
height: 441px;
overflow: hidden;
background-color: #fabeb8;
float: left;
}
.make_ban {
width: 211px;
height: 286px;
overflow: hidden;
}
.make_ban #imgPlay3 {
width: 211px;
height: 286px;
overflow: hidden;
margin: 0 auto;
zoom: 1;
position: relative;
}
.make_ban #imgPlay3 .imgs img {
width: 211px;
}
.make_ban #imgPlay3 .imgs li {
position: relative;
float: left;
width: 211px;
height: 286px;
}
.make_ban #imgPlay3 .imgs {
width: 5760px;
}
.make_ban #imgPlay3 .btn {
width: 112px;
height: 29px;
overflow: hidden;
text-indent: -9999px;
position: absolute;
right: 12px;
bottom: 12px;
}
.make_ban #imgPlay3 .btn a {
width: 46px;
height: 71px;
overflow: hidden;
display: block;
background: url(../xiangmu/asa/b_left.png) no-repeat;
}
.make_ban #imgPlay3 .btn a:hover {
background: url(../xiangmu/asa/b_left.png) no-repeat;
}
.make_ban .prev_m {
width: 20px;
height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/s_left.png) no-repeat;
cursor: pointer;
text-indent: -9999px;
position: absolute;
left: 0;
top: 123px;
}
.make_ban .next_m {
width: 20px;
height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/s_right.png) no-repeat;
cursor: pointer;
text-indent: -9999px;
position: absolute;
right: 0;
top: 123px;
}
/*---------------首页（母婴玩具）---------------*/
.baby_left {
width: 211px;
height: 441px;
overflow: hidden;
background-color: #f4bdd5;
float: left;
}
.baby_ban {
width: 211px;
height: 286px;
overflow: hidden;
}
.baby_ban #imgPlay4 {
width: 211px;
height: 286px;
overflow: hidden;
margin: 0 auto;
zoom: 1;
position: relative;
}
.baby_ban #imgPlay4 .imgs img {
width: 211px;
}
.baby_ban #imgPlay4 .imgs li {
position: relative;
float: left;
width: 211px;
height: 286px;
}
.baby_ban #imgPlay4 .imgs {
width: 5760px;
}
.baby_ban #imgPlay4 .btn {
width: 112px;
height: 29px;
overflow: hidden;
text-indent: -9999px;
position: absolute;
right: 12px;
bottom: 12px;
}
.baby_ban #imgPlay4 .btn a {
width: 46px;
height: 71px;
overflow: hidden;
display: block;
background: url(../xiangmu/asa/b_left.png) no-repeat;
}
.baby_ban #imgPlay4 .btn a:hover {
background: url(../xiangmu/asa/b_left.png) no-repeat;
}
.baby_ban .prev_b {
width: 20px;
height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/s_left.png) no-repeat;
cursor: pointer;
text-indent: -9999px;
position: absolute;
left: 0;
top: 123px;
}
.baby_ban .next_b {
width: 20px;
height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/s_right.png) no-repeat;
cursor: pointer;
text-indent: -9999px;
position: absolute;
right: 0;
top: 123px;
}
/*---------------分类列表---------------*/
.i_bg{
width:100%; min-width:1200px; overflow:hidden;
}
.postion {
width: 1200px;
height: 40px;
line-height: 40px;
overflow: hidden;
margin-top: 10px;
}
.postion i{
color: red;
font-weight: normal;
}
.n_ch {
height: 23px;
line-height: 23px;
overflow: hidden;
float: left;
display: inline;
margin-left: 10px;
margin-top: 7px;
padding: 0 10px;
border: 1px dashed #ff4e00;
}
.n_ch i {
color: #ff3200;
}
.n_ch a {
width: 10px;
height: 9px;
overflow: hidden;
float: right;
margin-top: 7px;
margin-left: 5px;
}
table.choice {
border-collapse: collapse;
border: 2px solid #cccccc;
width:100%;
margin:0 auto;
}
table.choice tr{
vertical-align: top;
}
table.choice tr td {
border-bottom: 1px solid #cccccc;
padding: 10px;
}
table.choice tr td.td_a {
color: #888888;
}
table.choice tr td.td_a a {
display: inline-block;
margin: 0 11px;
color: #888888;
}
table.choice tr td.td_a a:hover, table.choice tr td.td_a a.now {
color: #ff4e00;
}
.l_history {
width: 209px;
overflow: hidden;
float: left;
border: 1px solid #eaeaea;
}
.his_t {
height: 38px;
line-height: 38px;
overflow: hidden;
background: url(../xiangmu/asa/h_t.gif) no-repeat 10px center;
color: #ff4e00;
font-size: 16px;
padding-left: 22px;
padding-right: 10px;
border-bottom: 1px solid #eaeaea;
}
.his_t a {
color: #888888;
font-size: 14px;
}
.l_history ul li {
height: 240px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.l_history ul li .img {
width: 185px;
height: 162px;
overflow: hidden;
margin-top: 10px;
}
.l_history ul li .name {
height: 25px;
line-height: 25px;
overflow: hidden;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.l_history ul li .price {
height: 25px;
line-height: 25px;
overflow: hidden;
color: #999999;
text-align: center;
text-transform: uppercase;
}
.l_history ul li .price {
color: #B00504;
font-size: 18px;
}
.l_list {
width: 972px;
overflow: hidden;
float: left;
padding-bottom: 30px;
}
.list_t {
height: 39px;
line-height: 39px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.list_or a {
width: 68px;
height: 23px;
line-height: 23px;
overflow: hidden;
color: #555555;
text-indent: 12px;
float: left;
display: inline;
margin-right: -1px;
margin-top: 6px;
border: 1px solid #cccccc;
}
.list_or a:hover, .list_or a.now {
color: #FFF;
background-color: #ff4e00;
}
.list_or .i_up {
width: 15px;
height: 8px;
line-height: 8px;
overflow: hidden;
background: url(../xiangmu/asa/i_up.gif) no-repeat center top;
text-indent: -9999em;
float: right;
margin-top: 6px;
margin-right: 8px;
}
.list_or .i_down {
width: 15px;
height: 8px;
line-height: 8px;
overflow: hidden;
background: url(../xiangmu/asa/i_down.gif) no-repeat center top;
text-indent: -9999em;
float: right;
margin-top: 0px;
margin-right: 8px;
}
.list_c {
overflow: hidden;
margin: 20px auto;
}
.list_c ul {
overflow: hidden;
}
ul.cate_list {
padding: 5px 0;
}
ul.cate_list li {
width: 232px;
height: 316px;
overflow: hidden;
float: left;
display: inline;
margin: 0 5px;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
ul.cate_list li:hover {
background-color: #FFF;
-webkit-box-shadow: 0 0 5px #e0e0e0;
-moz-box-shadow: 0 0 5px #e0e0e0;
box-shadow: 0 0 5px #e0e0e0;
}
ul.cate_list li .img {
background-origin: border-box;
background-clip: border-box;
width: 210px;
height: 185px;
overflow: hidden;
margin-top: 5px;
}
ul.cate_list li .price {
width: 208px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-transform: uppercase;
margin-top: 10px;
color: #ff4e00;
font-size: 14px;
}
ul.cate_list li .price span {
font-size: 18px;
}
ul.cate_list li .name {
width: 208px;
height: 25px;
line-height: 25px;
overflow: hidden;
font-size: 14px;
}
ul.cate_list li .carbg {
width: 209px;
height: 30px;
overflow: hidden;
margin-top: 15px;
}
ul.cate_list li .carbg a.ss {
width: 68px;
height: 28px;
line-height: 28px;
overflow: hidden;
background: url(../xiangmu/asa/heart.png) no-repeat 10px center;
color: #888888;
text-indent: 33px;
float: left;
display: inline;
margin-right: -1px;
border: 1px solid #cccccc;
}
ul.cate_list li .carbg a.ss:hover {
color: #888888;
background: url(../xiangmu/asa/heart_h.png) no-repeat 10px center;
}
ul.cate_list li .carbg a.j_car {
width: 138px;
height: 28px;
line-height: 28px;
overflow: hidden;
background: url(../xiangmu/asa/cars.png) no-repeat 24px center;
color: #ff4e00;
text-indent: 47px;
float: left;
display: inline;
margin-right: -1px;
border: 1px solid #cccccc;
}
ul.cate_list li .carbg a.j_car:hover {
color: #FFF;
background:#ff4e00 url(../xiangmu/asa/cars_h.png) no-repeat 24px center;
border: 1px solid #ff4e00;
}
ul.cate_list li:hover .carbg a.j_car {
color: #FFF;
background:#ff4e00 url(../xiangmu/asa/cars_h.png) no-repeat 24px center;
border: 1px solid #ff4e00;
}
.pages {
overflow: hidden;
color: #888888;
padding: 20px 10px;
text-align: right;
font-size: 16px;
margin-top: 20px;
}
.pages span{
height: 36px;
line-height: 36px;
display: inline-block;
overflow: hidden;
}
.pages a {
height: 36px;
line-height: 36px;
overflow: hidden;
color: #666666;
font-size: 16px;
text-align: center;
display: inline-block;
padding: 0 12px;
margin: 0 4px;
border: 1px solid #cccccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.pages a:hover, .pages a.cur {
color: #FFF;
background-color: #ff4e00;
border: 1px solid #ff4e00;
}
.pages a.p_pre:hover {
background-color: #eaeaea;
color: #555555;
border: 1px solid #cccccc;
}
/*---------------品牌分类---------------*/
.brand_t {
height: 40px;
line-height: 40px;
overflow: hidden;
background: url(../xiangmu/asa/h_t.gif) no-repeat left center;
color: #ff4e00;
font-size: 16px;
padding-left: 14px;
}
ul.brand {
width: 105%;
overflow: hidden;
}
ul.brand li {
width: 228px;
height: 160px;
overflow: hidden;
float: left;
display: inline;
margin-right: 19px;
}
ul.brand li .img {
width: 226px;
height: 108px;
overflow: hidden;
border: 1px solid #eaeaea;
}
ul.brand li .name {
height: 30px;
line-height: 30px;
overflow: hidden;
color: #888888;
text-align: center;
font-size: 14px;
}
ul.brand li .name span {
color: #3e3e3e;
}
.brand_img {
width: 226px;
height: 108px;
overflow: hidden;
margin: 10px;
border-right: 1px solid #eaeaea;
}
.td_b a {
margin-right: 25px;
}
.td_b a.now {
color: #ff4e00;
}
《htlm》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="详情页.css">
</head>
<body>
<header>
<div class="soubg">
<div class="sou fl">
<div class="s_city_b">
<span>送货至：四川</span>
</div>
</div>
<div class="fr top_right">
<div class="fl">
你好!请<a href="#">登录</a>
<a href="#" style="color:#ff4e00;">免费注册</a> | <a href="#">我的订单</a> |
</div>
<ul class="ss">
<li class="ss_list">
<a href="#">收藏夹</a>
</li>
<li class="ss_list">
<a href="#">客户服务</a>
<div class="ss_list_bg">
<div class="ss_list_c">
<ul>
<li><a href="#">客户服务</a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#">客户服务</a></li>
</ul>
</div>
</div>
</li>
<li class="ss_list">
<a href="#">网站导航</a>
</li>
</ul>
<span class="fl">| 关注我们：</span>
<span class="s_sh">
<a href="#" class="sh1">新浪</a>
<a href="#" class="sh2">微信</a>
</span>
<span class="fr">|
<a href="#">手机版
<img src="asa/s_tel.png" align="absmiddle"/>
</a>
</span>
</div>
</div>
<div class="top">
<div class="logo">
<a href="#">
<img src="asa/logo.png"/>
</a>
</div>
<div class="search">
<form>
<input type="search" value="" placeholder="请输入关键字" class="s_ipt"/>
<input type="submit" value="搜索" class="s_btn"/>
</form>
<div class="fl">
<a href="#">咖啡</a>
<a href="#">iphone 6S</a>
<a href="#">新鲜美食</a>
<a href="#">蛋糕</a>
<a href="#">日用品</a>
<a href="#">连衣裙</a>
</div>
</div>
<div class="i_car">
<div class="car_t">购物车</div>
</div>
</div>
</header>
<!--主体部分-->
<section class="center">
<!--Begin Menu Begin-->
<div class="menu_bg">
<div class="menu">
<!--Begin 商品分类详情 Begin-->
<nav class="nav">
<div class="nav_t">全部商品分类</div>
</nav>
<!--End 商品分类详情 End-->
<nav>
<ul class="menu_r">
<li class="active"><a href="">首页</a></li>
<li class="active"><a href="">自营超市</a></li>
<li><a href="">1号团</a></li>
<li><a href="">1号超市</a></li>
<li><a href="">女装</a></li>
<li><a href="">美妆</a></li>
<li><a href="">1号海购</a></li>
<li><a href="">团购</a></li>
</ul>
</nav>
<a href="#" class="m_ad"><img src="asa/phone.png" alt=""/></a>
</div>
</div>
<!--End Menu End-->
<div class="i_bg">
<div class="postion">
<span class="fl">所有团购 > 包饰 > 珠韵首饰 <i>冰韵 天然白色正圆S925银扣珍珠项链</i></span>
</div>
<div class="clear" >
<div id="tsShopContainer">
<div id="tsImgS">
<a href="asa/p_big.jpg" class="MagicZoom">
<img src="asa/p_big.jpg" width="390" height="390"/>
</a>
</div>
<div id="tsPicContainer">
<div id="tsImgSArrL"></div>
<div id="tsImgSCon">
<ul>
<li><img src="asa/ps1.jpg" /></li>
<li><img src="asa/ps2.jpg" width="79"/>
<li><img src="asa/ps3.jpg" width="79"/></li>
<li><img src="asa/ps4.jpg" width="79"/></li>
</ul>
</div>
<div id="tsImgSArrR"></div>
</div>
</div>
<div class="pro_des">
<div class="des_name">
<p>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</p>
全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。
</div>
<div class="des_price">
本店价格：<b>¥1786</b><br/>
参考价：<span>¥3886</span>
</div>
<div class="des_choice">
<span class="fl">尺码：</span>
<ul>
<li class="checked">43cm
<div class="ch_img"></div>
</li>
<li>45cm
<div class="ch_img"></div>
</li>
<li>50cm
<div class="ch_img"></div>
</li>
</ul>
</div>
<div class="des_choice">
<span class="fl">颜色选择：</span>
<ul>
<li>粉色
<div class="ch_img"></div>
</li>
<li class="checked">白色
<div class="ch_img"></div>
</li>
</ul>
</div>
<div class="des_share">
<div class="d_sh">
分享
<div class="d_sh_bg">
<a href="#"><img src="asa/sh_1.gif"/></a>
<a href="#"><img src="asa/sh_2.gif"/></a>
<a href="#"><img src="asa/sh_3.gif"/></a>
<a href="#"><img src="asa/sh_4.gif"/></a>
<a href="#"><img src="asa/sh_5.gif"/></a>
</div>
</div>
<div class="d_care"><a >关注商品</a></div>
</div>
<div class="des_join">
<div class="j_nums">
<input type="text" value="1" name="" class="n_ipt"/>
<input type="button" value="" class="n_btn_1"/>
<input type="button" value="" class="n_btn_2"/>
</div>
<span class="fl"><a><img src="asa/j_car.png"/></a></span>
</div>
</div>
<div class="s_brand">
<div class="s_brand_img"><img src="asa/sbrand.jpg" width="188" height="132"/></div>
<div class="s_brand_c"><a href="#">进入品牌专区</a></div>
</div>
</div>
<div class="content">
<!--用户还喜欢-->
<div class="l_history">
<div class="fav_t">用户还喜欢</div>
<ul>
<li>
<div class="img"><a href="#"><img src="asa/his_1.jpg" /></a></div>
<div class="name"><a href="#">科爱KEAL儿童日本书包减负护脊</a></div>
<div class="price">
<span>¥599</span>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="asa/his_2.jpg" /></a></div>
<div class="name"><a href="#">科爱KEAL小学生减负护脊书包超轻</a></div>
<div class="price">
<span>¥79</span>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="asa/his_3.jpg"/></a></div>
<div class="name"><a href="#">珠韵首饰 天然白色珍珠项链</a></div>
<div class="price">
<span>¥339</span>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="asa/his_4.jpg" /></a></div>
<div class="name"><a href="#">珠韵首饰 新品18K黄金珍珠耳钉</a></div>
<div class="price">
<span>¥1860</span>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="asa/his_5.jpg" /></a></div>
<div class="name"><a href="#">珠韵首饰 姝丽大珍珠项链</a></div>
<div class="price">
<span>¥758</span>
</div>
</li>
</ul>
</div>
<div class="l_list">
<!--推荐搭配-->
<div class="des_border">
<div class="des_tit">
<ul>
<li class="current">推荐搭配</li>
</ul>
</div>
<div class="team_list">
<div class="img"><a href="#"><img src="asa/mat_1.jpg" /></a></div>
<div class="name"><a href="#">粤通国际珠宝 999足金</a></div>
<div class="price">
<div class="checkbox">
<input type="checkbox" name="zuhe" checked="checked"/>
</div>
<span>￥76</span>
</div>
</div>
<div class="team_icon"><img src="asa/jia_b.gif"/></div>
<div class="team_list">
<div class="img"><a href="#"><img src="asa/mat_2.jpg"/></a></div>
<div class="name"><a href="#">珠韵 9.5-10.5mm珍珠项链</a></div>
<div class="price">
<div class="checkbox">
<input type="checkbox" name="zuhe"/>
</div>
<span>￥1890</span>
</div>
</div>
<div class="team_icon"><img src="asa/jia_b.gif"/></div>
<div class="team_list">
<div class="img"><a href="#"><img src="asa/mat_3.jpg"/></a></div>
<div class="name"><a href="#">清新耳环</a></div>
<div class="price">
<div class="checkbox">
<input type="checkbox" name="zuhe" checked/>
</div>
<span>￥232</span>
</div>
</div>
<div class="team_icon"><img src="asa/equl.gif"/></div>
<div class="team_sum">
套餐价：￥<span>2000</span><br/>
<input type="text" value="1" class="sum_ipt"/><br/>
<a href="#"><img src="asa/z_buy.gif"/></a>
</div>
</div>
<!--商品属性-->
<div class="des_border">
<div class="des_tit">
<ul>
<li class="current"><a href="#p_attribute">商品属性</a></li>
<li><a href="#p_details">商品详情</a></li>
<li><a href="#p_comment">商品评论</a></li>
</ul>
</div>
<div class="des_con" id="p_attribute">
<table border="0" align="center" style="width:100%; margin:10px auto;"
cellspacing="0" cellpadding="0">
<tr>
<td>商品名称：天然淡水珍珠</td>
<td>商品编号：1546211</td>
<td>品牌： 珠韵首饰</td>
<td>上架时间：2015-09-06 09:19:09</td>
</tr>
<tr>
<td>商品毛重：160.00g</td>
<td>商品产地：法国</td>
<td>珍珠形状：正圆</td>
<td> </td>
</tr>
<tr>
<td>镶嵌材质：纯银</td>
<td>款式：项链</td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<!--商品详情-->
<div class="des_border" id="p_details">
<div class="des_t">商品详情</div>
<div class="des_con">
<p align="center">
<img src="asa/de2.jpg"/><br/><br/>
<img src="asa/de3.jpg"/><br/><br/>
<img src="asa/de4.jpg"/><br/><br/>
<img src="asa/de5.jpg"/><br/><br/>
<img src="asa/de6.jpg"/><br/><br/>
<img src="asa/de7.jpg"/><br/><br/>
<img src="asa/de8.jpg"/><br/><br/>
</p>
</div>
</div>
<!--商品评论-->
<div class="des_border" id="p_comment">
<div class="des_t">商品评论</div>
<table border="0" class="jud_tab" cellspacing="0" cellpadding="0">
<tr>
<td width="175" class="jud_per">
<p>80.0%</p>好评度
</td>
<td width="300">
<table border="0" style="width:100%;" cellspacing="0" cellpadding="0">
<tr>
<td width="90">好评<span color="#999999">（80%）</span></td>
<td><img src="asa/pl.gif" align="absmiddle"/></td>
</tr>
<tr>
<td>中评<span color="#999999">（20%）</span></td>
<td><img src="asa/pl.gif" align="absmiddle"/></td>
</tr>
<tr>
<td>差评<span color="#999999">（0%）</span></td>
<td><img src="asa/pl.gif" align="absmiddle"/></td>
</tr>
</table>
</td>
<td width="185" class="jud_bg">
购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论
</td>
<td class="jud_bg">您可对已购买商品进行评价<br/><a href="#"><img src="asa/btn_jud.gif"/></a></td>
</tr>
</table>
<table border="0" class="jud_list" style="width:100%; margin-top:30px;" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="160"><img src="asa/peo1.jpg" width="20" height="20" align="absmiddle"/> 向死而生
</td>
<td width="180">
颜色分类：<font color="#999999">粉色</font> <br/>
型号：<font color="#999999">43cm</font>
</td>
<td>
产品很好，香味很喜欢，必须给赞。 <br/>
<font color="#999999">2015-09-24</font>
</td>
</tr>
<tr valign="top">
<td width="160"><img src="asa/peo2.jpg" width="20" height="20" align="absmiddle"/> 就是这么想的
</td>
<td width="180">
颜色分类：<font color="#999999">粉色</font> <br/>
型号：<font color="#999999">43cm</font>
</td>
<td>
送朋友，她很喜欢，大爱。 <br/>
<font color="#999999">2015-09-24</font>
</td>
</tr>
<tr valign="top">
<td width="160"><img src="asa/peo3.jpg" width="20" height="20" align="absmiddle"/> 墨镜墨镜
</td>
<td width="180">
颜色分类：<font color="#999999">白色</font> <br/>
型号：<font color="#999999">43cm</font>
</td>
<td>
大家都说不错<br/>
<font color="#999999">2015-09-24</font>
</td>
</tr>
<tr valign="top">
<td width="160"><img src="asa/peo4.jpg" width="20" height="20" align="absmiddle"/> 那*****洋
<br/><font color="#999999">（匿名用户）</font></td>
<td width="180">
颜色分类：<font color="#999999">白色</font> <br/>
型号：<font color="#999999">43cm</font>
</td>
<td>
下次还会来买，推荐。<br/>
<font color="#999999">2015-09-24</font>
</td>
</tr>
</table>
<div class="pages">
<a href="#" class="p_pre">上一页</a><a href="#" class="cur">1</a><a href="#">2</a><a
href="#">3</a>...<a href="#">20</a><a href="#" class="p_pre">下一页</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--网页底部-->
<footer class="center">
<!-- Footer -->
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="asa/b1.png" width="62" height="62"/></a>
<div><h2>正品保障</h2>正品行货 放心购买</div>
</li>
<li >
<a><img src="asa/b2.png" width="62" height="62"/></a>
<div><h2>满38包邮</h2>满38包邮 免运费</div>
</li>
<li>
<a><img src="asa/b3.png" width="62" height="62"/></a>
<div><h2>天天低价</h2>天天低价 畅选无忧</div>
</li>
<li>
<a><img src="asa/b4.png" width="62" height="62"/></a>
<div><h2>准时送达</h2>收货时间由你做主</div>
</li>
</ul>
</div>
<div class="b_nav">
<dl>
<dt><a href="#">新手上路</a></dt>
<dd><a href="#">售后流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">订购方式</a></dd>
<dd><a href="#">隐私声明</a></dd>
<dd><a href="#">推荐分享说明</a></dd>
</dl>
<dl>
<dt><a href="#">配送与支付</a></dt>
<dd><a href="#">货到付款区域</a></dd>
<dd><a href="#">配送支付查询</a></dd>
<dd><a href="#">支付方式说明</a></dd>
</dl>
<dl>
<dt><a href="#">会员中心</a></dt>
<dd><a href="#">资金管理</a></dd>
<dd><a href="#">我的收藏</a></dd>
<dd><a href="#">我的订单</a></dd>
</dl>
<dl>
<dt><a href="#">服务保证</a></dt>
<dd><a href="#">退换货原则</a></dd>
<dd><a href="#">售后服务保证</a></dd>
<dd><a href="#">产品质量保证</a></dd>
</dl>
<dl>
<dt><a href="#">联系我们</a></dt>
<dd><a href="#">网站故障报告</a></dd>
<dd><a href="#">购物咨询</a></dd>
<dd><a href="#">投诉与建议</a></dd>
</dl>
<div class="b_tel_bg">
<a href="#" class="b_sh1">新浪微博</a>
<a href="#" class="b_sh2">腾讯微博</a>
<p>
服务热线：<br/>
<span>400-123-4567</span>
</p>
</div>
<div class="b_er">
<div class="b_er_c"><img src="asa/er.gif" /></div>
<img src="asa/ss.png"/>
</div>
</div>
<div class="btmbg">
<div class="btm">
备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 ,
Technical Support: Dgg Group <br/>
<img src="asa/b_1.gif"/>
<img src="asa/b_2.gif"/>
<img src="asa/b_3.gif"/>
<img src="asa/b_4.gif"/>
<img src="asa/b_5.gif"/>
<img src="asa/b_6.gif"/>
</div>
</div>
<!--Footer -->
</footer>
</body>
</html>
《css》
*{
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 25px;
color: #555555;
margin: 0 auto;
}
a {
color: #555555;
text-decoration: none;
}
a:hover {
color: #ff4e00;
}
img {
border: 0;
}
ul, li, dl, dt, dd {
list-style: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear:after{
content: '';
display: block;
clear: both;
}
.center{
width: 1200px;
margin: 0 auto;
}
.fav_t {
height: 28px;
line-height: 28px;
overflow: hidden;
background-color: #f6f6f6;
font-size: 14px;
padding-left: 10px;
border-bottom: 1px solid #eaeaea;
}
.pro_des {
width: 520px;
height: 490px;
overflow: hidden;
float: left;
display: inline;
margin-left: 30px;
}
.des_name {
height: 50px;
line-height: 25px;
overflow: hidden;
color: #888888;
font-size: 14px;
}
.des_name p {
color: #3e3e3e;
font-size: 18px;
font-weight: bold;
margin: 0;
padding: 0;
}
.des_price {
height: 64px;
line-height: 32px;
overflow: hidden;
margin-top: 25px;
margin-bottom: 20px;
}
.des_price b {
color: #ff3c3c;
font-size: 18px;
}
.des_price span {
font-size: 14px;
}
.des_choice {
line-height: 40px;
overflow: hidden;
color: #888888;
}
.des_choice ul li {
height: 28px;
line-height: 28px;
overflow: hidden;
font-size: 14px;
text-align: center;
float: left;
display: inline;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 2px;
padding: 0 15px;
border: 1px solid #cccccc;
cursor: pointer;
position: relative;
}
.des_choice ul li:hover {
height: 26px;
line-height: 26px;
padding: 0 14px;
overflow: hidden;
border: 2px solid #ff3c3c;
}
.des_choice ul li .ch_img {
width: 18px;
height: 18px;
overflow: hidden;
background: url(../xiangmu/asa/ch.png) no-repeat center top;
position: absolute;
right: 0;
bottom: 0;
display: none;
}
.des_choice ul li.checked {
height: 26px;
line-height: 26px;
padding: 0 14px;
overflow: hidden;
border: 2px solid #ff3c3c;
}
.des_choice ul li.checked .ch_img {
display: block;
}
.des_share {
height: 60px;
overflow: hidden;
margin-top: 25px;
}
.des_share .d_sh {
width: 68px;
height: 27px;
line-height: 27px;
background: url(../xiangmu/asa/sh.png) no-repeat 12px 5px;
text-indent: 32px;
float: left;
border: 1px solid #FFF;
cursor: pointer;
position: relative;
}
.des_share .d_sh .d_sh_bg {
width: 176px;
height: 28px;
overflow: hidden;
border: 1px solid #eaeaea;
position: absolute;
left: 0;
top: 27px;
display: none;
}
.des_share .d_sh .d_sh_bg a {
overflow: hidden;
text-indent: 0;
float: left;
margin-left: 10px;
margin-top: 6px;
}
.des_share .d_sh:hover {
border: 1px solid #eaeaea;
}
.des_share .d_sh:hover .d_sh_bg {
display: block;
}
.des_share .d_care {
height: 27px;
line-height: 27px;
overflow: hidden;
background: url(../xiangmu/asa/care.png) no-repeat left center;
float: left;
display: inline;
margin-left: 50px;
padding-left: 22px;
}
.des_join {
height: 45px;
overflow: hidden;
margin-top: 20px;
}
.j_a {
width: 78px;
height: 43px;
overflow: hidden;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #cccccc;
}
.n_ipt {
width: 56px;
height: 43px;
line-height: 43px \9;
background: none;
color: #555555;
font-size: 18px;
text-align: center;
float: left;
padding: 0;
border: 0;
}
.n_btn_1 {
width: 21px;
height: 21px;
overflow: hidden;
background: url(../xiangmu/asa/jia.gif) no-repeat center top;
float: right;
border: 0;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
cursor: pointer;
}
.n_btn_2 {
width: 21px;
height: 21px;
overflow: hidden;
background: url(../xiangmu/asa/jian.gif) no-repeat center top;
float: right;
border: 0;
border-left: 1px solid #cccccc;
cursor: pointer;
}
.s_brand {
width: 188px;
height: 188px;
overflow: hidden;
float: right;
border: 1px solid #eaeaea;
}
.s_brand_img {
width: 188px;
height: 132px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.s_brand_c {
height: 55px;
line-height: 55px;
overflow: hidden;
background-color: #f6f6f6;
font-size: 16px;
text-align: center;
}
.des_border {
overflow: hidden;
margin-bottom: 10px;
border: 1px solid #eaeaea;
}
.des_tit {
height: 28px;
background-color: #f6f6f6;
border-bottom: 1px solid #eaeaea;
position: relative;
}
.des_tit ul {
width: 100%;
height: 29px;
position: absolute;
left: 0;
top: 0;
}
.des_tit ul li {
width: 110px;
height: 29px;
line-height: 27px;
overflow: hidden;
font-size: 14px;
text-align: center;
float: left;
}
.des_tit ul li.current {
width: 109px;
height: 27px;
overflow: hidden;
background-color: #FFF;
border-right: 1px solid #FFF;
border-top: 2px solid #ff4e00;
}
.des_t {
height: 38px;
line-height: 38px;
overflow: hidden;
background-color: #f6f6f6;
color: #ff4e00;
font-size: 14px;
text-indent: 25px;
border-bottom: 1px solid #eaeaea;
border-top: 2px solid #ff4e00;
}
.team_list {
width: 160px;
height: 195px;
overflow: hidden;
float: left;
display: inline;
margin: 25px 30px;
}
.team_list .img {
width: 160px;
height: 140px;
overflow: hidden;
}
.team_list .name {
width: 160px;
height: 25px;
line-height: 25px;
overflow: hidden;
}
.team_list .price {
height: 25px;
line-height: 25px;
overflow: hidden;
color: #999999;
text-align: center;
text-transform: uppercase;
position: relative;
}
.team_list .price font {
color: #ff4e00;
font-size: 14px;
}
.team_list .price span {
font-size: 16px;
}
.team_list .price .checkbox {
width: 25px;
height: 20px;
overflow: hidden;
text-align: left;
position: absolute;
left: 0;
top: 4px;
}
.team_icon {
width: 25px;
height: 25px;
overflow: hidden;
float: left;
display: inline;
margin: 90px 0;
}
.team_sum {
width: 145px;
height: 125px;
overflow: hidden;
color: #ff4e00;
float: left;
display: inline;
margin-left: 20px;
margin-top: 50px;
}
.team_sum span {
font-size: 18px;
}
.sum_ipt {
width: 58px;
height: 23px;
line-height: 23px;
background: none;
color: #555555;
font-size: 16px;
text-align: center;
padding: 0;
margin: 5px auto 10px auto;
border: 1px solid #eaeaea;
}
.des_con {
overflow: hidden;
margin: 25px;
}
table.jud_tab {
height: 128px;
overflow: hidden;
margin: 25px 20px 0 20px;
border-collapse: collapse;
border: 1px solid #eaeaea;
}
.jud_per {
color: #ff4e00;
font-size: 14px;
text-align: center;
}
.jud_per p {
margin: 0;
padding: 0;
font-size: 34px;
line-height: 36px;
}
.jud_bg {
background: url(../xiangmu/asa/s_line.gif) no-repeat left center;
padding: 0 30px;
line-height: 22px;
}
table.jud_list tr td {
border-collapse: collapse;
border-bottom: 1px solid #eaeaea;
padding: 20px;
line-height: 22px;
}
#tsShopContainer {
width: 392px;
height: 495px;
float: left;
position: relative;
}
#tsShopContainer #tsImgS {
text-align: center;
width: 100%;
position: relative;
border: 1px solid #eaeaea;
}
#tsShopContainer #tsImgS a {
display: block;
text-align: center;
margin: 0 auto;
}
#tsShopContainer #tsImgS img {
border: 0;
width: 390px;
height: 390px;
}
#tsShopContainer #tsPicContainer {
width: 100%;
height: 90px;
position: relative;
margin-top: 10px;
}
#tsShopContainer #tsPicContainer #tsImgSArrL {
width: 15px;
height: 100%;
background: url(../xiangmu/asa/r_left.png) no-repeat left center;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#tsShopContainer #tsPicContainer #tsImgSArrR {
width: 15px;
height: 100%;
background: url(../xiangmu/asa/r_right.png) no-repeat right center;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
#tsShopContainer #tsPicContainer #tsImgSCon {
position: absolute;
top: 0;
left: 18px;
height: 90px;
overflow: hidden;
}
#tsImgSCon ul {
width: 100%;
overflow: hidden;
}
#tsImgSCon li {
width: 90px;
float: left;
cursor: pointer;
}
#tsImgSCon li img {
padding: 2px;
margin: 1px;
border: 1px solid #eaeaea;
display: block;
width: 79px;
height: 79px;
}
#tsImgSCon li.tsSelectImg img {
border: 3px solid #ff4e00;
padding: 1px;
margin: 0;
}
.a {
width: 100%;
min-width: 1200px;
height: 35px;
line-height: 35px;
background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
}
.sou{
margin-left: 50px;
}
.top_right{
margin-right: 50px;
}
.s_city_b {
width: 150px;
height: 35px;
float: left;
}
.ss {
/*width: 225px;*/
height: 35px;
float: left;
}
.ss_list {
height: 35px;
background: url(../xiangmu/asa/t_arrow.gif) no-repeat right center;
float: left;
margin-left: 10px;
padding-right: 15px;
position: relative;
}
.ss_list:hover .ss_list_bg {
display: block;
}
.ss_list_bg {
width: 116px;
overflow: hidden;
position: absolute;
left: 50%;
top: 29px;
margin-left: -58px;
z-index: 900;
display: none;
}
.ss_list_c {
overflow: hidden;
background-color: #FFF;
margin-top: 6px;
padding: 10px 0;
border: 1px solid #cdcdcd;
}
.ss_list_c ul li {
height: 25px;
line-height: 25px;
overflow: hidden;
text-align: center;
}
.s_sh {
width: 55px;
height: 35px;
overflow: hidden;
float: left;
}
.s_sh a {
width: 20px;
height: 35px;
line-height: 35px;
overflow: hidden;
float: left;
display: inline;
margin: 0 3px;
text-indent: -9999em;
}
.s_sh a.sh1 {
background: url(../xiangmu/asa/sh1.png) no-repeat center 8px;
}
.s_sh a.sh2 {
background: url(../xiangmu/asa/sh2.png) no-repeat center center;
}
/*头部，logo和搜索*/
.top {
width: 1200px;
height: 140px;
}
.logo {
width: 207px;
height: 72px;
overflow: hidden;
float: left;
display: inline;
margin-top: 40px;
margin-left: 60px;
box-sizing: border-box;
}
.search {
width: 520px;
height: 65px;
overflow: hidden;
float: left;
display: inline;
margin-left: 100px;
margin-top: 50px;
}
.s_ipt {
width: 408px;
height: 40px;
line-height: 36px;
overflow: hidden;
color: #555555;
font-size: 14px;
float: left;
padding: 0 10px;
border: 2px solid #ff3c3c;
border-right: 0;
}
.s_btn {
width: 90px;
height: 40px;
line-height: 40px;
background-color: #ff3c3c;
color: #FFF;
font-size: 16px;
text-align: center;
float: left;
border: 0;
cursor: pointer;
}
.search a {
margin-right: 12px;
display: inline-block;
}
.i_car {
width: 120px;
height: 38px;
line-height: 38px;
background: #f6f6f6 url(../xiangmu/asa/car.png) no-repeat 10px center;
float: right;
margin-top: 50px;
border: 1px solid #d9d9d9;
position: relative;
}
.car_t {
width: 80px;
height: 38px;
overflow: hidden;
font-size: 14px;
margin-left: 38px;
cursor: pointer;
padding-left: 10px;
}
.car_t span {
color: #ff3c3c;
}
.i_car:hover .car_bg {
display: block;
}
.car_bg {
width: 283px;
overflow: hidden;
background-color: #FFF;
border: 1px solid #d9d9d9;
position: absolute;
right: -1px;
top: 38px;
z-index: 900;
display: none;
}
扫一扫
1617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
