制作京东页面

在这次制作京东首页的过程中我学会了,定位的知识包括:{

position:absolute;//绝对定位;

position:relative;//相对定位;

position:fixed;//固定定位;

}

在运用定位的时候要保证“父相子绝”的原则,父亲元素绝对定位,孩子元素相对定位在主页面中放一个最大的div使他的宽和高都是100%;然后在在里面横向分割页面。设置div的宽为100%,设置定位为绝对定位,在里面的子元素设置相对定位,这样就可以实现页面的不变形,下面就是我的页面代码。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

* {

list-style: none;

text-decoration: none;

}

 

body, ul, li, div {

margin: 0;

padding: 0;

}

</style>

<link rel="stylesheet" type="text/css" href="css/iconfont.css">

<link rel="stylesheet" type="text/css" href="css/cc.css">

</head>

<body>

<!-- 固定不变的div -->

<div class="guding_all">

<div class="guding_1">

<a href="#"><img src="images/5b0bcaa2N59344dfe.png"

class="guding_img" /></a>

</div>

<div class="tiao"></div>

<div class="icon_weizhi">

<div class="icon_div">

<a href="#"><img src="icon/My.png" class="icon_img" /></a>

</div>

<div class="icon_div">

<a href="#"><img src="icon/Shopping1.png" class="icon_img" /></a>

</div>

<div class="icon_div">

<a href="#"><img src="icon/heart.png" class="icon_img" /></a>

</div>

<div class="icon_div">

<a href="#"><img src="icon/time.png" class="icon_img" /></a>

</div>

<div class="icon_div">

<a href="#"><img src="icon/LiaoTian.png" class="icon_img" /></a>

</div>

<div class="icon_div">

<a href="#"><img src="icon/animal.png" class="icon_img" /></a>

</div>

</div>

 

<div class="icon_weizhi_1">

<div class="icon_div">

<a href="#"><img src="icon/Up_Jiantou.png" class="icon_img" /></a>

</div>

<div class="icon_div">

<a href="#"><img src="icon/Work.png" class="icon_img" /></a>

</div>

</div>

</div>

 

 

 

 

 

 

 

<div class="all">

<div class="nav_top_all">

<div class="nav_top">

<img src="images/nav_top_618.png" alt="正在加载中。。。"

class="nav_top_img618" /> <img src="images/nav_top_background.jpg"

alt="正在加载中。。。" class="nav_top_img" /> <img

src="images/nav_top_button_1.png" alt="正在加载中。。。"

class="nav_top_img_1"> <img src="images/nav_top_button_2.png"

alt="正在加载中。。。" class="nav_top_img_2">

</div>

</div>

<!-- 超链接 -->

<div class="nav">

<div class="weizhi">

<div class="img_logo_jd">

<img class="img_logo_jd_img" src="images/logo_JD.gif"

alt="正在加载中。。。" />

</div>

<div class="nav_lianjie">

<div class="dingwei">

<i class="iconfont icon-location icon-color"></i>

<div class="beijing">北京</div>

</div>

<div class="nav_a">

<ul>

<li><a href="#" class="nav_ul_a ahover marleft">你好,请登录</a></li>

<li><a href="#" class="nav_ul_a ahover_red">免费注册</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a ahover">我的订单</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a ahover white">我的京东<img

src="images/xiajiaobiao.png" class="xiajiaobiao" /></a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a ahover">京东会员</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a ahover">企业采购</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a white">客户服务<img

src="images/xiajiaobiao.png" class="xiajiaobiao" /></a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a white">网站导航<img

src="images/xiajiaobiao.png" class="xiajiaobiao" /></a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a">手机京东</a><img

src="images/shangjiaobiao.png" class="shangjiaobiao"></li>

</ul>

</div>

</div>

</div>

</div>

<!-- 搜索那一层 -->

<div class="sousuo_all">

<div class="sousuo">

<div class="sousuo_sou">

 

<div class="sousuo_two">

<div class="sousuo_baobei_all">

<div class="sousuo_baobei">

<div class="sousuo_xiaoxiangji"></div>

</div>

<div class="sousuo_baobei_button">

<img src="images/sousuo.png" alt="正在加载中。。。" />

</div>

 

<div class="sousuo_nav_nei nav_a">

<ul>

<li><a href="#" class="nav_ul_a ahover jujia">居家享5折</a></li>

<li><a href="#" class="nav_ul_a ahover_red_1">京东电器</a></li>

<li><a href="#" class="nav_ul_a ahover">小米手机</a></li>

<li><a href="#" class="nav_ul_a ahover">爆款预约</a></li>

<li><a href="#" class="nav_ul_a ahover">超市越洋</a></li>

<li><a href="#" class="nav_ul_a ahover">中外名酒</a></li>

<li><a href="#" class="nav_ul_a ahover">3件7折</a></li>

<li><a href="#" class="nav_ul_a ahover">200减50</a></li>

<li><a href="#" class="nav_ul_a ahover">预约攻略</a></li>

</ul>

</div>

</div>

<div class="gouwuche">

<div class="guwuche_nei">

<div class="guwuche_tubiao">

<img src="images/gouwuche.png" class="gouwuche_img" />

</div>

<a href="#">我的购物车</a>

<div class="guwuche_tubiao_yuan">

<font>&nbsp;0 </font>

</div>

 

</div>

</div>

</div>

<div class="sousuo_erweima">

<a href="#"><img src="images/erweima.png" class="erweima_img"

alt="正在加载中。。。"></a>

</div>

</div>

</div>

<div class="sousuo_nav nav_a">

<ul>

<li><a href="#" class="nav_ul_a ahover jujia">秒杀</a></li>

<li><a href="#" class="nav_ul_a ahover">优惠券</a></li>

<li><a href="#" class="nav_ul_a ahover">PLUS会员</a></li>

<li><a href="#" class="nav_ul_a ahover">闪购</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a ahover">拍卖</a></li>

<li><a href="#" class="nav_ul_a ahover">京东服饰</a></li>

<li><a href="#" class="nav_ul_a ahover">京东超市</a></li>

<li><a href="#" class="nav_ul_a ahover">生鲜</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a ahover">全球购</a></li>

<li><a href="#" class="nav_ul_a ahover">京东金融</a></li>

</ul>

</div>

<div class="nav_gif">

<a href="#"><img src="images/5b029039N5bf38534.gif"

class="erweima_img" alt="正在加载中。。。"></a>

</div>

</div>

<!-- 用户信息那一层 -->

<div class="body_top">

<div class="body_top_neirong">

<div class="body_left">

<div class="body_left_a">

<ul>

<li>&nbsp;&nbsp;&nbsp;<a href="#">家用电器</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">手机</a>/<a href="#">运营商</a>/<a

href="#">数码</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">电脑</a>/<a href="#">办公</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">家居</a>/<a href="#">家具</a>/<a

href="#">家装</a>/<a href="#">厨具</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">男装</a>/<a href="#">女装</a>/<a

href="#">童装</a>/<a href="#">内衣</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">美妆</a>/<a href="#">个护清洁</a>/<a

href="#">宠物</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">女鞋</a>/<a href="#">箱包</a>/<a

href="#">钟表</a>/<a href="#">珠宝</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">男鞋</a>/<a href="#">运动</a>/<a

href="#">户外</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">房产</a>/<a href="#">汽车</a>/<a

href="#">汽车用品</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">母婴</a>/<a href="#">玩具乐器</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">食品</a>/<a href="#">酒类</a>/<a

href="#">生鲜</a>/<a href="#">特产</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a

href="#">农资绿植</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">医药保健</a>/<a href="#">计生情趣</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">图书</a>/<a href="#">音像</a>/<a

href="#">电子书</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">机票</a>/<a href="#">酒店</a>/<a

href="#">旅游</a>/<a href="#">生活</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">理财</a>/<a href="#">众筹</a>/<a

href="#">白条</a>/<a href="#">保险</a></li>

<li>&nbsp;&nbsp;&nbsp;<a href="#">安装</a>/<a href="#">维修</a>/<a

href="#">清洗保养</a></li>

</ul>

</div>

</div>

<div class="body_lunbotu">

<a class="a_hover" href="#"><img

src="images/5b04d2b6N42489667.jpg" alt="正在加载中。。。" /></a>

</div>

<div class="body_left_1 left_2">

<div class="body_left_top img-black">

<a class="a_hover" href="#"><img

src="images/5b07c5d1N2df7977d.jpg"></a>

</div>

<div class="body_left_top img-black">

<a class="a_hover" href="#"><img

src="images/5b07dc23Nc86f0259.jpg"></a>

</div>

<div class="body_left_top img-black">

<a class="a_hover" href="#"><img

src="images/5af922d5N31127e06.jpg"></a>

</div>

</div>

<div class="body_left_1 left_3">

<div class="body_right_top body_left_top">

<div class="right_top_tou">

<div class="right_touxiang">

<a class="touxiang" href="#"><img src="images/no_login.jpg"></a>

</div>

</div>

<div class="right_top_tou">

<div class="tou_p">

<p class="user_tip">Hi~欢迎来到京东!</p>

<p class="user_a">

<a href="#">登录</a><a href="#">注册</a>

</p>

</div>

<div class="tou_button">

<a href="#" class="xinrenfuli">新人福利</a> <a href="#"

