极客观点
项目管理
HarmonyOS
大屏幕的时候还是好的。
断点过后开始右侧有空白。可视区越小，空白就越大……
求解救啊！
以下为HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>100du</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--[if lte IE8]>
<p>你的浏览器太老了 请到<a href="http://browsehappy.com">这里</a>升级</p>
<![endif]-->
<header class="gradient">
<p class="city fl">
<em>切换城市：</em>
<a href="#" class="active">北京</a>
<a href="#">上海</a>
<a href="#">广州</a>
<a href="#">深圳</a>
<a href="#">长春</a>
</p>
<p class="link fr">
<a href="#" class="active">加盟100度</a>
<a href="#">店铺管理</a>
</p>
</header>
<!-- .................................................................................................................................. -->
<nav>
<ul class="nav_1 fl">
<li><a href="#" class="bg1"></a>美食</li>
<li><a href="#" class="bg2"></a>夜店</li>
<li><a href="#" class="bg3"></a>购物</li>
<li><a href="#" class="bg4"></a>文化</li>
<li><a href="#" class="bg5"></a>休闲</li>
</ul>
<ul class="nav_2 fr">
<li><a href="#" class="bg6"></a>烧客空间</li>
<li><a href="#" class="bg7"></a>知道分子</li>
<li><a href="#" class="bg8"></a>白吃白拿</li>
<li><a href="#" class="bg9"></a>烧客论坛</li>
<li><a href="#" class="bg10"></a>企业俱乐部</li>
</ul>
<p><img src="img/logo.png"></p>
</nav>
<!-- .................................................................................................................................. -->
<div id="search">
<div class="bar">
<ul class="nav">
<li class="active">搜店</li>
<li>地址</li>
<li>优惠券</li>
<li>全文</li>
<li>视频</li>
</ul>
</div>
<div class="form">
<form action="#">
<input class="text" type="text" value="例如：好吃的东北菜~" />
<input class="btn" type="submit" value="" />
</form>
</div>
<p class="key_text">
<a href="#">金钱豹、</a>
<a href="#">大江南、</a>
<a href="#">湘水之珠、</a>
<a href="#">德瑀楼</a>
</br>
<a href="#">SOHO尚都、</a>
<a href="#">湘味楼...</a>
</p>
<div class="img"></div>
</div>
<!-- .................................................................................................................................. -->
<div class="warp clear">
<main class="fl">
<section class="clear">
<div class="options video fl">
<div class="video_title">
<h3>WHAT' HOT</h3>
<div><img src="img/video.gif"></div>
</div>
<video src="video/movie.ogg" controls="controls"></video>
<ul>
<li><a href="#">现场实录：杭州机场系统崩溃</a></li>
<li><a href="#">现场实录：杭州机场系机场系统崩溃</a></li>
<li><a href="#">现场实录：杭州系统崩溃</a></li>
<li><a href="#">现场实录：杭州机场系统崩溃</a></li>
<li><a href="#">现场实录：杭州机场系机场系统崩溃</a></li>
<li><a href="#">现场实录：杭州系统崩溃</a></li>
</ul>
</div>
<div class="content fr">
<ul class="nav">
<li class="active fl">
<h2>
<strong><em>HOT SHOP </em>红店铺</strong>
</h2>
</li>
<li class="gradient fr">
<h2>
<strong><em>EW SHOP </em>新开张</strong>
</h2>
</li>
</ul>
<div class="con">
<ul>
<li class="clear">
<img class="fl" src="img/content/hot_list_pic1.gif">
<p class="fr">
<strong><a href="#">御舟和涵珍园国际酒店</a></strong><br>
区域省：朝阳/CBD<br>
人均：180元<br>
人气：12321<br>
</p>
</li>
<li class="clear">
<img class="fl" src="img/content/hot_list_pic1.gif">
<p class="fr">
<strong><a href="#">御舟和涵珍园国际酒店</a></strong><br>
区域省：朝阳/CBD<br>
人均：180元<br>
人气：12321<br>
</p>
</li>
<li class="clear">
<img class="fl" src="img/content/hot_list_pic1.gif">
<p class="fr">
<strong><a href="#">御舟和涵珍园国际酒店</a></strong><br>
区域省：朝阳/CBD<br>
人均：180元<br>
人气：12321<br>
</p>
</li>
</ul>
<a class="more" href="#">
<img src="img/more.gif">
</a>
</div>
</div>
<!-- ................................................................. -->
</section>
<div class="main_ad">
<img src="img/ad/ad1.jpg">
</div>
<section class="clear YODAY">
<div class="options fl today">
<div class="new_title">
<h2 class="lucky">
<strong>LUCKY YODAY</strong>
<span>每日活动</span>
<em>2016.6</em>
</h2>
</div>
<div class="con clear">
<div class="img fl">
<span class="mask"></span>
<img src="img/content/today1.gif">
</div>
<div class="fr text">
<h2>
<em>02</em>
<em>11</em>
<span>本日主题：电商网站</span>
</h2>
<p>迟到的荣誉——啦啦啦，现在还写电商网站，红烧肉红烧肉~~</p>
</div>
</div>
<div class="calendar">
<h2>
<span>MON</span>
<span>TUE</span>
<span>WED</span>
<span>THU</span>
<span>FRI</span>
<span>SAT</span>
<span>SUN</span>
</h2>
<ol>
<li class="normal">29</li>
<li class="normal">30</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21<img class="active" src="img/content/today1.gif" alt="" /></li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25<img class="img" info="迟到的荣誉——啦啦啦，现在还写电商网站，呃好吧，没词儿了~~" src="img/content/today2.gif" alt="" /></li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29<img class="img" info="气质美女，陪谁去过明天的情人节？" src="img/content/hot10.gif" alt="" /></li>
<li>30<img class="img" info="帅哥是谁？陪谁去过情人节？" src="img/content/hot11.gif" alt="" /></li>
<li>31</li>
<li class="normal">1</li>
<li class="normal">2</li>
<li class="normal">3</li>
<li class="normal">4</li>
<li class="normal">5</li>
<li class="normal">6</li>
<li class="normal">7</li>
<li class="normal">8</li>
<li class="normal">9</li>
</ol>
</div>
<div class="today_info" style="display: none;">
<img class="fl" src="img/content/today2.gif">
<div class="fr">
<h2><strong>MON</strong>本日主题</h2>
<p>迟到的荣誉——啦啦啦，现在还写电商网站，红烧肉红烧肉~~</p>
</div>
<span></span>
</div>
</div>
<div class="options fr">
<div class="new_title">
<h2 class="recommdne">
<strong>RECOMMDNE</strong>
<span>精彩推荐</span>
</h2>
</div>
<div class="pic_tab">
<ul>
<li><a href="#"><img src="img/content/img1.gif"></a></li>
<li style="display: none;"><a href="#"><img src="img/content/img2.gif"></a></li>
<li style="display: none;"><a href="#"><img src="img/content/img3.gif"></a></li>
</ul>
<ol>
<li class="active"><img src="img/content/img1.gif"></li>
<li><img src="img/content/img2.gif"></li>
<li><img src="img/content/img3.gif"></li>
</ol>
<p>爸爸去哪啦！</p>
</div>
<ul class="recommend_list">
<li>
<em><img src="img/content/recommend_list1.gif"></em>
<a href="#">老店换新颜，丰泽园野重张亮相...</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list2.gif"></em>
<a href="#">生活中哪些商品的包装有缺陷呢</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list1.gif"></em>
<a href="#">老店换新颜，丰泽园野重张亮相...</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list2.gif"></em>
<a href="#">生活中哪些商品的包装有缺陷呢</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list1.gif"></em>
<a href="#">老店换新颜，丰泽园野重张亮相...</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list2.gif"></em>
<a href="#">生活中哪些商品的包装有缺陷呢</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list1.gif"></em>
<a href="#">老店换新颜，丰泽园野重张亮相...</a>
<span>14/02/17</span>
</li>
<li>
<em><img src="img/content/recommend_list2.gif"></em>
<a href="#">生活中哪些商品的包装有缺陷呢</a>
<span>14/02/17</span>
</li>
</ul>
</div>
</section>
<section class="clear">
<div class="content fl">
<ul class="nav">
<li class="active fl">
<h2>
<strong><em>SUBWAY </em>地铁交通</strong>
</h2>
</li>
<li class="gradient fr">
<h2>
<strong><em>MAP </em>生活圈</strong>
</h2>
</li>
</ul>
<div class="con">
<img class="con_img" src="img/content/123.gif">
</div>
</div>
<div class="options fr">
<div class="bbs">
<h2>
<strong><em>BBS </em>论坛</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
<ol>
<li class="active">
<em>阿瑞斯</em>
<b>ONE</b>
<img src="img/content/bbs_img1.gif">
<span>01</span>
<a href="#">保证你没见过的古怪餐厅</a>
<strong>世说新语</strong>
</li>
<li>
<em>阿瑞斯</em>
<b>TWO</b>
<img src="img/content/bbs_img1.gif">
<span>02</span>
<a href="#">红烧肉红烧肉红烧肉红烧肉</a>
<strong>世说新语</strong>
</li>
<li>
<em>阿瑞斯</em>
<b>THREE</b>
<img src="img/content/bbs_img1.gif">
<span>03</span>
<a href="#">地三鲜地三鲜地三鲜地三鲜</a>
<strong>世说新语</strong>
</li>
<li>
<em>阿瑞斯</em>
<b>FOUR</b>
<img src="img/content/bbs_img1.gif">
<span>04</span>
<a href="#">小鸡蘑菇小鸡蘑菇小鸡蘑菇</a>
<strong>世说新语</strong>
</li>
<li>
<em>阿瑞斯</em>
<b>FIVE</b>
<img src="img/content/bbs_img1.gif">
<span>05</span>
<a href="#">电商网站电商网站电商网站</a>
<strong>世说新语</strong>
</li>
<li>
<em>阿瑞斯</em>
<b>SIX</b>
<img src="img/content/bbs_img1.gif">
<span>06</span>
<a href="#">鱼鱼鱼鱼鱼鱼鱼鱼鱼鱼鱼</a>
<strong>世说新语</strong>
</li>
<li>
<em>阿瑞斯</em>
<b>SEVEN</b>
<img src="img/content/bbs_img1.gif">
<span>07</span>
<a href="#">烤冷面烤冷面烤冷面烤冷面</a>
<strong>世说新语</strong>
</li>
</ol>
</div>
</div>
</section>
<!-- ................................................................. -->
<div class="main_ad">
<img src="img/ad/ad1.jpg">
</div>
<section class="clear">
<div class=" know options fl">
<div>
<h2>
<strong><em>LIFESTYLE ADVICE </em>知道分子</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="tab">
<ul class="gradient">
<li class="active">有人在问</li>
<li>有人知道</li>
<li>热门问题</li>
</ul>
</div>
<ul class="list_section tabCon3">
<li class="title">
<span class="col1">标题</span>
<span class="col2">状态</span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>休闲</span>]</em> 老北京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico1.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>美食</span>]</em> 老北京一尊京一尊京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico2.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>休闲</span>]</em> 老北京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico1.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>美食</span>]</em> 老北京一尊京一尊京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico2.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>休闲</span>]</em> 老北京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico1.gif" alt="" /></span>
</li>
</ul>
<div class="soso">
<form action="#">
<strong>搜搜谁知道：</strong>
<input class="text" type="text" />
<input class="btn" type="submit" value="" />
</form>
</div>
</div>
<div class="options fr">
<div>
<h2>
<strong><em>HOT </em>红人烧客</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="hot_area">
<ul>
<li><img src="img/content/hot1.gif" alt="" /></li>
<li><img src="img/content/hot2.gif" alt="" /></li>
<li class="area1">
<p>
用户名：性感宝贝<br />
区域：朝阳CBD<br />
人气：124987
</p>
<img src="img/content/hot3.gif" alt="" />
</li>
<li><img src="img/content/hot4.gif" alt="" /></li>
<li><img src="img/content/hot5.gif" alt="" /></li>
<li class="area2"><img src="img/content/hot6.gif" alt="" /></li>
<li class="area2"><img src="img/content/hot7.gif" alt="" /></li>
<li><img src="img/content/hot8.gif" alt="" /></li>
<li><img src="img/content/hot9.gif" alt="" /></li>
<li class="area2"><img src="img/content/hot10.gif" alt="" /></li>
<li class="area2"><img src="img/content/hot11.gif" alt="" /></li>
</ul>
</div>
</div>
</section>
<!-- ................................................................. -->
<section class="clear">
<div class="options fl option_help">
<div>
<h2>
<strong><em>HELP </em>在线帮助</strong>
</h2>
</div>
<div class="address clear">
<p>您有任何问题，都可以通过全国负费电话，或通过在线客服与我们联系！</p>
<ul>
<li class="phone fl">4006-100-516</li>
<li class="email fr" >100do.com@live.cn</li>
</ul>
</div>
<div class="clear help">
<dl class="fl">
<dt>用户帮助</dt>
<dd><a href="#">金币是什么</a></dd>
<dd><a href="#">怎样查看我的等级</a></dd>
<dd><a href="#">怎么赚积分</a></dd>
</dl>
<dl class="fr">
<dt>商户帮助</dt>
<dd><a href="#">如何成为明星商户</a></dd>
<dd><a href="#">邮件推广</a></dd>
<dd><a href="#">论坛推广方法</a></dd>
</dl>
</div>
</div>
<div class="options fr options_6">
<div>
<h2>
<strong><em>100DU IN THE MEDIA </em>媒体声音</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="media">
<li>
<a href="#"><img src="img/content/media1.gif" alt="1" /></a>
<p>日本最大的财经杂志《钻石周刊》对100度享乐网的报道</p>
</li>
<li>
<a href="#"><img src="img/content/media2.gif" alt="2" /></a>
<p>视频网站100度享乐网获得网络视听许可证</p>
</li>
<li>
<a href="#"><img src="img/content/media3.gif" alt="3" /></a>
<p>互联网上的视频橱窗</p>
</li>
<li>
<a href="#"><img src="img/content/media4.gif" alt="4" /></a>
<p>享乐主义的机会</p>
</li>
</div>
</div>
</section>
</main>
<!-- .................................................................................................................................. -->
<aside class="fr">
<div class="side_options login">
<div class="login">
<h2 class="gradient"><em>LOAD </em>登陆</h2>
<div class="form">
<form action="#">
<ul>
<li>
<span>用户名：</span>
<input class="text" type="text" />
<label>
<input type="checkbox" />
<strong>记住我</strong>
</label>
</li>
<li>
<span>密 码：</span>
<input class="text" type="password" />
<input class="btn" type="submit" value="登陆" />
</li>
</ul>
</form>
</div>
<p>
<a href="#">新用户注册</a>
<a href="#">忘记密码了</a>
</p>
</div>
</div>
<!-- ................................................................. -->
<div class="side_ad">
<img src="img/ad/ad2.jpg">
</div>
<div class="side_ad side_ad2">
<img src="img/ad/ad3.jpg">
</div>
<!-- ................................................................. -->
<div class="side_options">
<div>
<h2>
<strong><em>COUPONS </em>抢券</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="tab">
<ul class="gradient">
<li class="active">人气</li>
<li>推荐</li>
<li>最新</li>
</ul>
</div>
<div>
<ul class="list_section tabCon3">
<li class="title">
<span class="col1">标题</span>
<span class="col2">状态</span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>休闲</span>]</em> 老北京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico1.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>美食</span>]</em> 老北京一尊京</a>
</span>
<span class="col2"><img src="img/ico2.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>休闲</span>]</em> 老北京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico1.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>美食</span>]</em> 老北京一尊京</a>
</span>
<span class="col2"><img src="img/ico2.gif" alt="" /></span>
</li>
<li>
<span class="col1">
<a href="#"><em>[<span>休闲</span>]</em> 老北京一尊皇牛</a>
</span>
<span class="col2"><img src="img/ico1.gif" alt="" /></span>
</li>
</ul>
</div>
</div>
<!-- ................................................................. -->
<div class="side_options shop">
<div>
<h2>
<strong><em>SHOP </em>今日推荐</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div>
<ul class="pic_list">
<li class="clear">
<div class="fl img">
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div class="fr">
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</li>
<li class="clear">
<div class="fl img">
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div class="fr">
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</li>
<li class="clear">
<div class="fl img">
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div class="fr">
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</li>
<li class="clear">
<div class="fl img">
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div class="fr">
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</li>
</ul>
</div>
</div>
<!-- ................................................................. -->
<div class="side_options shop_360">
<div>
<h2>
<strong><em>360°SHOP </em>全景逛店</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="image">
<a href="#">
<img class="image" src="img/content/360.gif">
<span>CBD核心商圈尊崇典范</span>
</a>
</div>
</div>
<!-- ................................................................. -->
<div class="side_options sale">
<div>
<h2>
<strong><em>SHOP </em>折扣店</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="pic_warp">
<div class="clear pic">
<div class="fl img">
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div class="fr">
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</div>
</div>
<div>
<ul class="side_list">
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
<li><em>[<span>休闲</span>]  <a href="#"></em>东北菜可真好吃啊！</a></li>
</ul>
</div>
</div>
<!-- ................................................................. -->
<div class="side_options">
<div>
<h2>
<strong><em>COUPONS </em>最新加盟</strong>
<a href="#">
<img src="img/more.gif">
</a>
</h2>
</div>
<div class="coupons_pic">
<ul class="clear pic">
<li class="fl">
<div>
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div>
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</li>
<li class="fr">
<div>
<a href="#"><img src="img/content/pic1.gif"></a>
</div>
<div>
<h3><a href="#">汉莱国际美食百汇</a></h3>
<p>
口味：<a href="#">创意中餐</a><br>
区域：<a href="#">朝阳/CBD</a>
</p>
</div>
</li>
</ul>
</div>
<div>
<ul class="side_list">
<li><em>[<span>分享</span>]</em>  <a href="#">我为啥爱吃东北菜</a></li>
<li><em>[<span>分享</span>]</em>  <a href="#">我为啥爱吃东北菜</a></li>
<li><em>[<span>分享</span>]</em>  <a href="#">我为啥爱吃东北菜</a></li>
<li><em>[<span>分享</span>]</em>  <a href="#">我为啥爱吃东北菜</a></li>
<li><em>[<span>分享</span>]</em>  <a href="#">我为啥爱吃东北菜</a></li>
<li><em>[<span>分享</span>]</em>  <a href="#">我为啥爱吃东北菜</a></li>
</div>
</div>
</aside>
</div>
<!-- .................................................................................................................................. -->
<footer>
<a href="#">关于我们</a>|
<a href="#">联系我们</a>|
<a href="#">版权声明</a>|
<a href="#">加入我们</a>|
<a href="#">问题反馈</a>|
<a href="#">友情链接</a>|
<a href="#">网站地图</a>|
<a href="#">视频索引</a>|<br>
Copyright © 2008 www.100du.com 100度享乐网 版权所有
<span>京ICP证0843234号</span>
</footer>
</body>
</html>
以下是CSS
/*---------------样式重置---------------*/
body,h1,h2,h3,h4,p,dl,dd,ul,ol,form,input,textarea,th,td,select {
margin: 0;
padding: 0;
}
em {
font-style: normal;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: top;
}
input,textarea {
outline: none;
}
textarea {
resize: none;
overflow: auto;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.2rem;
font-family: "微软雅黑";
}
/*---------------公共样式---------------*/
.clear {
zoom: 1;
}
.clear:after {
content:'';
display: block;
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.gradient {
background: -webkit-linear-gradient(top, #FFF, #f8f8f8);
background: -o-linear-gradient(top, #FFF, #f8f8f8);
background: -moz-linear-gradient(top, #FFF, #f8f8f8);
background: -ms-linear-gradient(top, #888, #f8f8f8);
background: linear-gradient(top, #FFF, #f8f8f8);
}
/*---------------布局样式---------------*/
#search, .options, .side_options,footer {
border: 1px solid #dbdbdb;
border-radius: 6px;
}
.options,.main_ad,.side_options,.side_ad {
margin-bottom: 1rem;
}
/*---------整体布局--------*/
header {
height: 3rem;
border-radius: 0 0 6px 6px;
}
nav {
height: 100px;
position: relative;
width: 960px;
margin: 0 auto;
}
#search {
width: 99%;
height: 114px;
margin: 0 auto 1rem;
position: relative;
}
main {
width: 74%;
}
.options {
width: 45%;
padding: 0 1.3rem;
}
.content {
width: 49%;
}
.main_ad{
width: 100%;
height: 90px;
border-radius: 6px;
overflow: hidden;
background: #000;
}
aside {
width: 25%;
}
.side_ad {
height: 90px;
border-radius: 6px;
overflow: hidden;
}
.side_ad img {
width: 100%;
}
.side_ad2 {
height: 180px;
}
.side_options {
position: relative;
padding-bottom: 10px;
}
footer {
width: 99%;
height: 64px;
line-height: 2rem;
padding-top: 1.2rem;
background:#f9f9f9;
color:#767676;
text-align:center;
margin: 0 auto 3rem;
}
/*-------选项卡布局--------*/
.content .nav {
height: 34px;
}
.content .nav li {
width: 49%;
height: 33px;
border: 1px solid #dbdbdb;
border-bottom: none;
border-radius: 6px 6px 0 0 ;
}
.content .nav .active {
height: 34px;
background: #FFF;
position: relative;
z-index: 3;
}
.content .con {
border: 1px solid #dbdbdb;
border-radius: 0 0 6px 6px;
}
.content .con {
position: relative;
margin-bottom: 10px;
}
/*---------------私有样式---------------*/
/*-------header样式--------*/
header .city a, header .link a {
display: inline-block;
height: 18px;
line-height: 1.7rem;
padding: 0 10px;
border: 1px solid #e5e5e5;
border-radius: 4px;
box-shadow: 1px 1px 0 #ededed;
}
header .city a:hover, header .link a:hover {
background: #f1f1f1;
}
header em {
color: #666;
}
header .city {
padding: 5px 0 0 20px;
}
header .city a {
color: #999;
}
header .city .active {
color: #d60d03;
}
header .link {
padding-right: 20px;
line-height: 3rem;
}
header .link a {
color: #666;
}
header .link .active {
color: #d60d03;
}
/*-------nav样式--------*/
nav ul {
margin-top: 10px;
}
nav li {
float: left;
text-align: center;
}
nav li a {
display: block;
width: 66px;
margin: 0 auto;
padding-top: 50px;
background: url(../img/nav_bg.png) no-repeat;
color: #333;
}
nav p {
width: 223px;
height: 62px;
margin: 0 auto;
position: relative;
top: 10px;
}
nav li:hover {
color:#a70c01;
font-weight:bold;
}
.nav_1 {
margin-left: 11px;
}
.nav_2 {
margin-right: 11px;
}
.bg1 {
background-position:0 0;
}
.bg2 {
background-position:-66px 0;
}
.bg3 {
background-position:-132px 0;
}
.bg4 {
background-position:-198px 0;
}
.bg5 {
background-position:-264px 0;
}
.bg6 {
background-position:-330px 0;
}
.bg7 {
background-position:-396px 0;
}
.bg8 {
background-position:-462px 0;
}
.bg9 {
background-position:-528px 0;
}
.bg10 {
background-position:-594px 0;
}
.bg1:hover {
background-position:0 -70px;
}
.bg2:hover {
background-position:-66px -70px;
}
.bg3:hover {
background-position:-132px -70px;
}
.bg4:hover {
background-position:-198px -70px;
}
.bg5:hover {
background-position:-264px -70px;
}
.bg6:hover {
background-position:-330px -70px;
}
.bg7:hover {
background-position:-396px -70px;
}
.bg8:hover {
background-position:-462px -70px;
}
.bg9:hover {
background-position:-528px -70px;
}
.bg10:hover {
background-position:-594px -70px;
}
/*-------search样式--------*/
.bar {
width: 100%;
height: 64px;
background-color: #e21c01;
border: 1px solid #c40d0e;
border-radius: 6px;
box-shadow: 2px 2px 1px #d2d2d2;
position: relative;
top: 16px;
left: -1px;
}
.bar .nav {
position: relative;
top: -20px;
width: 410px;
left: 50%;
-webkit-transform: translate(-110%,0);
-ms-transform: translate(-110%,0);
transform: translate(-110%,0);
}
.bar .nav li {
float: left;
width: 78px;
height: 25px;
line-height: 2.3rem;
margin-right: 1px;
background-color: #fff;
border: 1px solid #f8d0bf;
border-bottom: none;
border-radius:6px 6px 0 0 ;
text-align: center;
font-size:14px;
position: relative;
left: 226px;
top: -7px;
cursor: pointer;
}
.bar .nav .active {
height: 26px;
border: 1px solid #e21c01;
top: -8px;
height: 27px;
background-color: #e21c01;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 3px rgba(0,0,0,0.25);
}
#search .form {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
transform: translate(-50%,0);
top:36px;
z-index:3;
}
#search .form .text {
width: 300px;
height: 22px;
line-height: 2rem;
padding: 0 12px; border:none;
background: #fff1ef;
border-radius:3px;
float:left;
margin-right: 10px;
font-size: 1rem;
font-family: '微软雅黑';
color: #ea7a7a;
box-shadow: inset 2px 2px 3px rgba(0,0,0,0.25);
}
#search .form .btn {
width:63px; height:26px;
border:none; background:url(../img/search_img.png) no-repeat -163px 0;
float:left;
cursor: pointer;
}
#search .key_text {
width:206px; color:#fff;
line-height:18px;
position:absolute;
top:30px;
right:36px; }
#search .key_text a {
color:#fff;
}
#search .key_text a:hover {
text-decoration:underline;
}
#search .img {
width: 163px;
height: 122px;
background:url(../img/search_img.png) no-repeat;
position:absolute;
left: 5%;
top:-3px;
z-index: 2;
}
/*-------tab样式--------*/
.tab {
height: 26px;
border-bottom: 1px solid #dadada;
margin-bottom: 20px;
}
.tab ul {
padding: 0 10px;
}
.tab li {
float: left;
height: 25px;
line-height: 2rem;
width: 33%;
border: 1px solid #dadada;
margin-left: -1px;
text-align: center;
border-radius: 4px 4px 0 0;
}
.tab ul .active {
border-bottom: 1px solid #fff;
background: #fff;
}
.side_options .tab {
height: 20px;
line-height: 2rem;
margin: 12px;
}
.side_options .tab ul {
padding: 0 6px;
}
.side_options .tab li {
width: 66px;
height: 19px;
}
.list_section li {
height: 27px;
line-height: 2.3rem;
border-top: 1px dotted #dadada;
background: url(../img/dot.gif) no-repeat 5px center;
vertical-align: middle;
}
.list_section li a {
float:left;
color:#333;
text-indent:14px;
}
.list_section li a:hover {
color:#d80000;
}
.list_section li a em {
color:#c3c3c3;
}
.list_section li a span {
color:#c75d61;
}
.list_section .col1, .list_section .col2, .list_section .col3 {
float:left;
}
.list_section .col2, .list_section .col3 {
text-align:center;
}
.list_section .title {
background:none;
color:#999;
border-top:none;
}
.list_section .title .col1 {
text-align:center;
}
.list_section .color {
color:#d80000;
}
.side_options .list_section {
margin: 0 12px;
}
.side_options .col1 {
width: 137px;
}
.side_options .col2 {
width: 35px;
}
.side_options .col3 {
width: 36px;
}
.options .col1 {
width: 273px;
}
.options .col2 {
width: 35px;
}
.options .col2 img {
position:relative; top: 7px;
}
/*-------main样式--------*/
main h2 {
line-height: 3rem;
font-size: 1rem;
color:#000;
position: relative;
}
main em {
font-family: "Arial";
color: #cc0d13;
}
main h2 a {
position: absolute;
top: 12px;
right: 0;
}
.nav h2 {
margin-left: 32px;
}
.nav strong {
font-weight: bold;
}
.video {
height: 418px;
}
.video_title {
height: 42px;
position: relative;
}
.video_title h3 {
font-weight: normal;
font-size: 18px;
font-family: "Arial";
color: #d90000;
background-color: #fff;
line-height: 2.6rem;
padding-top: 8px;
}
.video_title div {
height: 23px;
position: absolute;
top: 10px;
left: 120px;
}
video {
position: absolute;
z-index: 2;
}
.video ul {
margin-top: 260px;
padding-left: 84px;
background: url(../img/video.gif) no-repeat 0 -30px;
}
.video li {
text-indent: 14px;
background: url(../img/dot.gif) no-repeat 5px;
}
.video li a {
color: #4d4d4d;
}
.video li a:hover {
color: #e30000;
}
.content .con ul {
margin: 25px 15px;
width: 246px;
}
.content .con li {
padding-bottom: 28px;
}
.content .con li p {
color: #6e6e6e;
padding: 4px 0;
}
.content .con a {
font-weight: normal;
font-size: 12px;
color: #e30000;
display: inline-block;
}
.content .con a:hover {
text-decoration: underline;
}
.content .con .more {
position: absolute;
right: 16px;
bottom: 10px;
}
.content .con_img {
margin-left: 15px;
}
.new_title {
height: 70px;
position: relative;
margin-bottom: 8px;
}
.lucky {
background: url(../img/new_title_bg.gif) no-repeat right 0;
}
.new_title h2 {
position: absolute;
display: inline-block;
height: 70px;
width: 333px;
margin-bottom: 8px;
}
.new_title strong {
font-family: "Arial";
color: #ea2b31;
font-size: 12px;
line-height: 12px;
position: absolute;
top: 22px;
left: 10px;
font-weight: normal;
}
.new_title em {
font-family: "Arial";
font-size: 36px;
color: #ea2b31;
position: absolute;
top: 26px;
left: 113px;
}
.new_title span {
position: absolute;
top: 36px;
left: 10px;
font-size: 24px;
font-weight: normal;
}
.pic_tab {
width: 318px;
height: 191px;
background: #f8f8f8;
border-radius: 6px;
position: relative;
}
.pic_tab ul {
position: relative;
top: 12px;
left: 12px;
}
.pic_tab ol {
position: absolute;
top: 12px;
right: 12px;
}
.pic_tab ol li {
width: 54px;
margin-bottom: 13px;
border: 3px solid #fff;
}
.pic_tab ol img {
width: 54px;
height: 30px;
}
.pic_tab ol .active {
border: 3px solid #d6191d;
}
.pic_tab p {
line-height: 40px;
position: absolute;
left: 12px;
bottom: 0;
}
.recommend_list {
margin: 15px;
}
.recommend_list li {
height: 27px;
line-height: 26px;
position: relative;
}
.recommend_list li img {
position: relative;
top: 8px;
}
.recommend_list li em {
float: left;
}
.recommend_list li a {
float: left;
text-indent: 6px;
color: #454545;
}
.recommend_list li span {
color: #999;
float: right;
}
.recommend_list li a:hover {
text-decoration: underline;
}
.today {
position: relative;
}
.today .con {
padding: 16px 0;
border-top: 1px solid #f3f3f3;
}
.today .con .img {
width: 84px;
height: 84px;
position: relative;
}
.today .con .img img {
width: 84px;
height: 84px;
position: relative;
}
.today .con .img span {
display: inline-block;
width: 84px;
height: 84px;
background: url(../img/activity_bg.gif) no-repeat -373px 0;
position: absolute;
top: 0;
left: 0;
z-index: 4;
}
.today .text {
width: 204px;
}
.today .con .text em {
display: inline-block;
width: 25px;
line-height: 25px;
text-align: center;
background: url(../img/activity_bg.gif) no-repeat -348px 0;
}
.today .con p, .today_info p {
line-height: 18px;
color: #999;
}
.calendar h2 {
height: 34px;
line-height: 3rem;
text-align: center;
background: url(../img/adorn.gif) repeat-x;
word-spacing: 10px;
}
.calendar h2 span {
font-size: 1.1rem;
font-family: arial;
color: #666;
}
.calendar {
height: 320px;
}
.calendar li {
width: 40px;
height: 40px;
line-height: 4rem;
text-align: center;
float: left;
margin: 2px;
font-weight: bold;
color: #666;
background: #ededed;
font-family: arial;
position: relative;
}
.calendar .normal {
background: #f8f8f8;
color: #ccc;
}
.calendar .active {
width: 36px;
height: 36px;
border: 2px solid #d30408;
cursor: pointer;
}
.calendar .img {
width: 40px;
height: 40px;
cursor: pointer;
}
.calendar .active, .calendar .img {
position: absolute;
top: 0;
left: 0;
}
.today_info {
width: 320px;
height: 106px;
border: 1px solid #c0c0c0;
position: absolute;
left: 290px;
top: 330px;
background: #fff;
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}
.today_info div {
width: 200px;
height: 80px;
margin: 10px;
margin-left: 0;
}
.today_info img {
margin: 10px 14px;
border: 1px solid #c0c0c0;
}
.today_info strong {
color: #ccc;
font-size: 18px;
vertical-align: middle;
}
.today_info span {
width: 8px;
height: 14px;
overflow: hidden;
position: absolute;
top: 45px;
left: -8px;
background: url(../img/adorn.gif) no-repeat 0 -48px;
}
.recommdne {
background: url(../img/new_title_bg.gif) no-repeat right -70px;
}
.bbs ol {
padding-bottom: 16px;
}
.bbs li {
height: 30px;
line-height: 30px;
background: #f1f1f1;
border-radius: 6px;
margin-bottom: 4px;
}
.bbs li em, .bbs li b, .bbs li img {
display: none;
}
.bbs li a, .bbs li span {
float: left;
color: #333;
}
.bbs li span {
color: #d80000;
width: 45px;
text-indent: 10px;
font-weight: bold;
}
.bbs li strong {
float: right;
font-weight: normal;
padding-right: 24px;
color: #666;
}
.bbs .active em, .bbs .active b, .bbs .active img {
display: block;
}
.bbs .active {
height: 70px;
background: #ec1c16;
position: relative;
}
.bbs .active span, .bbs .active strong {
display: none;
}
.bbs .active em, .bbs .active b, .bbs .active img, .bbs .active a {
position: absolute;
}
.bbs .active em {
color: #fff;
top: 34px;
left: 70px;
}
.bbs .active a {
top: 8px;
left: 70px;
font-weight: bold;
color: #fff;
}
.bbs .active b {
font-size: 2rem;
color: #fff;
right: 4px;
bottom: -5px;
}
.bbs .active img {
top: 10px;
left: 10px;
}
.soso {
height:47px;
border-top:1px dotted #dadada;
padding:17px 0 0 10px;
}
.soso strong, .soso .text, .soso .btn {
float:left;
}
.soso strong {
color:#595959;
padding-top:3px;
}
.soso .text {
width:172px;
height:20px;
padding:0 4px;
border:1px solid #9c9c9c;
line-height:20px;
color:#9c9c9c;
}
.soso .btn {
width:24px;
height:25px;
background:url(../img/btn.gif);
border:none; margin-left:10px;
}
.hot_area {
height:278px;
}
.hot_area li {
margin:0 2px 2px 0;
float:left;
position:relative;
}
.hot_area li, .hot_area li img {
width:78px;
height:78px;
}
.hot_area .area1, .hot_area .area1 img {
width:156px; height:78px;
}
.hot_area .area2, .hot_area .area2 img {
width:77px;
height:78px;
}
.hot_area p {
width:144px;
height:66px;
padding:12px 0 0 12px;
line-height:18px;
background:rgba(0,0,0,0.5);
color:#fff;
position:absolute;
top:0;
left:0;
}
.option_help .address {
padding: 17px 0;
border-bottom: 1px solid #ededee;
}
.option_help .address p {
text-indent: 23px;
padding: 0 5px 14px;
}
.option_help ul {
width: 295px;
padding: 0 5px;
background-color: #777;
}
.option_help li {
padding-left: 24px;
background:url(../img/help.gif) no-repeat;
font-family: "Arial";
}
.phone {
font-size:16px;
font-weight:bold;
color:#b80000;
}
.email {
line-height: 2rem;
background-position: left -31px;
}
.help {}
.help dl {
margin: 20px 10px;
}
.help dt {
margin-bottom: 7px;
font-weight: bold;
}
.help dd {
line-height: 18px;
padding: 0 12px;
background: url(../img/dot.gif) no-repeat 5px;
}
.help a {
color: #000;
}
.help a:hover {
color: #e30000;
text-decoration: underline;
}
.media {
height: 205px;
padding-top: 14px;
}
.media li {
width: 318px;
height: 50px;
vertical-align: middle;
}
.media a {
float: left;
width: 100px;
}
.media p {
float: right;
width: 208px;
color: #333;
}
.media p:hover {
color: #e30000;
text-decoration: underline;
cursor: pointer;
}
/*-------侧边栏样式--------*/
aside h2{
text-indent: 12px;
line-height: 3rem;
font-size: 12px;
color:#000;
border-bottom:1px solid #dbdbdb;
}
aside em {
font-family: "Arial";
color: #cc0d13;
}
aside h2 a {
position: absolute;
top: 12px;
right: 12px;
}
.login {
height: 148px;
overflow: hidden;
padding-bottom: 0;
}
.login h2 {
text-indent: 12px;
color: #000;
font-size: 1rem;
line-height: 34px;
border-bottom: 1px solid #dbdbdb;
}
.login .form {
width: 214px;
padding: 15px 0 2px;
border-bottom: 1px solid #f2f2f2;
margin: 0 auto;
position: relative;
}
.login li {
height: 26px;
vertical-align: middle;
}
.login li span, .login li input, .login li strong {
float: left;
}
.login span {
float: left;
width: 58px;
color: #595959;
word-spacing: 7px;
}
.login .text {
float: left;
width: 87px;
height: 17px;
margin-right: 3px;
overflow: hidden;
border: 1px solid #dbdbdb;
background: #f7f7f7;
}
.login strong {
font-weight: normal;
padding-left: 3px;
}
.login .btn {
width: 54px;
height: 22px;
border: none;
background: #cb0000;
color: #fff;
font-family: '宋体';
font-size: 1rem;
font-weight: bold;
border-radius: 10px;
}
.login p {
line-height: 3rem;
text-align: center;
word-spacing: 20px;
}
.login p a {
padding-left: 14px;
background: url(../img/dot.gif) no-repeat 4px center;
color: #666;
}
.login p a:hover {
text-decoration: underline;
}
.shop .pic_list, .sale .pic_warp {
width: 216px;
padding-left: 12px;
}
.shop h3 a, .pic h3 a {
font-weight: normal;
font-size: 1rem;
color: #e30000;
}
.shop h3 a:hover, .pic h3 a:hover {
text-decoration: underline;
}
.shop .pic_list li {
padding: 10px 12px 10px 0;
border-bottom: 1px dotted #dadada;
}
.shop .pic_list img, .pic img {
border: 1px solid #dadada;
padding: 2px;
}
.shop .img img:hover, .pic img:hover {
border: 1px solid #e30000;
}
.shop .pic_list p, .pic p {
color: #999;
}
.shop .pic_list p a, .pic p a {
color: #666;
}
.shop .pic_list p a:hover,.pic p a:hover {
color: #e30000;
text-decoration: underline;
}
.shop_360 .image {
margin: 10px 12px;
}
.shop_360 span {
color: #000;
margin: 12px;
}
.shop_360 span:hover {
color: #e30000;
text-decoration: underline;
cursor: pointer;
}
.pic {
padding: 10px 12px 10px 0;
}
.side_list {
margin: 0 12px;
}
.side_list li {
width: 197px;
height: 27px;
line-height: 2.4rem;
border-top: 1px dotted #cbcbca;
padding-left: 17px;
background: url(../img/dot.gif) no-repeat 5px;
}
.side_list a {
color: #333;
}
.side_list a:hover {
color: #b80000;
}
.side_list span{
color: #c75d61;
}
.side_list em{
color: #c3c3c3;
}
.coupons_pic{
width: 234px;
}
.coupons_pic li {
padding-left: 12px;
}
/*-------页脚样式--------*/
footer a {
color:#454545; margin:0 6px;
}
footer a:hover {
text-decoration:underline;
}
footer span {
margin-left:10px;
}
/*----------------------------------中屏幕样式---------------------------------------*/
@media only screen and (max-width: 60rem) {
nav ul {
display: none;
}
aside {
display: none;
}
main {
width: 100%;
}
}
/*----------------------------------中屏幕样式---------------------------------------*/
@media only screen and (max-width: 30rem) {
}
chrome
html5
加个overflow：hidden 之前做开发遇到过