class="plushuiyuan">PLUS会员</a>

</div>

 

</div>

</div>

<div class="body_right_center body_left_top">

 

<div class="nav_a lianjie_1">

<ul>

<li><a href="#" class="nav_ul_a b_biankuang">促销</a></li>

<li class="xian">|</li>

<li><a href="#" class="nav_ul_a b_biankuang">公告</a></li>

</ul>

<ul>

<li><a href="#" class="nav_ul_a ahover gengduo">更多</a></li>

</ul>

</div>

</div>

<div class="body_left_xinxi">

<ul>

<li><a href="#">畅游无界,1亿京豆发不停</a></li>

<li><a href="#">plus会员专享时尚范</a></li>

<li><a href="#">部分饰品低至大盘价</a></li>

<li><a href="#">女神好物鉴赏,畅享生活</a></li>

</ul>

<div class="xian"></div>

</div>

 

<div class="body_right_bottom body_left_top">

<div class="nav_a lianjie_1">

<ul>

<li><a href="#" class="nav_ul_a b_biankuang">话费</a></li>

<li><a href="#" class="nav_ul_a b_biankuang">机票</a></li>

<li><a href="#" class="nav_ul_a b_biankuang">酒店</a></li>

<li><a href="#" class="nav_ul_a b_biankuang">游戏</a></li>

</ul>

</div>

 

<div>

 

 

<div class="nav_a game_nav">

<ul>

<li><a href="#" class="nav_ul_a ahover">点卡</a></li>

<li><a href="#" class="nav_ul_a ahover">QQ</a></li>

<li><a href="#" class="nav_ul_a ahover">页游</a></li>

</ul>

 

</div>

 

<div>

<div class="game_div">

<div class="game_p">游戏</div>

<div class="game_sousuo dhover">游戏</div>

</div>

<div class="chongzhi">

<div class="chongzhi_money">面值</div>

<div class="chongzhi_number dhover">面值</div>

</div>

<div class="game_div">

<div class="game_zhenshizhi">¥0.00</div>

</div>

<div class="game_div">

<div class="game_erxuanyi">

<input type="radio" name="zhichong" checked="checked">直冲

<input type="radio" name="zhichong">卡密

</div>

 

</div>

<div class="game_div">

<div class="tou_button">

<a href="#" class="xinrenfuli kuaisuchongzhi">快速充值</a>

</div>

<div class="game_shipinyule">视频娱乐9.9</div>

</div>

</div>

</div>

 

</div>

 

 

</div>

</div>

</div>

<!-- 618主要物品那一层 -->

<div class="jingdongmiaosha">

<div class="jingdongmiaosha_neirong">

 

<div class="jishi">

<a href="#">

<div class="j_jingdongmiaosha_p j_p1">京东秒杀</div>

<div class="j_jingdongmiaosha_p j_p2">FLASH DEALS</div>

<div class="j_jingdongmiaosha_img"></div>

<div class="j_jingdongmiaosha_p j_p3">本场距离结束还剩</div>

<div class="j_jingdongmiaosha_div">

<div class="miaoshadaojishi">

<div class="hongxian"></div>

<p>00</p>

</div>

<div class="miaoshadaojishi">

<div class="hongxian"></div>

<p>00</p>

</div>

<div class="miaoshadaojishi">

<div class="hongxian"></div>

<p>00</p>

</div>

</div>

</a>

</div>

 

 

<div class="wupin">

<a href="#"><div class="wupin_left">

<img src="images/left.png" class="leftjiantou">

</div></a>

<div class="wupinsuozaidiv">

<a href="#">

<div class="wupin_neirong">

<a class="a_hover" href="#"><img

src="images/5ab4b0caN61eb3970.jpg" class="wupin_img"></a>

<div class="wupin_neirong_p">

<a href="#" class="wupin_neirong_a"><p>燕之坊 东北绿豆 1kg(无添加

可发豆芽 打豆浆 大豆 东北 五谷 杂粮 真空装 大米伴侣)</p></a>

</div>

<div class="jiage">

<div class="jiage_zong">

<div class="jiage_hong">¥ 99.9</div>

<div class="jiage_hui">

¥ <span>&nbsp;199.90&nbsp;</span>

</div>

</div>

 

</div>

</div>

</a>

</div>

 

 

<div class="wupinsuozaidiv">

<a href="#">

<div class="wupin_neirong">

<a class="a_hover" href="#"><img

src="images/5ab4b0caN61eb3970.jpg" class="wupin_img"></a>

<div class="wupin_neirong_p">

<a href="#" class="wupin_neirong_a"><p>燕之坊 东北绿豆 1kg(无添加

可发豆芽 打豆浆 大豆 东北 五谷 杂粮 真空装 大米伴侣)</p></a>

</div>

<div class="jiage">

<div class="jiage_zong">

<div class="jiage_hong">¥ 99.9</div>

<div class="jiage_hui">

¥ <span>&nbsp;199.90&nbsp;</span>

</div>

</div>

 

</div>

</div>

</a>

</div>

<div class="wupinsuozaidiv">

<a href="#">

<div class="wupin_neirong">

<a class="a_hover" href="#"><img

src="images/5ab4b0caN61eb3970.jpg" class="wupin_img"></a>

<div class="wupin_neirong_p">

<a href="#" class="wupin_neirong_a"><p>燕之坊 东北绿豆 1kg(无添加

可发豆芽 打豆浆 大豆 东北 五谷 杂粮 真空装 大米伴侣)</p></a>

</div>

<div class="jiage">

<div class="jiage_zong">

<div class="jiage_hong">¥ 99.9</div>

<div class="jiage_hui">

¥ <span>&nbsp;199.90&nbsp;</span>

</div>

</div>

 

</div>

</div>

</a>

</div>

 

 

<div class="wupinsuozaidiv right_button">

<a href="#"><div class="wupin_right">

<img src="images/right.png" class="leftjiantou">

</div></a> <a href="#">

<div class="wupin_neirong">

<a href="#" class="a_hover"><img

src="images/5ab4b0caN61eb3970.jpg" class="wupin_img"></a>

<div class="wupin_neirong_p">

<a href="#" class="wupin_neirong_a"><p>燕之坊 东北绿豆 1kg(无添加

可发豆芽 打豆浆 大豆 东北 五谷 杂粮 真空装 大米伴侣)</p></a>

</div>

<div class="jiage">

<div class="jiage_zong">

<div class="jiage_hong">¥ 99.9</div>

<div class="jiage_hui">

¥ <span>&nbsp;199.90&nbsp;</span>

</div>

</div>

 

</div>

</div>

</a>

</div>

<div class="wupinsuozaidiv">

<a href="#">

<div class="dingwei_1">

<div class="yuanquan">

<div class="yuanquan_1 hong"></div>

<div class="yuanquan_1"></div>

</div>

</div> <a class="a_hover" href="#"><img

src="images/5b0c2803Ncce3d8f0.jpg" class="wupin_img_1"></a>

 

</a>

</div>

 

 

 

</div>

 

</div>

</div>

<div class="zong_niupai">

<div class="lama">

<div class="lama_baby">

<a href="#"><div class="zhanwei"></div></a>

<div class="lama_div_zong">

<div class="diyihang_div_1">

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

 

</div>

 

<div class="diyihang_div_1">

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5b03eb92N25432a90.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a class="a_hover" href="#"><img

src="images/5b03eb92N25432a90.jpg" class="div_img" /></a>

</div>

 

</div>

 

<div class="diyihang_div_2">

<div class="diyihang_div">

<a href="#"><img src="images/5afbecaeN4c195319.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5afbecaeN4c195319.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5afbecaeN4c195319.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5afbecaeN4c195319.jpg"

class="div_img" /></a>

</div>

<div class="diyihang_div">

<a href="#"><img src="images/5afbecaeN4c195319.jpg"

class="div_img" /></a>

</div>

 

 

</div>

 

 

 

</div>

</div>

</div>

</div>

 

<div class="shishangdaren_jiadian">

<div class="shishangdaren_neirong">

 

<div class="neirong_1 neirong">

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">排行榜</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">专属你的购物指南</a></span>

</div>

 

<div class="paihangbang_nav">

<div class="nav_div_panghangbang">

<a href="#" class="nav_div_a ahover">大 家 电</a>

</div>

<div class="nav_div_panghangbang">

<a href="#" class="nav_div_a ahover">手机通讯</a>

</div>

<div class="nav_div_panghangbang">

<a href="#" class="nav_div_a ahover">生活电器</a>

</div>

<div class="nav_div_panghangbang">

<a href="#" class="nav_div_a ahover">厨房小电</a>

</div>

<div class="nav_div_panghangbang">

<a href="#" class="nav_div_a ahover">饮料冲调</a>

</div>

</div>

<div class="zhuyaowupin">

<div class="wupin_zhuyaowupin">

<a class="a_hover" href="#"><img

src="images/59b857f2N6ca75622.jpg" class="wupin_bingxiang" /></a>

<div class="img_right_1">1</div>

<div class="img_right">

<span><a href="#" class="ahover">Apple iPhone 8 Plus

(A1899) 64GB 金色 移动联通4G手机</a></span>

</div>

</div>

 

<div class="wupin_zhuyaowupin">

<a class="a_hover" href="#"><img

src="images/59b857f2N6ca75622.jpg" class="wupin_bingxiang" /></a>

<div class="img_right_1" style="color: #ed713d;">2</div>

<div class="img_right">

<span><a href="#" class="ahover">Apple iPhone 8 Plus

(A1899) 64GB 金色 移动联通4G手机</a></span>

</div>

</div>

 

<div class="wupin_zhuyaowupin">

<a class="a_hover" href="#"> <img

src="images/59b857f2N6ca75622.jpg" class="wupin_bingxiang" /></a>

<div class="img_right_1" style="color: #feb185;">3</div>

<div class="img_right">

<span><a href="#" class="ahover">Apple iPhone 8 Plus

(A1899) 64GB 金色 移动联通4G手机</a></span>

</div>

</div>

<div class=" class_xian"></div>

<div>

<div class="yuanquan">

<div class="yuanquan_1 daxiao_yuanquan hong"></div>

<div class="yuanquan_1 daxiao_yuanquan"></div>

</div>

</div>

</div>

</div>

 

 

 

 

<div class="neirong_2 neirong">

<!-- 排行榜 -->

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">会买专辑</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">甄选优质好物</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div">

<div class="div_a_rl ahover_img">

<a href="#" class="tubiao"> <img src="images/left.png"

class="img_rl">

</a>

</div>

</div>

 

<div class="lunbo_center">

<div class="shoubiao">

<a class="a_hover" href="#"><img

src="images/59538819Nc662952a.jpg" class="shoubiao_img" /></a>

<div class="lunbo_san">

 

<a class="a_hover" href="#"><img

src="images/589e8449Nc720b12f.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/589e8449Nc720b12f.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/589e8449Nc720b12f.jpg" class="san_one_img" /></a>

 

</div>

<div class="shoubiao_guanggao">

<span><a href="#">脑容量不够用,手表竟然可以这样设计</a></span>

</div>

 

<div class="span_guanggao">

<a href="#">男人不仅仅是靠颜值征服女人,作为一个潮男,你需要各种个性十足的装备展现你魅力的一面,而手表是大多数人的经典饰品,如何在经典上强过别人,让女神为你垂青呢?下面给大家推荐的手表设计非常新颖,快戴上它出去帅气撩妹吧。</a>

</div>

</div>

</div>

 

<div class="right_div">

<div class="div_a_rl">

<a href="#" class="tubiao"> <img src="images/right.png"

class="img_rl " />

</a>

</div>

</div>

 

 

</div>

 

<div>

<div class="yuanquan yuan_san">

<div class="yuanquan_1 daxiao_yuanquan hong"></div>

<div class="yuanquan_1 daxiao_yuanquan"></div>

<div class="yuanquan_1 daxiao_yuanquan"></div>

</div>

</div>

 

</div>

<div class="neirong_3 neirong">

 

 

 

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">领券中心</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">前往领券中心</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

 

<div class="lunbo_center">

<a class="lingquan" href="#">

<div class="shoubiao_1">

 

<div class="lingquan_wupin">

<a class="a_hover" href="#"><img

src="images/5b0e6a9cN323f9817.jpg" class="linquan_img" /></a>

</div>

<div class="lingquan_money">

<div class="lingquan_money_1">

<b>¥</b><span>50</span>

</div>

<div class="lingquan_money_2 linquan_left">

<span>满980可用</span>

</div>

<div class="lingquan_money_3 linquan_left">

<span>部分自营手机/配件商品</span>

</div>

<div class="chaolianjie_shuzhe">

<a href="#"> 更多手机数码卷</a>

</div>

</div>

<div class="xiaoyuanquan_zong"></div>

</div>

</a> <a class="lingquan" href="#">

<div class="shoubiao_1">

 

<div class="lingquan_wupin">

<a class="a_hover" href="#"><img

src="images/5b0e6a9cN323f9817.jpg" class="linquan_img" /></a>

</div>

<div class="lingquan_money">

<div class="lingquan_money_1">

<b>¥</b><span>50</span>

</div>

<div class="lingquan_money_2 linquan_left">

<span>满980可用</span>

</div>

<div class="lingquan_money_3 linquan_left">

<span>部分自营手机/配件商品</span>

</div>

<div class="chaolianjie_shuzhe">

<a href="#"> 更多手机数码卷</a>

</div>

</div>

<div class="xiaoyuanquan_zong"></div>

</div>

</a> <a class="lingquan" href="#">

<div class="shoubiao_1">

 

<div class="lingquan_wupin">

<a class="a_hover" href="#"><img

src="images/5b0e6a9cN323f9817.jpg" class="linquan_img" /></a>

</div>

<div class="lingquan_money">

<div class="lingquan_money_1">

<b>¥</b><span>50</span>

</div>

<div class="lingquan_money_2 linquan_left">

<span>满980可用</span>

</div>

<div class="lingquan_money_3 linquan_left">

<span>部分自营手机/配件商品</span>

</div>

<div class="chaolianjie_shuzhe">

<a href="#"> 更多手机数码卷</a>

</div>

</div>

<div class="xiaoyuanquan_zong"></div>

<div class="xiaoyuanquan_zong_1"></div>

</div>

</a>

 

</div>

 

<div class="right_div"></div>

 

 

</div>

 

<div>

<div class="yuanquan yuan_er">

<div class="yuanquan_1 daxiao_yuanquan hong"></div>

<div class="yuanquan_1 daxiao_yuanquan"></div>

 

</div>

</div>

 

 

 

 

 

</div>

 

</div>

 

 

</div>

 

 

 

<div class="shishangdaren_jiadian">

<div class="shishangdaren_neirong">

 

<div class="neirong_1 neirong">

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">觅me</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">探索生活</a></span>

</div>

 

 

 

<div class="lunbo_san_1">

<div class="left_div">

<div class="div_a_rl ahover_img">

<a href="#" class="tubiao"> <img src="images/left.png"

class="img_rl">

</a>

</div>

</div>

 

<div class="lunbo_center">

<div class="max_img">

<a class="a_hover" href="#"><img

src="images/5b0afa19N3498a882.jpg" class="shoubiao_img" /></a>

</div>

 

<div class="shoubiao">

<!-- <a class="a_hover" href="#"><img src="images/59538819Nc662952a.jpg" class="shoubiao_img"/></a> -->

 

<div class="shoubiao_guanggao">

<span><a href="#">小资生活每一天,进口食品给你美好生活</a></span>

</div>

 

<div class="span_guanggao">

<a href="#">很多的对于零食的热爱真的是永无止境的,自己独自一人在家的时候总是想要找一点点吃的来满足自己,因为就算是一个人的生活也希望能够有品质,就算是零食也希望能够精致一点,独自一人应该生活的更加优雅,尤其是身为吃货的人,经常会因为吃什么而烦恼,不知道有哪些零食更加美味,能够更好的满足自己而担忧,一人在家追剧的时候发现没有什么好吃的零食,连电视剧都感觉没有意义了。</a>

</div>

</div>

</div>

 

<div class="right_div">

<div class="div_a_rl">

<a href="#" class="tubiao"> <img src="images/right.png"

class="img_rl " />

</a>

</div>

</div>

 

<!-- 线 -->

<div class=" class_xian yuanquan_me"></div>

 

<div class="yuanquan">

<div class="yuanquan_1 daxiao_yuanquan hong"></div>

<div class="yuanquan_1 daxiao_yuanquan"></div>

</div>

 

 

</div>

 

</div>

 

 

 

 

<div class="neirong_2 neirong">

<!-- 排行榜 -->

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">会买专辑</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">发现品质生活</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

<!-- 时尚达人的第二排的四张图片所在的div -->

<div class="center_div_dier">

<!-- 会买专辑的div -->

<div class="center_div_one">

<div class="center_div_one_1">

<a class="a_hover" href="#"><img

src="images/5ab8e6bbNea15ff8c (1).jpg"

class="center_div_one_img" /></a>

<div>

<a class="ahover" href="#">海尔智能变频冰箱</a>

</div>

<div class="span_guanggao">

<a class="ahover" href="#">采用生态植物膜保湿技术,保持果蔬营养水润,搭载变频静音压缩机,噪音低至34分贝,结合LED冷光源光线柔和,照明清晰无死角,立体风冷技术无需手动除霜。</a>

</div>

</div>

<div class="center_div_one_1 juyou">

<a class="a_hover" href="#"><img

src="images/5ab8e6bbNea15ff8c (1).jpg"

class="center_div_one_img" /></a>

<div>

<a class="ahover" href="#">海尔智能变频冰箱</a>

</div>

<div class="span_guanggao">

<a class="ahover" href="#">采用生态植物膜保湿技术,保持果蔬营养水润,搭载变频静音压缩机,噪音低至34分贝,结合LED冷光源光线柔和,照明清晰无死角,立体风冷技术无需手动除霜。</a>

</div>

</div>

</div>

<div class="center_div_one">

<div class="center_div_one_1">

<a class="a_hover" href="#"><img

src="images/5ab8e6bbNea15ff8c (1).jpg"

class="center_div_one_img" /></a>

<div>

<a class="ahover" href="#">海尔智能变频冰箱</a>

</div>

<div class="span_guanggao">

<a class="ahover" href="#">采用生态植物膜保湿技术,保持果蔬营养水润,搭载变频静音压缩机,噪音低至34分贝,结合LED冷光源光线柔和,照明清晰无死角,立体风冷技术无需手动除霜。</a>

</div>

</div>

<div class="center_div_one_1 juyou">

<a class="a_hover" href="#"><img

src="images/5ab8e6bbNea15ff8c (1).jpg"

class="center_div_one_img" /></a>

<div>

<a class="ahover" href="#">海尔智能变频冰箱</a>

</div>

<div class="span_guanggao">

<a class="ahover" href="#">采用生态植物膜保湿技术,保持果蔬营养水润,搭载变频静音压缩机,噪音低至34分贝,结合LED冷光源光线柔和,照明清晰无死角,立体风冷技术无需手动除霜。</a>

</div>

</div>

</div>

</div>

 

<div class="right_div"></div>

</div>

 

 

 

</div>

<div class="neirong_3 neirong">

 

 

 

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">会逛</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">你想逛的都在这里</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

<div class="lunbo_center">

<div class="max_img">

<a class="a_hover" href="#"><img

src="images/5b0f543bNe53d707e.jpg" class="shoubiao_img" /></a>

</div>

<div class="lunbo_san">

 

<a class="a_hover" href="#"><img

src="images/5b0f54b8N49ae77fd.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/5b0f54b8N49ae77fd.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/5b0f54b8N49ae77fd.jpg" class="san_one_img" /></a>

 

</div>

</div>

<div class="right_div"></div>

</div>

</div>

</div>

 

 

</div>

<!-- 时尚达人 -->

<div class="shishangdaren_zong">

<div class="juzhong">

<div class="sanfen">

<div class="shishangdaren_xian_l"></div>

</div>

<div class="sanfen zhongjian">

<div class="shishangdaren_p">时尚达人</div>

</div>

<div class="sanfen">

<div class="shishangdaren_xian_l"></div>

</div>

</div>

</div>

 

 

 

 

 

<div class="shishangdaren_jiadian">

<div class="shishangdaren_neirong">

 

<div class="neirong_1 neirong">

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">运动户外</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">玩所未玩</a></span>

</div>

 

 

 

<div class="lunbo_san_1">

<div class="left_div"></div>

 

<div class="lunbo_center">

<a class="a_hover" href="#"><img

src="images/5af843adN2667e5a8.jpg"

class="shoubiao_img fangda xiangxia" /></a>

<div class="center_div_one">

<div class="center_div_one_1">

<a class="a_hover" href="#"><img

src="images/5af843c8N949c555f.jpg"

class="center_div_one_img_1 fangda" /></a>

</div>

<div class=" daxiao juyou">

<a class="a_hover" href="#"><img

src="images/5af843dbNfbc44b3c.jpg"

class="center_div_one_img_1 fangda" /></a>

 

</div>

</div>

</div>

 

<div class="right_div">

<div class="div_a_rl_1"></div>

</div>

 

</div>

 

</div>

 

 

 

 

<div class="neirong_2 neirong">

<!-- 排行榜 -->

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">魅力装扮</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">精致生活</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

 

<a class="a_hover" href="#"><img

src="images/5ae9617eN40168ca3.jpg"

class="shoubiao_img fangda xiangxia" /></a>

<div class="center_div_one">

<div class="center_div_one_1">

<a class="a_hover" href="#"><img

src="images/5aaf6b8cN194ad58e.jpg"

class="center_div_one_img_1 fangda" /></a>

</div>

<div class=" daxiao juyou">

<a class="a_hover" href="#"><img

src="images/5b0283a3N9a4b2ff2.png"

class="center_div_one_img_1 fangda" /></a>

 

</div>

</div>

 

 

 

<div class="right_div"></div>

</div>

 

</div>

<div class="neirong_4 neirong">

<div class="img_cuowei">

<a class="a_hover" href="#"><img

src="images/5b0559d8N2baad6a5.jpg" class="img_fangda" /></a>

</div>

<div class="kuangkaung"></div>

 

</div>

</div>

 

 

</div>

 

 

 

 

<div class="shishangdaren_jiadian">

<div class="shishangdaren_neirong">

 

<div class="neirong_5 neirong">

<div class="img_cuowei_1">

<a class="a_hover" href="#"><img

src="images/5b0e12c0Nb69341a8.jpg" class="img_fangda_1" /></a>

</div>

<div class="kuangkaung_1"></div>

</div>

 

 

 

 

<div class="neirong neirong_product">

<div class="product_item_lk">

<div class="product_left">

<a class="a_hover" href="#"><img

src="images/5b0b5d84N43660923.jpg" class="product_img" /></a>

<div class="product_item_name">

<a href="#" class="ahover"> 尚雨茜自有品牌伊润雅【限量特惠

买一赠三】【持久清新淡香】新系列粉色持久甜心淡香 浪漫柔情淡香-法式系列 </a>

</div>

 

<div class="product_item_name">

<b>¥</b> <span href="#"> 99.00 </span>

</div>

 

</div>

<div class="product_left right_item">

<a class="a_hover" href="#"><img

src="images/5b0b5d84N43660923.jpg" class="product_img" /></a>

<div class="product_item_name">

<a href="#" class="ahover"> 尚雨茜自有品牌伊润雅【限量特惠

买一赠三】【持久清新淡香】新系列粉色持久甜心淡香 浪漫柔情淡香-法式系列 </a>

</div>

 

<div class="product_item_name">

<b>¥</b> <span href="#"> 99.00 </span>

</div>

</div>

</div>

 

<div class="product_item_lk">

<div class="product_left bottom_item">

<a class="a_hover" href="#"><img

src="images/5b0b5d84N43660923.jpg" class="product_img" /></a>

<div class="product_item_name">

<a href="#" class="ahover"> 尚雨茜自有品牌伊润雅【限量特惠

买一赠三】【持久清新淡香】新系列粉色持久甜心淡香 浪漫柔情淡香-法式系列 </a>

</div>

 

<div class="product_item_name">

<b>¥</b> <span href="#"> 99.00 </span>

</div>

 

</div>

<div class="product_left right_item bottom_item">

<a class="a_hover" href="#"><img

src="images/5b0b5d84N43660923.jpg" class="product_img" /></a>

<div class="product_item_name">

<a href="#" class="ahover"> 尚雨茜自有品牌伊润雅【限量特惠

买一赠三】【持久清新淡香】新系列粉色持久甜心淡香 浪漫柔情淡香-法式系列 </a>

</div>

 

<div class="product_item_name">

<b>¥</b> <span href="#"> 99.00 </span>

</div>

</div>

</div>

 

 

 

 

 

</div>

 

 

 

<div class="neirong_3 neirong">

 

 

 

<div class="neirong_1_title">

<div class="SADA_logo">

<a class="a_hover" href="#"><img

src="images/5a475ff2Nb88ab0e8.jpg" class="SADA_logo_img" /></a>

</div>

<span class="SADA_span"><a href="#">SADA海外旗舰店</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

<div class="lunbo_center">

<a class="a_hover" href="#"><div

class="max_img_sada background_img"></div></a>

<div class="lunbo_san margin_img">

 

<a class="a_hover" href="#"><img

src="images/5b03d628N4b4a74d8.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/5b03d62dN0127b0b9.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/5b03d631N5a0018ae.jpg" class="san_one_img" /></a>

 

</div>

</div>

<div class="right_div"></div>

</div>

</div>

</div>

 

 

</div>

 

 

 

 

<div class="shishangdaren_jiadian">

<div class="shishangdaren_neirong">

 

<div class="neirong_1 neirong">

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">京东服饰</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">尽享时尚生活</a></span>

</div>

<div class="lunbo_san_1">

<div class="left_div"></div>

<div class="lunbo_center">

<div class="max_img">

<a class="a_hover" href="#"><img

src="images/5adf2259N40db6ba1.jpg" class="shoubiao_img" /></a>

</div>

<div class="lunbo_san">

 

<a class="a_hover" href="#"><img

src="images/5a9e4591Na6a06f55.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/599ea4c0Na458525b.jpg" class="san_one_img" /></a> <a

class="a_hover" href="#"><img

src="images/5a7aac18Nbf24e551.jpg" class="san_one_img" /></a>

 

</div>

</div>

<div class="right_div"></div>

</div>

 

</div>

 

 

 

 

<div class="neirong_2 neirong">

<!-- 排行榜 -->

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">我型我塑</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">时尚有我 品质衣橱</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

 

<a class="a_hover" href="#"><img

src="images/5af84229N029a1092.jpg"

class="shoubiao_img fangda xiangxia" /></a>

<div class="center_div_one">

<div class="center_div_one_1">

<a class="a_hover" href="#"><img

src="images/5af8423aN68120fe7.jpg"

class="center_div_one_img_1 fangda" /></a>

</div>

<div class=" daxiao juyou">

<a class="a_hover" href="#"><img

src="images/5af841a3N85351862.jpg"

class="center_div_one_img_1 fangda" /></a>

 

</div>

</div>

 

 

 

<div class="right_div"></div>

</div>

 

 

 

</div>

<div class="neirong_4 neirong">

<div class="img_cuowei">

<a class="a_hover" href="#"><img

src="images/5a53161dN763a935c.jpg" class="img_fangda_2" /></a>

<div style="width: 100%; height: 20px;"></div>

<a class="a_hover" href="#"><img

src="images/59f2a13eNb75cd9da.jpg" class="img_fangda_2" /></a>

</div>

<div class="kuangkaung"></div>

 

</div>

</div>

 

 

</div>

 

<!-- 智能先锋 -->

<div class="shishangdaren_zong">

<div class="juzhong">

<div class="sanfen">

<div class="shishangdaren_xian_l"></div>

</div>

<div class="sanfen zhongjian">

<div class="shishangdaren_p">智能先锋</div>

</div>

<div class="sanfen">

<div class="shishangdaren_xian_l"></div>

</div>

</div>

</div>

 

 

 

 

<!-- 只能先锋第一行第二个****************************************** -->

<div class="shishangdaren_jiadian">

<div class="shishangdaren_neirong">

 

<div class="neirong_1 neirong">

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">手机频道</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">一个极客的诞生</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

 

 

<div class="center_div_one">

<div class="center_div_one_1">

<a class="a_hover" href="#"><img

src="images/5b0e503dN238b24d9.jpg"

class="center_div_one_img_1 fangda" /></a>

</div>

<div class=" daxiao juyou">

<a class="a_hover" href="#"><img

src="images/5b0b7804Nb239f493.jpg"

class="center_div_one_img_1 fangda" /></a>

 

</div>

</div>

<div class="sahngbiao">

<div class="diyihang">

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

</div>

<div class="diyihang">

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

</div>

<div class="diyihang">

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

<div class="diyihang_one">

<a class="a_hover" href="#"><img

src="images/5aaf7b8aN0421ba35.jpg" class="shangbiao_logo_img" /></a>

</div>

</div>

</div>

</div>

</div>

 

 

 

<div class="neirong_2 neirong">

<!-- 排行榜 -->

<div class="neirong_1_title">

<div class="paihangbang">

<span><a href="#">新品首发</a></span>

</div>

<div class="shishangdaren_img_nav">

<a href="#"><img src="images/xiaoyuhao.png"></a>

</div>

<span class="goouwuzhinan"><a href="#">新春来袭 看新奇好物</a></span>

</div>

 

<div class="lunbo_san_1">

<div class="left_div"></div>

 

<a class="a_hover" href="#"><img

src="images/5b0cd0b1N91e0a2de.jpg"

class="shoubiao_img fangda xiangxia" /></a>

 

<div class="right_div"></div>

</div>

 

 

 

</div>

 

 

 

<div class="neirong_4 neirong">

<div class="img_cuowei">

<a class="a_hover" href="#"><img

src="images/5b0559d8N2baad6a5.jpg" class="img_fangda" /></a>

</div>

<div class="kuangkaung"></div>

</div>

</div>

</div>

</div>

</body>

</html>

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

css代码

/* 固定不动的div */

 

.guding_all{

width:90px;

height:610px;

position:fixed;

right:0;

z-index: 10;

 

}

.guding_1{

width:90px;

height:210px;

/* float:right; */

}

/* .guding_img{

z-index: 2;

position: fixed;

} */

.tiao{

width:6px;

height:600px;

background-color:#786e6e;

float:right;

/* background-color:#786e6e; */

}

.icon_div{

width:34px;

height:34px;

background-color:#786e6e;

margin-top:2px;

}

.icon_div:hover{

width:100px;

background-color:#f00;

transition: 500ms linear;

}

.icon_weizhi{

height:175px;

margin:119px 50px;

}

.icon_weizhi_1{

height:68px;

margin-left:50px;

margin-top:208px;

}

.icon_img{

width:20px;

margin-left:7px;

margin-top:7px;

 

}

 

 

/* 最外面的最大的div */

.all {

width: 100%;

background-color: #f1f3ef;

}

 

/* 超链接上面的广告 */

.nav_top {

width: 1190px;

margin: 0 auto;

position: relative;

}

/* 广告内的618 */

.nav_top_img618 {

height: 80px;

z-index: 1;

position: absolute;

}

/* 广告的图片 */

.nav_top_img {

z-index: 0;

position: absolute;

}

/* 广告内的按钮 */

.nav_top_img_1 {

z-index: 1;

left: 910px;

top: 15px;

position: absolute;

}

 

.nav_top_img_2 {

z-index: 1;

left: 1040px;

top: 15px;

position: absolute;

}

/* 超链接 */

.nav_top_all {

width: 100%;

background-color: #1e5ac1;

height: 80px;

}

 

.nav_wai {

width: 100%;

height: 31px;

background-color: dddddd;

position: relative;

z-index: 0;

}

 

.nav {

width: 100%;

height: 30px;

background-color: #e3e4e5;

z-index: 1;

position: relative;

}

 

.icon-color {

margin-left: 3px;

line-height: 30px;

font-size: 20px;

color: red;

}

/* 定位中的汉字 */

.beijing {

font-size: 12px;

float: right;

line-height: 30px;

margin-right: 9px;

color: #8e8e8e;

}

/* 控制导航位置的div */

.weizhi {

width: 1190px;

height: 30px;

margin: 0 auto;

}

/* 超链接右边的超链接的面积 */

.nav .nav_lianjie {

width: 980px;

height: 30px;

float: right;

}

/* 超链接内的定位 */

.dingwei {

width: 60px;

height: 30px;

float: left;

}

/* 超链接的 */

.nav_a {

width: 710px;

height: 30px;

float: right;

}

 

.dingwei:hover {

background-color: #ffffff;

border: #000000;

}

 

.nav_a ul {

/* margin:0px;

padding:0px; */

list-style: none;

}

/* 超链接的li样式 */

.nav_a ul li {

width: 75px;

height: 30px;

float: left;

text-align: center;

}

/* 超链接内竖线 */

.nav_a ul .xian {

width: 5px;

height: 30px;

float: left;

text-align: center;

line-height: 30px;

color: #ddd;

}

 

.nav_a ul li .nav_ul_a {

display: block;

line-height: 30px;

color: #8e8e8e;

font-size: 12px;

text-decoration: none;

}

/* 鼠标移入变白样式 */

.white:hover {

background-color: #ffffff;

border: #000000;

}

 

.nav_a ul li .ahover_red {

color: #ff0000;

margin-right: 15px;

}

/* 鼠标移入超链接变红 */

.nav_a ul li .ahover:hover {

color: #ff0000;

}

/* 导航内的向下的角标 */

.nav_a ul li .xiajiaobiao {

position: relative;

top: 2px;

left: 3px;

width: 15%;

}

/* 二维码上面的上角标 */

.nav_a ul li .shangjiaobiao {

position: relative;

top: -14px;

right: -1px;

width: 30%;

}

 

.background_nav {

background-color: #e3e4e5;

}

/* 京东的logo(.gif)格式的图片 */

.img_logo_jd {

width: 190px;

height: 170px;

position: absolute;

box-shadow: 0px 1px 7px 0px #aaa;

z-index: -1;

}

/* logo的阴影 */

.img_logo_jd_img {

box-shadow: 0 0 #aaa;

}

/* 第三条div 的大小 */

.sousuo_all {

width: 1190px;

height: 140px;

margin: 0 auto;

}

/* 搜索处的大小包括二维码 */

.sousuo {

width: 880px;

height: 100px;

float: right;

}

 

.sousuo_nav {

width: 880px;

height: 40px;

float: right;

}

 

/* 搜索处的大小不包括二维码 */

.sousuo_two {

width: 800px;

heigth: 140px;

}

/* 二维码所在位置所有的都做完在调位置 */

.sousuo_erweima {

width: 65px;

height: 65px;

background-color: #e3e4e5;

text-align: center;

float: right;

margin: -90px 4px;

/* position: relative;

top:110px;

left:50px; */

}

 

.sousuo_all .sousuo .sousuo_sou .sousuo_erweima .erweima_img {

height: 60px;

margin-top: 2px;

}

/* 搜索处包括购物车 */

.sousuo_baobei_all {

width: 550px;

height: 65px;

margin-left: 10px;

}

/* 搜索宝贝的样式加上按钮 */

.sousuo_baobei {

width: 500px;

height: 35px;

margin-top: 25px;

background-color: #fff;

}

/* 搜索内的相机 */

.sousuo_xiaoxiangji {

width: 19px;

height: 15px;

float: right;

margin: 10px 10px;

background-image: url("images/sprite-photo-search.png");

background-repeat: no-repeat;

}

/* 相机鼠标移入效果 */

.sousuo_xiaoxiangji:hover {

width: 19px;

height: 15px;

float: right;

margin: 10px 10px;

background-image: url("images/sprite-photo-search.png");

background-repeat: no-repeat;

background-position: -30px 0px;

}

/* 搜索的按钮 */

.sousuo_baobei_button {

width: 50px;

height: 35px;

background-color: #ff0000;

float: right;

margin-top: -35px;

text-align: center;

}

/* 搜索按钮内的放大镜 */

.sousuo_baobei_button img {

width: 25px;

margin-top: 5px;

}

/* 搜索下面的超链接 */

.sousuo_nav_nei {

width: 550px;

height: 25px;

}

 

.sousuo_nav_nei ul li {

width: 60px;

}

 

.sousuo_nav_nei ul li .nav_ul_a {

font-size: 12px;

}

/* 京东电器的样式 */

.nav_a ul li .ahover_red_1 {

color: #ff0000;

}

/* 搜索下面的的超链接的位置 */

.jujia {

margin-left: -7px;

}

/* 购物车的样式 */

.gouwuche {

width: 190px;

height: 35px;

margin-top: -64px;

background-color: #ffffff;

float: right;

}

/*  */

.guwuche_nei {

width: 188px;

height: 33px;

margin: 1px 1px;

}

/* 购物车内的图标所在的div */

.guwuche_tubiao {

width: 19px;

height: 15px;

float: left;

margin-top: 5px;

margin-left: 40px;

}

/* 购物车内的图标大小 */

.gouwuche_img {

width: 25px;

}

/* 购物车内的超链接 */

.guwuche_nei a {

font-size: 9px;

margin: 5px 0px 0px 9px;

color: #ff0000;

text-decoration: none;

line-height: 35px;

}

/* 购物车内的物品的数量 */

.guwuche_tubiao_yuan {

width: 15px;

height: 15px;

margin: -30px 0px 0px 130px;

background-color: #ff0000;

border-radius: 50%;

color: #fff;

}

 

/* 秒杀那一排的超链接的大小 */

.sousuo_nav {

margin: 0px 100px;

}

 

.sousuo_nav ul li {

width: 75px;

}

 

.sousuo_nav ul li .nav_ul_a {

color: #000;

font-size: 14px;

}

/* 秒杀那一排后面的gif图片 */

.nav_gif {

float: right;

margin: -55px 0px;

}

 

/* 内容的第一行大小加背景 */

.body_top {

wodth: 100%;

height: 500px;

/* background-image: url("../images/5b05a052Nb38bfc24.png");

background-repeat: no-repeat;

background-position: -240px 11px; */

}

/* 背景内的内容 */

.body_top_neirong {

width: 1190px;

height: 500px;

margin: 0 auto;

}

/* 第一行内容的左面大小 */

.body_left {

width: 190px;

height: 481px;

background-color: #fff;

float: left;

}

/* 左面超链接 */

.body_left_a {

width: 190px;

height: 450px;

}

 

.body_left_a ul {

margin: 11px 0px;

width: 100%;

}

 

.body_left_a ul li {

width: 190px;

height: 27px;

color: #888;

font-size: 13px;

}

 

.body_left_a ul li:hover {

background-color: #ddd;

}

 

.body_left_a ul li a {

color: #888;

line-height: 27px;

margin-left: 3px;

}

 

.body_left_a ul li a:hover {

color: #f00;

}

/* 第一行内的轮播图 */

.body_lunbotu {

width: 590px;

height: 495px;

float: left;

margin-top: 11px;

margin-left: 10px;

}

 

.body_lunbotu .img {

 

}

/* 轮播图右面的三个图片 */

.left_2 {

margin-left: 10px;

margin-top: 5px;

}

/*  轮播图右面的三个图片中单个图片的div的样式 */

.body_left_top {

width: 190px;

}

/*  轮播图右面的三个图片中单个图片的样式 */

.body_left_top img {

margin-top: 5px;

width: 190px;

}

/* 第一行内容最右边的大小 */

.body_left_1 {

width: 190px;

height: 470px;

float: left;

}

/* 第一行内容最右边的位置 */

.left_3 {

float: right;

margin-left: 106px;

margin-top: -465px;

background-color: #fff;

}

/* 第一行内容最右边的上面 */

.body_right_top {

height: 140px;

}

/* 第一行内容最右边的中间 */

.body_right_center {

height: 130px;

margin-top: 5px;

}

/* 第一行内容最右边的下面 */

.body_right_bottom {

height: 190px;

margin-top: 5px;

}

/* 第一行内容最右边的上面的头像所在div */

.body_right_top .right_top_tou {

width: 190px;

height: 70px;

}

 

//

鼠标移入div,div加上一层变浅; ; .img-black:hover { //

background-color: #000;

opacity: 0.1;

transition: opacity .2s linear;

}

/* 用户头像 */

.right_touxiang {

width: 65px;

height: 65px;

background-color: #eee;

position: relative;

top: -15px;

left: 65px;

border-radius: 50%;

text-align: center;

}

 

.touxiang {

 

}

/* 用户头像内的图片 */

.touxiang img {

box-shadow: 3px 6px 25px #c3c3c3;

width: 55px;

border-radius: 50%;

}

 

.tou_p {

text-align: center;

}

/* 用户头像下面的字 */

.user_tip {

font-size: 9px;

color: #888;

width: 100%;

margin-top: -10px;

margin-left: 6px;

}

/* 用户头像下面的登录 */

.user_a {

font-size: 9px;

color: #888;

width: 100%;

margin-top: -10px;

}

/* 用户头像下面的登录超链接的样式 */

.user_a a {

text-decoration: none;

margin-left: 5px;

color: #888;

}

/* 用户头像下面的登录超链接鼠标移入的样式 */

.user_a a:hover {

color: #f00;

}

/* 用户头像下面的按钮的大小 */

.tou_button {

width: 190px;

height: 25px;

}

/* 用户头像下面的按钮鼠标移入的样式 */

.tou_button a:hover {

color: #fff;

background-color: #f00;

transition: background .3s ease, color .3s ease;

}

/* 新人福利 */

.xinrenfuli {

float: left;

margin: 0 25px;

width: 70px;

height: 25px;

line-height: 25px;

font-size: 12px;

text-align: center;

border-radius: 13px;

box-shadow: 3px 6px 25px #c3c3c3;

text-decoration: none;

color: #f00;

}

/* plus会员 */

.plushuiyuan {

float: right;

margin-right: 15px;

margin-top: -25px;

width: 70px;

height: 25px;

line-height: 25px;

font-size: 12px;

text-align: center;

border-radius: 13px;

background-color: #363634;

box-shadow: 3px 6px 25px #c3c3c3;

text-decoration: none;

color: #e5d790;

}

/* 促销|公告 */

.lianjie_1 {

width: 190px;

height: 26px;

float: left;

margin-left: 10px;

}

 

.lianjie_1 ul li {

width: 45px;

}

/* 鼠标移入促销的边框 */

.b_biankuang:hover {

border-bottom: 2px #f00 solid;

}

/* 促销|公告右面的更多 */

.gengduo {

margin-left: 50px;

width: 30px;

}

/* 促销公告下面的内容 */

.body_left_xinxi {

width: 160px;

heigth: 96px;

margin-top: -100px;

margin-left: 20px;

}

/* 促销与话费的分割线 */

.body_left_xinxi .xian {

height: 1px;

width: 155px;

background-color: #ccc;

}

 

.body_left_xinxi ul li a {

font-size: 9px;

color: #888;

}

 

.body_left_xinxi ul li a:hover {

color: #f00;

}

/*-------------------------------------------------------------*/

/*用户下面的游戏的div的大小 以下为心态崩溃是所制作所以非常乱*/

.game {

width: 180px;

height: 160px;

margin: -160px 10px;

}

 

.game_nav {

margin-left: -7px;

width: 190px;

}

 

.game_nav ul li {

width: 50px;

}

 

.game_div {

width: 180px;

height: 25px;

text-align: center;

margin-bottom: 25px;

}

 

.game_p {

width: 60px;

height: 20px;

float: left;

font-size: 12px;

margin-bottom: 10px;

}

 

.game_div .game_sousuo {

width: 110px;

height: 20px;

float: right;

font-size: 12px;

color: #ccc;

border: 1px #ccc solid;

margin-bottom: 10px;

}

 

.chongzhi {

width: 180px;

height: 25px;

margin-top: 30px;

}

 

.chongzhi_money {

width: 60px;

height: 20px;

float: left;

font-size: 12px;

text-align: center;

line-height: 25px;

}

 

.chongzhi .chongzhi_number {

width: 110px;

height: 20px;

float: right;

font-size: 12px;

color: #ccc;

border: 1px #ccc solid;

}

 

.game_zhenshizhi {

width: 60px;

height: 25px;

line-height: 30px;

font-size: 12px;

color: #f00;

margin-left: 10px;

}

 

.game_div .game_erxuanyi {

width: 120px;

height: 20px;

line-height: 25px;

font-size: 12px;

}

 

.game_shipinyule {

width: 120px;

height: 20px;

float: right;

font-size: 12px;

color: blue;

}

 

.kuaisuchongzhi {

background-color: #f00;

color: #fff;

margin-left: 12px;

margin-top: -15px;

}

 

.dhover:hover {

border-color: blue;

}

 

.game_shipinyule {

margin-top: -35px;

}

 

.game_shipinyule:hover {

color: #f00;

}

/*到这里以上都是*/

/*-------------------------------------------------------------*/

/*京东秒杀的最外面的div大小*/

.jingdongmiaosha {

width: 100%;

}

/*京东秒杀内容所在的div的大小*/

.jingdongmiaosha_neirong {

width: 1190px;

height: 300px;

background-color: #000;

margin: 11px auto;

}

/*秒杀计时所在div*/

.jishi {

width: 190px;

height: 100%;

background-color: #d6473d;

float: left;

}

/*京东秒杀里面的字的总体样式*/

.j_jingdongmiaosha_p {

width: 100%;

height: 50px;

text-align: center;

color: #fff;

}

/*京东秒杀的字体样式*/

.j_p1 {

line-height: 60px;

font-size: 35px;

padding-top: 50px;

}

/*flash deals 的字体样式 */

.j_p2 {

height: 35px;

font-size: 18px;

color: #ddd;

line-height: 35px;

}

/*闪电的图片*/

.j_jingdongmiaosha_img {

margin: 0 auto;

width: 20px;

height: 33px;

background-image: url("../images/sprite.flash.png");

background-repeat: no-repeat;

background-position: -32px 0;

background-size: 52px 40px;

}

/*距离本场结束*/

.j_p3 {

line-height: 50px;

font-size: 17px;

}

 

.j_jingdongmiaosha_div {

width: 135px;

height: 40px;

margin: 0 25px;

}

/*秒杀倒计时*/

.j_jingdongmiaosha_div .miaoshadaojishi {

width: 40px;

height: 40px;

background-color: #000;

position: relative;

float: left;

margin-left: 5px;

}

/*倒计时中间的红线*/

.j_jingdongmiaosha_div .miaoshadaojishi .hongxian {

width: 40px;

height: 2px;

background-color: #d6473d;

position: absolute;

top: 19px;

z-index: 0;

}

/*秒杀计时数字*/

.j_jingdongmiaosha_div .miaoshadaojishi p {

color: #fff;

z-index: 1;

position: absolute;

font-size: 25px;

width: 40px;

top: -23px;

text-align: center;

}

/*京东秒杀里面的物品s所设置的最大的div*/

.jingdongmiaosha_neirong .wupin {

width: 1000px;

height: 100%;

float: right;

top: -40px;

position: relative;

}

/* 物品内的想做的箭头 */

.wupin_left {

background-color: #ccc;

z-index: 1;

width: 20px;

height: 40px;

top: 150px;

position: relative;

}

 

.wupin_left:hover {

background-color: #aaa;

}

/*箭头*/

.leftjiantou {

width: 20px;

margin-top: 10px;

}

/*京东秒杀内的物品的大小*/

.wupinsuozaidiv {

float: left;

width: 200px;

height: 100%;

background-color: #fff;

}

 

.right_button {

position: relative;

}

 

.wupin_right {

background-color: #aaa;

z-index: 1;

width: 20px;

height: 40px;

top: 115px;

left: 180px;

position: absolute;

}

 

.wupin_right:hover {

background-color: #ccc;

}

/*箭头*/

.leftjiantou {

width: 20px;

margin-top: 10px;

}

/*东北绿豆外的div*/

.wupin_neirong {

margin: 0 auto;

width: 190px;

height: 100%;

}

 

/*东北绿豆的图片*/

.wupin_img {

width: 140px;

margin: 40px 25px;

}

/*物品内容的字*/

.wupin_neirong_p {

width: 150px;

heigth: 5px;

position: relative;

top: -30px;

left: 20px;

text-align: center;

}

 

.wupin_neirong_p a p {

width: 140px;

heigth: 17px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

font-size: 12px;

}

 

.wupin_neirong_p a {

color: #888;

}

 

.wupin_neirong_a:hover {

color: #f00;

}

/*物品价格所在div*/

.jiage {

width: 190px;

height: 75px;

margin-top: -61px;

position: absolute;

}

 

.jiage_zong {

width: 160px;

height: 20px;

border: 1px #f00 solid;

margin: 0 auto;

position: relative;

top: 30px;

}

/* 价格的红色背景处 */

.jiage_hong {

background-color: #f00;

width: 50%;

height: 100%;

text-align: center;

font-size: 12px;

line-height: 20px;

color: #fff;

}

 

.jiage_hui {

width: 50%;

heigth: 100%;

float: right;

margin-top: -21px;

font-size: 12px;

text-align: center;

line-height: 20px;

color: #ddd;

}

/*价格带下划线*/

.jiage_hui span {

width: 80px;

text-decoration: line-through;

}

/*第五层最后的图片*/

.wupin_img_1 {

width: 180px;

height: 280px;

top: -10px;

left: 10px;

z-index: 0;

position: relative;

}

/*圆圈最外面的div*/

.dingwei_1 {

width: 100%;

height: 20px;

position: relative;

top: 270px;

z-index: 1;

}

 

.yuanquan {

width: 50px;

height: 100%;

margin: 0 auto;

}

/* 圆圈 */

.yuanquan_1 {

width: 5px;

height: 5px;

float: left;

margin-left: 8px;

position: relative;

top: 1px;

left: 8px;

border-radius: 50%;

border: 1px #ccc solid;

}

/* 小圆圈的红色的背景 */

.hong {

background-color: #f00;

}

 

.zong_niupai {

width: 100%;

height: 580px;

margin-top: 21px;

}

/* 辣妈处图片所在的div */

.lama {

background-image: url('../images/5b0405c4Na43ba8de.png');

background-repeat: no-repeat;

height: 580px;

background-position: -81px 10px;

}

 

.lama_div_zong {

width: 1000px;

height: 580px;

float: right;

margin-top: 15px;

}

/* 辣妈背景处上面的div

*/

.lama_baby {

width: 1190px;

height: 580px;

margin: 0 auto;

}

 

.zhanwei {

width: 190px;

height: 580px;

float: left;

/* position: relative;

position: absolute; */

}

 

.diyihang_div_1 {

width: 1000px;

height: 220px;

margin-left: -10px;

}

 

.diyihang_div {

width: 200px;

height: 220px;

float: left;

}

 

.div_img {

width: 190px;

margin: 5px 10px;

}

/*横着的图片*/

.lama_div_zong .diyihang_div_2 {

width: 1000px;

height: 120px;

margin-left: -10px;

}

 

.diyihang_div {

width: 200px;

height: 120px;

float: left;

}

 

.diyihang_div:hover {

opacity: 0.9;

transition: opacity .2s linear;

}

 

.div_img {

width: 190px;

margin: 5px 10px;

}

/* 时尚达人上面的第一行 */

.shishangdaren_jiadian {

width: 100%;

height: 490px;

margin-top: 30px;

}

 

.shishangdaren_neirong {

width: 1190px;

height: 490px;

margin: 0px auto;

}

/* 内容的大小 */

.neirong {

width: 390px;

height: 450px;

}

 

.neirong_1 {

float: left;

background-color: #fff;

}

 

.neirong_2 {

margin: 0 auto;

background-color: #fff;

}

 

.neirong_3 {

float: right;

margin-top: -450px;

background-color: #fff;

}

/* 时尚达人第一个内容的title */

.neirong_1_title {

width: 100%;

height: 60px;

}

/* 图片样式 */

.shishangdaren_img_nav {

float: left;

width: 46px;

height: 46px;

margin-top: 7px;

}

 

.shishangdaren_img_nav img {

width: 23px;

margin-top: 12px;

}

/* 排行榜 */

.paihangbang {

float: left;

padding-left: 20px;

width: 80px;

font-size: 20px;

heigth: 60px;

line-height: 60px;

}

 

.paihangbang span a {

color: #888;

}

 

.goouwuzhinan {

width: 60px;

line-height: 60px;

margin-left: -5px;

}

 

.goouwuzhinan a {

color: #999;

}

 

.ahover:hover {

color: #f00;

}

/* 排行榜中的超链接 */

.paihangbang_nav {

width: 390px;

height: 35px;

background-color: #f7f7f7;

}

/* 排行榜内的超链接的每一块的样式 */

.nav_div_panghangbang {

width: 78px;

height: 35px;

float: left;

text-align: center;

}

 

.nav_div_a {

line-height: 35px;

color: #888;

font-size: 12px;

}

/* 时尚达人第一行第一排的1,2,3的内容大小 */

.zhuyaowupin {

width: 390px;

height: 450px;

}

 

.wupin_zhuyaowupin {

width: 350px;

height: 90px;

margin: 10px auto;

}

 

.wupin_bingxiang {

width: 80px;

margin-top: 12px;

}

/* 图片右面的1 */

.img_right_1 {

width: 30px;

heigth: 40px;

margin-top: -60px;

margin-left: 100px;

font-size: 32px;

line-height: 40px;

text-align: center;

color: #e74240;

}

/* 解释物品的超链接 */

.img_right span a {

width: 220px;

height: 72px;

font-size: 12px;

float: right;

margin-top: -40px;

color: #888;

}

/* 时尚达人里面的线 */

.class_xian {

width: 350px;

height: 1px;

margin: 10px auto;

background-color: #ccc;

}

 

.xian_weizhi {

margin-top: -50px;

}

 

.yuanquan_me {

margin-top: -30px;

}

 

.daxiao_yuanquan {

width: 10px;

height: 10px;

}

/* 时尚达人的字所在位置 */

.shishangdaren_zong {

width: 100%;

height: 35px;

}

 

.juzhong {

width: 300px;

height: 35px;

margin: 0 auto;

}

 

.sanfen {

width: 75px;

height: 35px;

float: left;

}

 

.zhongjian {

width: 150px;

height: 35px;

}

 

.shishangdaren_xian_l {

width: 50px;

height: 5px;

background-color: #000;

float: left;

margin-top: 18px;

margin-left: 12.5px;

}

 

.shishangdaren_p {

font-size: 30px;

line-height: 35px;

text-align: center;

}

/* y圆圈的位置和所在的div的宽度 */

.yuan_san {

width: 100px;

margin-top: -40px;

}

 

.lunbo_san_1 {

width: 390px;

height: 390px;

}

/* 左面有一个薯条的div的样式 */

.left_div {

width: 20px;

height: 345px;

background-color: #fff;

float: left;

}

/* 左面的按钮的杭高 */

.tubiao {

line-height: 45px;

}

 

.div_a_rl {

width: 20px;

height: 40px;

background-color: #ccc;

margin-top: 177.5px;

}

/* 右面的薯条的div */

.right_div {

width: 20px;

height: 207.5px;

background-color: #fff;

margin-left: 370px;

margin-top: -345px;

}

 

/*左右按钮的鼠标移入样式  */

.div_a_rl:hover {

background-color: #888;

}

/* 左右按钮的大小 */

.img_rl {

width: 20px;

height: 20px;

}

/* 手表中间的样式 */

.lunbo_center {

width: 370px;

height: 345px;

}

/* 手表 */

.shoubiao {

width: 370px;

height: 140px;

}

/* 第一行中加的第一行的图片 */

.shoubiao_img {

width: 350px;

}

/*轮播的三张图片 */

.lunbo_san {

width: 370px;

height: 85px;

}

/* .lunbo_one{

width:120px;

height:110px;

} */

/* 三张图片 */

.san_one_img {

width: 110px;

margin-left: 3px;

margin-top: 10px;

}

/*  */

.shoubiao_guanggao {

width: 350px;

height: 30px;

text-align: center;

margin-top: 40px;

}

 

.shoubiao_guanggao span a {

font-size: 18px;

line-height: 30px;

color: #000;

}

 

/* 变频冰箱下面的解释说明 */

.span_guanggao {

height: 26px;

line-height: 23px;

margin-top: 10px;

overflow: hidden;

}

 

.span_guanggao a {

color: #111;

}

/* 变频冰箱下面的解释说明的字体 */

.span_guanggao .ahover {

color: #111;

font-size: 9px;

text-overflow: ellipsis;

}

 

.a_hover:hover {

opacity: 0.6;

transition: opacity .2s linear;

}

/* 领券中心下面的两个小圆圈 */

.yuan_er {

margin-top: -40px;

}

 

/*领券中心 第一行 */

.shoubiao_1 {

width: 350px;

height: 110px;

background-color: #f6f6f6;

margin-left: 20px;

margin-top: -20px;

border-radius: 8px;

}

/* 领券的物品 */

.lingquan_wupin {

width: 70px;

height: 70px;

background-color: #fff;

margin-top: 10px;

border-radius: 50%;

float: left;

}

/* 手机图片 */

.linquan_img {

width: 50px;

margin-top: 10px;

margin-left: 10px;

}

/* 优惠券价格的大小 */

.lingquan_money {

width: 168px;

height: 101px;

margin: 20px 70px;

}

/* 优惠券的价钱所在div */

.lingquan_money_1 {

width: 60px;

height: 40px;

text-align: center;

}

 

.lingquan_money_1 b {

color: red;

}

/* 优惠券的价钱 */

.lingquan_money_1 span {

font-size: 25px;

line-height: 40px;

color: red;

}

/* 优惠券解释说明的div的大小 */

.lingquan_money_2 {

width: 100px;

height: 30px;

}

/* 优惠券解释说明的文字 */

.lingquan_money_2 span {

font-size: 15px;

line-height: 20px;

color: #ccc;

}

/* 手下的第三行 */

.lingquan_money_3 {

width: 200px;

height: 30px;

}

/* 第三行文字 */

.lingquan_money_3 span {

font-size: 15px;

line-height: 20px;

color: #888;

}

/* 左面的物品图片 */

.linquan_left {

margin-left: 10px;

}

/* 白色的圆圈 */

.xiaoyuanquan_zong {

width: 16px;

height: 16px;

background-color: #fff;

border-radius: 50%;

margin-left: 275px;

margin-top: -127px;

}

 

.xiaoyuanquan_zong_1 {

width: 16px;

height: 16px;

background-color: #fff;

border-radius: 50%;

margin-left: 275px;

margin-top: 113px;

}

/* 领券中心的数着的超链接 */

.chaolianjie_shuzhe {

width: 10px;

height: 135px;

margin-left: 225px;

margin-top: -90px;

line-height: 10px;

}

/* 领券中心的竖排的div */

.chaolianjie_shuzhe a {

color: #888;

font-size: 9px;

}

 

.chaolianjie_shuzhe a:hover {

color: #f00;

}

/* 觅me */

.yuan_san_mi {

width: 100px;

margin-top: -40px;

}

/* 那张水果的大的图片 */

.max_img {

width: 370px;

height: 250px;

}

/* 时尚达人第二排的四张图片所在div大小 */

.center_div_dier {

width: 370px;

height: 390px;

}

/* 时尚达人第二排的四张图片所在div大小 */

.center_div_one {

width: 370px;

height: 195px;

}

/* 变频冰箱的div大小 */

.center_div_one_1 {

width: 165px;

height: 125px;

float: left;

}

 

.juyou {

float: right;

}

/* 四张图片其中一张所在的图片 */

.center_div_one_img {

width: 90px;

margin: 0px 32.5px;

}

 

.center_div_one_1 div {

width: 100%;

height: 20px;

text-align: center;

}

 

.center_div_one_1 div a {

color: #5a8194;

text-align: center;

}

 

.div_a_rl_1 {

width: 20px;

height: 40px;

margin-top: 177.5px;

}

 

.center_div_one_img_1 {

width: 170px;

margin-top: 5px;

}

 

.daxiao {

width: 170px;

height: 195px;

float: left;

margin-left: 15px;

}

 

/* 在右面的边框和图片 */

.img_cuowei {

position: absolute;

background-color: #f1f3ef;

}

/* 黑框框 */

.kuangkaung {

width: 350px;

height: 400px;

border: 5px #000 solid;

float: right;

margin-top: 40px;

}

 

.img_fangda {

width: 340px;

}

 

.neirong_4 {

float: right;

margin-top: -450px;

position: relative;

}

/* 右面的边框和图片一直到这 */

 

/* 左面的边框和图片 */

.neirong_5 {

float: left;

position: relative;

}

 

.img_cuowei_1 {

position: absolute;

margin-left: 50px;

background-color: #f1f3ef;

}

 

.img_fangda_1 {

width: 340px;

}

 

.kuangkaung_1 {

width: 350px;

height: 400px;

border: 5px #000 solid;

float: left;

margin-top: 40px;

}

/* 左面的边框和图片一直到这 */

 

/* 时尚达人第二行第二个的第一行 */

.product_item_lk {

width: 390px;

height: 230px;

}

 

.product_left {

width: 190px;

height: 220px;

text-align: center;

float: left;

background-color: #fff;

}

/* 时尚达人第二行第二个的第一行的图片 */

.product_img {

width: 120px;

margin-top: 10px;

}

/* 时尚达人第二行第二个的第一行的图片d的名字 */

.product_item_name {

font-size: 14px;

height: 22px;

line-height: 22px;

color: #333;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

margin: 10px 15px;

}

 

.product_item_name .ahover {

color: #333;

}

 

.product_item_name .ahover:hover {

color: #f00;

}

/* ¥ */

.product_item_name b {

margin-top: -15px;

}

/* 价格 */

.product_item_name span {

font-size: 17px;

margin-top: -10px;

}

 

.product_item_name span, b {

color: #f00;

}

 

.right_item {

float: right;

}

 

.neirong_product {

margin: 0 auto;

}

/* sada的图片所在的div */

.max_img_sada {

width: 350px;

height: 226px;

}

/* sada图片所在的div */

.background_img {

background-image: url("../images/5acb108cN75395032.jpg");

background-repeat: no-repeat;

background-size: 210%;

background-position: -280px 0px;

margin-top: 20px;

}

 

.margin_img {

margin-top: 20px;

}

 

.SADA_span a {

color: #888;

font-size: 17px;

line-height: 60px;

}

/* sada所在的logo的div */

.SADA_logo {

width: 128.5px;

height: 43px;

border: 1px #888 solid;

margin: 10px 10px;

float: left;

}

 

.SADA_logo_img {

width: 128.5px;

}

 

.img_fangda_2 {

width: 340px;

}

/* 各种商标的logo的div */

.sahngbiao {

width: 370px;

height: 195px;

}

/* 商标第一行 */

.diyihang {

width: 370px;

height: 60px;

}

/* 一个商标的样式 */

.diyihang_one {

width: 85px;

height: 58px;

border: 1px #ccc solid;

float: left;

margin-left: 0.5px;

}

 

.shangbiao_logo_img {

width: 80px;

margin: 1.5px 2px;

}

 

以上就是我的第一次制作的京东首页的代码第一次制作一定会有很多冗余的代码,所以还是需要改进的。

下面就是我制作页面的大概的样子

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

这个就是使用的定位制作的使两个div错开排列达到这样的效果。

这个就是使用的固定定位制作的,使这个div在右面定位固定在右面。

 

转载于:https://my.oschina.net/u/3858557/blog/1828231

  • 2
    点赞
  • 0
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值