HTML入门小练习（三）
最新推荐文章于 2023-09-06 11:12:34 发布
maple-link
最新推荐文章于 2023-09-06 11:12:34 发布
阅读量969
收藏
7
点赞数
最新推荐文章于 2023-09-06 11:12:34 发布
阅读量969
收藏
7
点赞数
本次学习的任务目标是进一步学习CSS知识，仿照出苏宁易购的首页。
在本次学习中，尝试使用了CSS来实现二级菜单的折叠效果，主要是通过:hover伪类选择器改变盒子的display属性来实现二级菜单的展开与收缩，即二级菜单收缩时设为：display:none;二级菜单展开时改为：display:block，即可通过CSS来实现二级菜单的折叠
此外，在本次任务目标的编写中，由于基础知识相对不熟练和时间未分配充足，导致仍有部分原网页的布局与功能未能实现，还需加强基础练习。
效果图：
代码：
HTML：
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<link rel="stylesheet" type="text/css" href="苏宁易购.css">
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div class="nav-basic">
<div class="nav">
<div class="nav-left">
<div class="l-one">
<a href="#" class="nav-neirong" target="_blank">
<span>网站导航</span>
<i class="iconfont-xia wangzhan"></i>
</a>
<div class="wangzhanmen">
<dl class="list">
<dt>特色购物</dt>
<dd>
<p>
<a href="https://10035.suning.com/" target="_blank">苏宁互联</a>
</p>
<p>
<a href="https://dr.suning.com/" target="_blank">苏宁达人</a>
</p>
<p>
<a href="https://ka.suning.com/" target="_blank">苏宁卡</a>
</p>
<p>
<a href="https://g.suning.com/" target="_blank">苏宁国际</a>
</p>
<p>
<a href="https://hx.suning.com/" target="_blank">以旧换新</a>
</p>
<p>
<a href="https://quan.suning.com/lq_1.htm#classId=1" target="_blank">领券中心</a>
</p>
<p>
<a href="https://temai.suning.com/" target="_blank">苏宁Outlets</a>
</p>
<p>
<a href="https://www.suning.com/daogou/index.html" target="_blank">导购指南</a>
</p>
<p>
<a href="https://pindao.suning.com/city/zhtsgjsgnew.html" target="_blank">江苏馆</a>
</p>
</dd>
</dl>
<dl class="list">
<dt>主题频道</dt>
<dd>
<p>
<a href="https://dianqi.suning.com/" target="_blank">电器城</a>
</p>
<p>
<a href="https://chaoshi.suning.com/" target="_blank">苏宁超市</a>
</p>
<p>
<a href="https://shouji.suning.com/" target="_blank">手机</a>
</p>
<p>
<a href="https://pindao.suning.com/city/diannao.htm?safp=d488778a.homepagev8.sTMJP.14&safpn=10001" target="_blank">电脑</a>
</p>
<p>
<a href="https://pindao.suning.com/city/jiazhuang.htm?safp=d488778a.homepagev8.sTMJP.15&safpn=10001" target="_blank">家装馆</a>
</p>
</dd>
</dl>
<dl class="list">
<dt>生活助手</dt>
<dd>
<p>
<a href="https://10035.suning.com/" target="_blank">零钱宝</a>
<i class="hot"></i>
</p>
<p>
<a href="https://dr.suning.com/" target="_blank">约服务</a>
</p>
<p>
<a href="https://ka.suning.com/" target="_blank">保险</a>
</p>
</dd>
</dl>
<dl class="list">
<dt>会员服务</dt>
<dd>
<p>
<a href="https://vip.suning.com/?safp=d488778a.homepagev8.sTMJP.19&safpn=10001" target="_blank">会员联盟</a>
<i class="hot"></i>
</p>
<p>
<a href="https://ewsfspc.suning.com/extendIns/index.htm" target="_blank">延长保修</a>
</p>
<p>
<a href="https://pay.suning.com/epp-epw/login/login.action?res_message=NOT_LOGIN&res_code=4" target="_blank">易付宝</a>
</p>
<p>
<a href="https://licai.suning.com/lcportal/licaiIndex.htm?res_message=NOT_LOGIN&res_code=4" target="_blank">苏宁理财</a>
</p>
<p>
<a href="https://jinrong.suning.com/?safp=d488778a.homepagev8.sTMJP.23&safpn=10001" target="_blank">苏宁金融</a>
</p>
</dd>
</dl>
<dl class="list">
<dt>更多热点</dt>
<dd>
<p>
<a href="https://www.pptv.com/" target="_blank">PP视频</a>
</p>
<p>
<a href="https://cc.suning.com/" target="_blank">合作招商</a>
<i class="hot"></i>
</p>
<p>
<a href="https://union.suning.com/" target="_blank">苏宁联盟</a>
</p>
<p>
<a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fueip.suning.com%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fueip.suning.com%252Fpc%252Findex.htm&multipleActive=false" target="_blank">用户体验</a>
</p>
<p>
<a href="https://gongyi.suning.com/" target="_blank">苏宁公益</a>
<i class="hot"></i>
</p>
<p>
<a href="https://snyh.suning.com/" target="_blank">苏宁有货</a>
</p>
</dd>
</dl>
</div>
</div>
<div class="l-two">
<a href="https://sop.suning.com/" class="nav-neirong" target="_blank">
<span>商家入驻</span>
<i class="iconfont-xia shangjia"></i>
</a>
<div class="shangjiamen">
<dl class="list-shangjia">
<dd>
<p>
<a href="https://10035.suning.com/" target="_blank">合作招商</a>
</p>
<p>
<a href="https://dr.suning.com/" target="_blank">服务市场</a>
</p>
<p>
<a href="https://ka.suning.com/" target="_blank">金融中心</a>
</p>
<p>
<a href="https://g.suning.com/" target="_blank">易通天下</a>
</p>
<p>
<a href="https://hx.suning.com/" target="_blank">规则中心</a>
</p>
<p>
<a href="https://quan.suning.com/lq_1.htm#classId=1" target="_blank">规则众议院</a>
</p>
</dd>
</dl>
</div>
</div>
<div class="l-three">
<a href="" class="nav-neirong" target="_blank">
<span>客户服务</span>
<i class="iconfont-xia kehu"></i>
</a>
<div class="kehufuwu">
<a href="https://pindao.suning.com/city/bangke.html?safp=d488778a.homepagev8.Fgfr4.2&safpn=10001" target="_blank">苏宁帮客</a>
<a href="https://hc.suning.com/help/home.htm" target="_blank">帮助中心</a>
<a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fsnasss.suning.com%2Fsnass-web%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fsnasss.suning.com%252Fsnass-web%252Fpc%252FreturnGoods%252FtoAfterSaleApplyList.do&loginTheme=b2c&multipleActive=false" target="_blank">退还/维修</a>
<a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fueip.suning.com%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fueip.suning.com%252Fpc%252Findex.htm&multipleActive=false" target="_blank">意见反馈</a>
<a href="https://cuxiao.suning.com/serve.html?safp=d488778a.homepagev8.Fgfr4.6&safpn=10001" target="_blank">30天包退</a>
<a href="https://hc.suning.com/serviceSummary/getBannerListPC.htm" target="_blank">省心购</a>
<a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Fassss.suning.com%2Fassss-web%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fassss.suning.com%252Fassss-web%252Fpc%252FtelephoneCustomer%252Fhome.do%253Fsafpn%253D10001&loginTheme=b2c&multipleActive=false" target="_blank">电话客服</a>
<a href="https://yxchat.suning.com/index.html?bizCode=005A010101000000&custNo=&bizSeq=005A" target="_blank">
<span>在线咨询</span>
<i class="zixun"></i>
</a>
</div>
</div>
<div class="l-four">
<a href="#" class="wza">网页无障碍</a>
</div>
<div class="l-five">
<div class="city">
<a href="#" class="city-s">
<i class="img-dingwei"></i>
<em class="adress">
<span class="linyi">临沂</span>
</em>
<b class="xiajiantou"></b>
</a>
</div>
</div>
</div>
<div class="nav-right">
<div class="dengluzhuce">
<a class="login" href="https://passport.suning.com/ids/login?service=https%3A%2F%2Floginst.suning.com%2F%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Fwww.suning.com%252F&method=GET&loginTheme=b2c">请登录</a>
<a class="login-jc" href="https://reg.suning.com/person.do">注册有礼</a>
</div>
<div class="dingdan">
<a href="https://passport.suning.com/ids/login?service=https%3A%2F%2Forder.suning.com%2Fauth%3FtargetUrl%3Dhttps%253A%252F%252Forder.suning.com%252Forder%252ForderList.do&loginTheme=b2c&multipleActive=false" class="wddd">
<span>我的订单</span>
<i class="iconfont-xia tub-dingdan"></i>
</a>
<div class="dingdanmen">
<a href="#">
<span>待支付</span>
</a>
<a href="#">
<span>待收货</span>
</a>
<a href="#">
<span>
待评价
</span>
</a>
<a href="#">
<span>修改订单</span>
</a>
</div>
</div>
<div class="wodeyigou">
<a href="#" class="yigou">
<span>我的易购</span>
<i class="iconfont-xia tub-dingdan"></i>
</a>
<div class="yigoumen">
<div class="denglu">
<a href="#" class="img-denglu">
<img src="tool-logo.png">
</a>
<div class="nei-denglu">
<a href="#" class="dl">请登录</a>
</div>
</div>
<a href="#" target="_blank" class="dls">我的消息</a>
<a href="#" target="_blank" class="dls dls1">我的关注</a>
<a href="https://passport.suning.com/ids/trustLogin?sysCode=epp&targetUrl=http://my.jr.suning.com/sfp/accountAssets/index.htm" target="_blank" class="dls">我的金融</a>
<a href="#" target="_blank" class="dls dls1">苏宁会员</a>
<a href="https://rxf.suning.com/epps-cpf/accountMgt/assetOverview.do" target="_blank" class="dls">我的任性付</a>
<a href="#" target="_blank" class="dls dls2">我的优惠券</a>
</div>
</div>
<a href="#" class="suninghuiyuan">
<span>苏宁会员</span>
</a>
<div class="gouwuche">
<a href="https://shopping.suning.com/cart.do" class="nei-gouwu">
<i class="che"></i>
<span class="s-1">购物车</span>
<span class="s-2">0</span>
<i class="iconfont-xia tub-dingdan"></i>
</a>
</div>
<a class="yifubao" href="https://passport.suning.com/ids/trustLogin?sysCode=epp&agentType=pc&targetUrl=https://pay.suning.com/epp-epw/login/login.action">
<span>易付宝</span>
</a>
<a class="qiyecaigou" href="https://b.suning.com/?safp=d488778a.homepagev8.TJwSg.0&safpn=10001">
<span>企业采购</span>
</a>
<div class="shoujisuning">
<a class="su-phone" href="#">
<span>手机苏宁</span>
<i class="iconfont-xia tub-dingdan"></i>
</a>
</div>
</div>
</div>
</div>
<div class="header">
<div class="bbg"></div>
<div class="header-nei">
<div class="l-herder">
<a href="" class="lherder-img">
<img src="snyg.png">
</a>
</div>
<div class="r-herder">
<div class="search">
<i class="search-tub"></i>
<form>
<div class="box-search">
<input id="ssk" type="text">
</div>
<input class="bot" type="submit" value="搜索">
<div class="hot-search">
<a class="hots hot2 hotss" href="">手机</a>
<a class="hots hot1" href="">爆款洗衣机</a>
<a class="hots hot2" href="">冰箱</a>
<a class="hots hot1" href="">奶粉特惠购</a>
<a class="hots hot1" href="">品质家具购</a>
<a class="hots hot2" href="">电视</a>
<a class="hots hot2" href="">ipad</a>
<a class="hots hot2" href="">热水器</a>
<a class="hots hot2" href="">沙发</a>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="tops">
<div class="fenlei">
<a href="#" class="l-fl">
<i class="nei-fenlei"></i>
<span>分类</span>
</a>
<div class="left-list">
<div class="lllists">
<div class="list-cover"></div>
<ul class="list-nei">
<li class="li-nei1">
<img src="imgs/shouji.png">
<a href="">手机</a>
<em>/</em>
<a href="">运营商</a>
<div class="lili1">
<div class="small-top">
<a href="">手机电脑馆</a>
<a href="">手机频道</a>
<a href="">智能数码</a>
<a href="">以旧换新</a>
<a href="">新品抢先</a>
<a href="">网上营业厅</a>
<a href="">企业采购</a>
</div>
<div class="small-mid">
<dl class="ddl-1">
<dt>
<a href="">手机通讯</a>
</dt>
<dd>
<a href="">全部手机</a>
<a href="">5G手机</a>
<a href="">游戏手机</a>
<a href="">iPhone</a>
<a href="">小米</a>
<a href="">iQOO</a>
<a href="">vivo</a>
<a href="">OPPO</a>
<a href="">荣耀</a>
<a href="">华为</a>
<a href="">一加</a>
<a href="">三星</a>
<a href="">魅族</a>
<a href="">realme</a>
<a href="">守护宝</a>
<a href="">努比亚</a>
<a href="">诺基亚</a>
<a href="">以旧换新</a>
<a href="">手机维修</a>
</dd>
</dl>
<dl class="ddl-2">
<dt>
<a href="">手机配件</a>
</dt>
<dd>
<a href="">移动电源</a>
<a href="">苹果数据线</a>
<a href="">安卓数据线</a>
<a href="">三合一数据线</a>
<a href="">手机壳</a>
<a href="">手机耳机</a>
<a href="">手机贴膜</a>
<a href="">手机U盘</a>
<a href="">充电器</a>
<a href="">手机储存卡</a>
<a href="">无线充电器</a>
<a href="">有线耳机</a>
<a href="">手机电池</a>
<a href="">自拍杆</a>
<a href="">手机支架</a>
</dd>
</dl>
<dl class="ddl-3">
<dt>
<a href="">智能设备</a>
</dt>
<dd>
<a href="">智能手表</a>
<a href="">智能门锁</a>
<a href="">小米</a>
<a href="">凯迪仕</a>
<a href="">无人机</a>
<a href="">平衡车</a>
<a href="">智能摄像头</a>
<a href="">智能手环</a>
<a href="">智能翻译机</a>
<a href="">智能机器人</a>
<a href="">VR眼镜</a>
<a href="">智能健康秤</a>
<a href="">智能健康检测</a>
</dd>
</dl>
<dl class="ddl-4">
<dt>
<a href="">影音电子</a>
</dt>
<dd>
<a href="">无线耳机</a>
<a href="">降噪耳机</a>
<a href="">AirPods</a>
<a href="">华为</a>
<a href="">小米</a>
<a href="">索尼</a>
<a href="">真无线耳机</a>
<a href="">头戴式耳机</a>
<a href="">蓝牙耳机</a>
<a href="">运动耳机</a>
<a href="">蓝牙音箱</a>
<a href="">MP3/MP4</a>
<a href="">录音笔</a>
<a href="">收音/收音机</a>
</dd>
</dl>
<dl class="ddl-5">
<dt>
<a href="">电子教育</a>
</dt>
<dd>
<a href="">学生电脑/学习机</a>
<a href="">步步高家教机</a>
<a href="">小天才儿童手表</a>
<a href="">儿童手表</a>
<a href="">电子词典</a>
<a href="">故事机</a>
<a href="">翻译机</a>
<a href="">点读机/笔</a>
<a href="">电子书</a>
<a href="">复读机</a>
</dd>
</dl>
<dl class="ddl-6">
<dt>
<a href="">二手优品</a>
</dt>
<dd>
<a href="">iPhone11</a>
<a href="">iPhone 7</a>
<a href="">iPhone 8</a>
<a href="">iPhone X</a>
<a href="">iPhone 8p</a>
<a href="">iPhone 7p</a>
<a href="">oppo</a>
<a href="">vivo</a>
<a href="">三星</a>
<a href="">华为</a>
<a href="">小米</a>
</dd>
</dl>
<dl class="ddl-7">
<dt>
<a href="">苏宁互联</a>
</dt>
<dd>
<a href="">尾号888靓号</a>
<a href="">0月组号卡</a>
<a href="">20GB大流量</a>
<a href="">超级靓号</a>
<a href="">立即选号</a>
</dd>
</dl>
<dl class="ddl-8">
<dt>
<a href="">营业厅</a>
</dt>
<dd>
<a href="">手机卡</a>
<a href="">大流量卡</a>
<a href="">宽带</a>
<a href="">办套餐</a>
<a href="">充话费/流量</a>
<a href="">中国移动</a>
<a href="">中国电信</a>
<a href="">中国联通</a>
</dd>
</dl>
<dl class="ddl-9">
<dt>
<a href="">会员卡</a>
</dt>
<dd>
<a href="">去哪儿+芒果TV视频双年卡</a>
<a href="">芒果TV年卡</a>
<a href="">同程黑鲸会员送腾讯视频年卡</a>
</dd>
</dl>
</div>
<div></div>
</div>
</li>
<li class="li-nei2">
<img src="imgs/dianshi.png">
<a href="">家用电器</a>
<em>/</em>
<a href="">帮客</a>
<div class="lili2">
<div class="small-top">
<a href="">电器城</a>
<a href="">空调频道</a>
<a href="">冰箱/洗衣机频道</a>
<a href="">彩电频道</a>
<a href="">以旧换新</a>
</div>
<div class="small-mid">
<dl class="ddl-1">
<dt>
<a href="">空调</a>
</dt>
<dd>
<a href="">【优选空调 以旧换新至高省650】</a>
<a href="">挂机</a>
<a href="">柜机</a>
<a href="">变频</a>
<a href="">新风空调</a>
<a href="">移动空调</a>
<a href="">空调套餐</a>
<a href="">1匹</a>
<a href="">1.5匹</a>
<a href="">2匹</a>
<a href="">3匹</a>
<a href="">美的</a>
<a href="">格力</a>
<a href="">海尔</a>
<a href="">TCL</a>
<a href="">海信</a>
<a href="">科龙</a>
<a href="">华凌</a>
</dd>
</dl>
<dl class="ddl-2">
<dt>
<a href="">电视</a>
</dt>
<dd>
<a href="">【电视家影 至高享24期免息】</a>
<a href="">75英寸</a>
<a href="">65英寸</a>
<a href="">55英寸</a>
<a href="">海信</a>
<a href="">创维</a>
<a href="">小米</a>
<a href="">TCL</a>
<a href="">PPTV</a>
<a href="">索尼</a>
<a href="">长虹</a>
<a href="">三星</a>
<a href="">智慧屏</a>
<a href="">4K超高清</a>
<a href="">8K超高清</a>
<a href="">全面屏</a>
<a href="">家庭影院</a>
<a href="">激光电视</a>
<a href="">商用显示</a>
<a href="">配件</a>
</dd>
</dl>
<dl class="ddl-3">
<dt>
<a href="">冰箱</a>
</dt>
<dd>
<a href="">【冰箱洗衣机 每1000减100】</a>
<a href="">多门</a>
<a href="">对开门</a>
<a href="">十字对开</a>
<a href="">冰箱洗衣机套餐</a>
<a href="">双门</a>
<a href="">风冷（无霜）</a>
<a href="">三门</a>
<a href="">海尔</a>
<a href="">容声</a>
<a href="">美的</a>
<a href="">美菱</a>
<a href="">西门子</a>
<a href="">海信</a>
</dd>
</dl>
<dl class="ddl-4">
<dt>
<a href="">洗衣机</a>
</dt>
<dd>
<a href="">【洁净洗护 滚筒低至1199元】</a>
<a href="">滚筒</a>
<a href="">洗烘一体机</a>
<a href="">波轮</a>
<a href="">洗衣机烘干套餐</a>
<a href="">大容量</a>
<a href="">烘干机</a>
<a href="">迷你洗衣机</a>
<a href="">变频</a>
<a href="">海尔</a>
<a href="">小天鹅</a>
<a href="">美的</a>
<a href="">西门子</a>
<a href="">海信</a>
<a href="">松下</a>
</dd>
</dl>
<dl class="ddl-5">
<dt>
<a href="">冷柜</a>
</dt>
<dd>
<a href="">【爆款冷柜799元起】</a>
<a href="">家用冷柜</a>
<a href="">商用展示柜</a>
<a href="">商用冰柜</a>
<a href="">酒柜/冰吧</a>
<a href="">厨房冷柜</a>
<a href="">星星</a>
<a href="">美菱</a>
<a href="">容声</a>
<a href="">海尔</a>
<a href="">澳柯玛</a>
</dd>
</dl>
<dl class="ddl-6">
<dt>
<a href="">试听影音</a>
</dt>
<dd>
<a href="">家庭影院</a>
<a href="">便携音箱</a>
<a href="">回音壁</a>
<a href="">DVD</a>
<a href="">功放</a>
<a href="">KTV音响</a>
<a href="">智能投影</a>
</dd>
</dl>
<dl class="ddl-7">
<dt>
<a href="">帮客服务</a>
</dt>
<dd>
<a href="">【清凉夏日，148元洗两台空调】</a>
<a href="">家电清洗</a>
<a href="">家政保洁</a>
<a href="">洗衣洗鞋</a>
<a href="">家电维修</a>
<a href="">安装拆机</a>
<a href="">除甲醛</a>
<a href="">帮客材配</a>
<a href="">帮客蓝狮</a>
</dd>
</dl>
</div>
</div>
</li>
<li>
<img src="imgs/youyanji.png">
<a href="">厨卫</a>
<em>/</em>
<a href="">生活家电</a>
<em>/</em>
<a href="">厨具</a>
</li>
<li>
<img src="imgs/diannao.png">
<a href="">电脑办公</a>
<em>/</em>
<a href="">相机</a>
</li>
<li>
<img src="imgs/shafa.png">
<a href="">家具</a>
<em>/</em>
<a href="">家装</a>
<em>/</em>
<a href="">家纺</a>
<em>/</em>
<a href="">灯具</a>
</li>
<li>
<img src="imgs/bbtang.png">
<a href="">食品</a>
<em>/</em>
<a href="">酒水</a>
<em>/</em>
<a href="">生鲜</a>
<em>/</em>
<a href="">特产</a>
</li>
<li>
<img src="imgs/kouhong.png">
<a href="">美妆</a>
<em>/</em>
<a href="">个护</a>
<em>/</em>
<a href="">清洁</a>
<em>/</em>
<a href="">宠物</a>
</li>
<li>
<img src="imgs/yingerche.png">
<a href="">母婴</a>
<em>/</em>
<a href="">玩具</a>
<em>/</em>
<a href="">车床</a>
<em>/</em>
<a href="">童装</a>
</li>
<li>
<img src="imgs/lanqiu.png">
<a href="">运动</a>
<em>/</em>
<a href="">户外</a>
<em>/</em>
<a href="">国米</a>
<em>/</em>
<a href="">骑行</a>
</li>
<li>
<img src="imgs/qunzi.png">
<a href="">女装</a>
<em>/</em>
<a href="">男装</a>
<em>/</em>
<a href="">内衣</a>
<em>/</em>
<a href="">鞋靴</a>
</li>
<li>
<img src="imgs/baobao.png">
<a href="">箱包</a>
<em>/</em>
<a href="">钟表</a>
<em>/</em>
<a href="">珠宝</a>
<em>/</em>
<a href="">艺术</a>
</li>
<li>
<img src="imgs/qiche.png">
<a href="">汽车</a>
<em>/</em>
<a href="">电摩</a>
<em>/</em>
<a href="">汽车用品</a>
</li>
<li>
<img src="imgs/tushu.png">
<a href="">图书</a>
<em>/</em>
<a href="">艺术</a>
<em>/</em>
<a href="">原版</a>
<em>/</em>
<a href="">文字</a>
</li>
<li>
<img src="imgs/yaoxiang.png">
<a href="">医药健康</a>
<em>/</em>
<a href="">计生情趣</a>
</li>
<li>
<img src="imgs/gupiao.png">
<a href="">理财</a>
<em>/</em>
<a href="">分期</a>
<em>/</em>
<a href="">便民</a>
</li>
</ul>
</div>
</div>
</div>
<div class="m-fenlei">
<ul class="fenlei-nav">
<li class="fenlei-top">
<a href="">
<img class="icon" src="https://image2.suning.cn/uimg/cms/img/161185054090483911.png">
</a>
</li>
<li class="lii">
<a href="">
<span>电器城</span>
</a>
</li>
<li class="lii">
<a href="">
<span>手机数码</span>
</a>
</li>
<li class="lii">
<a href="">
<span>苏宁超市</span>
</a>
</li>
<li class="lii">
<a href="">
<span>家具建材</span>
</a>
</li>
<li class="lii">
<a href="">
<span>生活家电</span>
</a>
</li>
<li class="lii">
<a href="">
<span>帮客服务</span>
</a>
</li>
<li class="lii">
<a href="">
<span>金融</span>
</a>
</li>
</ul>
</div>
<div class="r-fenlei">
<a href="" class="gongshi">
<img src="https://image1.suning.cn/uimg/cms/img/159525719075727245.png">
</a>
</div>
</div>
<div class="qingli"></div>
<div class="guanggao">
<div class="nei-guanggao">
<div class="beijing">
<ul>
<li>
<a href="" class="aa-1">
<img src="https://image4.suning.cn/uimg/cms/img/165724194289534349.png">
</a>
<a href="" class="aa-2">
<img src="https://image5.suning.cn/uimg/cms/img/165752251786976534.jpg">
</a>
</li>
</ul>
</div>
</div>
<div class="xia-guanggao">
<div class="xia-list">
<ul>
<li>
<a href="">
<img src="https://oss.suning.com/adpp/creative_kit/material/picture/20211119-048317170f5a4018b9cc4bddc817fea133c331fa3e52466f.png">
</a>
</li>
<li>
<a href="">
<img src="https://oss.suning.com/adpp/creative_kit/material/picture/20220209-b6d966115c0647a987fe376dfdff2ee725b7b7ebe04647d1.png">
</a>
</li>
<li>
<a href="">
<img src="https://oss.suning.com/adpp/creative_kit/material/picture/20210906-8108ad119b6d46dfbe01d606b54c7e3e85d67bf321e64a15.png">
</a>
</li>
<li>
<a href="">
<img src="https://oss.suning.com/adpp/creative_kit/material/picture/20220214-0d2eaccd362040de9b46b2db22d818ddb58eb246bfbd46fe.png">
</a>
</li>
</ul>
</div>
</div>
<div class="r-guanggao">
<div class="top-guanggao">
<div class="img"></div>
<div class="denglulu">
<div class="ddll">
<p>Hi，欢迎来到苏宁易购</p>
<a href="">登录</a>
<i>|</i>
<a href="">注册</a>
</div>
<a href="" class="xinren">199新人专享</a>
<a href="" class="tequan">开通super尊享特权</a>
</div>
<div class="last">
<a href="">
<img src="https://image2.suning.cn/uimg/cms/img/159503668779632788.png">
<p>领红包</p>
</a>
<a href="">
<img src="https://image5.suning.cn/uimg/cms/img/165752920559657094.png">
<p>以旧换新</p>
</a>
<a href="">
<img src="https://image5.suning.cn/uimg/cms/img/159503691577022653.png">
<p>抢神券</p>
</a>
</div>
</div>
<div class="di-guanggao">
<ul>
<li>
<a href="">
<img src="https://image5.suning.cn/uimg/cms/img/165750662907502282.png">
<p>手机馆</p>
</a>
</li>
<li>
<a href="">
<img src="https://image3.suning.cn/uimg/cms/img/165750705002170538.png">
<p>电器城</p>
</a>
</li>
<li>
<a href="">
<img src="https://image2.suning.cn/uimg/cms/img/165752909464915600.png">
<p>家装馆</p>
</a>
</li>
<li>
<a href="">
<img src="https://image1.suning.cn/uimg/cms/img/159503709286557735.png">
<p>理财</p>
</a>
</li>
<li>
<a href="">
<img src="https://image1.suning.cn/uimg/cms/img/159503712299629769.png">
<p>分期</p>
</a>
</li>
<li>
<a href="">
<img src="https://image5.suning.cn/uimg/cms/img/165750696392811339.png">
<p>苏宁卡</p>
</a>
</li>
<li>
<a href="">
<img src="https://image4.suning.cn/uimg/cms/img/165750681102299986.png">
<p>药品信息</p>
</a>
</li>
<li>
<a href="">
<img src="https://image2.suning.cn/uimg/cms/img/165752913610070145.png">
<p>苏宁帮客</p>
</a>
</li>
<li>
<a href="">
<img src="https://image1.suning.cn/uimg/cms/img/165750694630657957.png">
<p>苏宁公益</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="fl-1">
<div class="aarr">
<div class="bbrr">
<div class="rr">
<div class="rr-tit">
<a href="">
<img src="https://image2.suning.cn/uimg/cms/img/165720359406245083.png">
</a>
</div>
<div class="rr-nei">
<div class="tab">
<div class="ttbb">
<div class="aacc">
<ul>
<li>
<a href="">
<img src="https://imgservice5.suning.cn/uimg1/b2c/image/WUPNDInlXPUSPeqe9FPsvw.jpg_200w_200h_4e">
<p class="title">【9瓶】天地精华低钠淡泉水1L*9/箱天然矿泉适合母婴幼儿水天然矿泉水瓶装便携</p>
<p class="jge">
<span class="jiage">
<i>¥</i>
<em>69.90</em>
</span>
</p>
</a>
</li>
<li>
<a href="">
<img src="https://image1.suning.cn/uimg/cms/img/165759048526814430.jpg">
<p class="title">VAPE日本未来驱蚊水金色三倍天使 200ml/瓶 宝宝儿童驱蚊喷雾驱蚊液蚊叮虫咬 新生儿可用</p>
<p class="jge">
<span class="jiage">
<i>¥</i>
<em>39.00</em>
</span>
</p>
</a>
</li>
<li>
<a href="">
<img src="https://image1.suning.cn/uimg/cms/img/165750569250157114.jpg">
<p class="title">【5KG】北大荒东北长粒香大米5KG 当季新米 现磨现发 米砖包装 粳米稻香稻花香长粒香</p>
<p class="jge">
<span class="jiage">
<i>¥</i>
<em>39.90</em>
</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aarr2">
<div class="bbrr">
<div class="rr">
<div class="rr-tit">
<a href="">
<img src="https://image5.suning.cn/uimg/cms/img/161190026050858417.png">
</a>
</div>
<div class="rr-nei">
<div class="tab">
<div class="ttbb">
<div class="aacc">
<ul>
<li>
<a href="">
<img src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/04/19/17/0b3cd8df8e76405d9190e7cd5d87b0e0.png?format=200h_200w_4e">
<p class="title">容声(Ronshen)592升对开门冰箱双开门大容量 一级能效双变频 AIF+离子抑菌净味 BCD-592WD16HPA</p>
<p class="jge">
<span class="jiage">
<i>¥</i>
<em>2999.00</em>
</span>
</p>
</a>
</li>
<li>
<a href="">
<img src="https://imgservice.suning.cn/uimg1/sniss/improve/FDW4bI3nM4DKoMY--9Cuxw.jpg?format=200h_200w_4e">
<p class="title">大宇(DAEWOO)多功能锅网红料理锅 家用电火锅电热炒锅电烧烤炉电煮锅不粘锅 S11升级款白色</p>
<p class="jge">
<span class="jiage">
<i>¥</i>
<em>899.00</em>
</span>
</p>
</a>
</li>
<li>
<a href="">
<img src="https://imgservice.suning.cn/uimg1/sniss/improve/KHMb-xHYiB5MP_TiN3Rmlg.jpg?format=200h_200w_4e">
<p class="title">西门子(SIEMENS)501升 超薄对开门冰箱 风冷无霜变频节能 BCD-501W(KX50NA30TI)</p>
<p class="jge">
<span class="jiage">
<i>¥</i>
<em>5199.90</em>
</span>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div></div>
</body>
</html>CSS：
* {
padding: 0;
margin: 0;
}
@font-face{
font-family:'ng-iconfont';
src:url('fonts/iconfont.eot?var=06');
src:url('fonts/iconfont.eot?#iefix06') format('embedded-opentype'),
url('fonts/iconfont.woff?var=06') format('woff'),
url('fonts/iconfont.ttf?var=06') format('truetype'),
url('fonts/iconfont.svg#uxiconfont?var=06') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
body{
background-color: #f2f2f2;
}
.nav-basic{
height: 35px;
width: 100%;
line-height: 35px;
background-color: #f5f5f5;
border-bottom-width: 1px;
border-bottom-color: rgb(238, 238, 238);
border-bottom-style: solid;
z-index: 90;
}
.nav{
position: relative;
width: 990px;
min-width: 990px;
margin: 0 auto;
clear: both;
}
.nav-left{
position: relative;
left: -108px;
float: left;
font-size: 0;
}
.l-one,.l-two,.l-three,.l-four{
position: relative;
margin-left: -1px;
float: left;
}
.l-two{
width: 81px;
height: 35px;
}
.l-three{
width: 83px;
}
.l-five{
display: block;
float: left;
height: 36px;
}
.nav-basic a{
color: #666;
outline: 0;
}
.nav-neirong{
display: block;
position: relative;
width: 65px;
height: 35px;
line-height: 35px;
float: left;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
z-index: 92;
}
.nav-left span{
font-size: 12px;
position: relative;
display: inline-block;
}
.iconfont-xia{
font-family:'ng-iconfont';
font-style: normal;
display: inline-block;
font-size: 10px;
width: 10px;
color: #bbb;
margin-left: 3px;
transition: transform .2s ease-in;
transform-origin: 50% 50%;
}.wza{
width: 100%;
height: 35px;
line-height: 35px;
font-size: 12px;
color: #666;
text-decoration: none;
display: block;
}
.city{
position: relative;
display: inline-block;
font-size: 12px;
}
.city-s{
position: relative;
display: inline-block;
height: 24px;
padding: 6px 5px 6px 6px;
color: #333;
line-height: 14px;
outline: none;
cursor: pointer;
text-decoration: none;
}
.img-dingwei{
float: left;
width: 12px;
height: 15px;
background-image: url(index.png);
background-position: -387px -183px;
margin: 4px 6px 0 6px;
}
.adress{
font-style: normal
}
.linyi{
color: rgb(51, 51, 51);
padding-right: 5px;
line-height: 24px;
}
.xiajiantou{
position: relative;
top: 6px;
left: -4px;
display: inline-block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
margin-right: 5px;
border-color: #bbb transparent transparent;
border-width: 6px 4px;
border-style: solid dashed dashed;
}
.l-one:hover .nav-neirong{
color: #666;
line-height: 33px;
height: 35px;
padding: 0 9px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.l-one .nav-neirong:hover span{
color: #f60;
cursor: default;
}
.l-one .nav-neirong:hover .wangzhan{
transform: rotate(-180deg);
}
.l-two:hover .nav-neirong{
color: #666;
line-height: 33px;
height: 35px;
padding: 0 9px;
padding-right: 5px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.l-two .nav-neirong:hover span{
color: #f60;
cursor: default;
}
.l-two .nav-neirong:hover .shangjia{
transform: rotate(-180deg);
}
.l-three:hover .nav-neirong{
color: #666;
line-height: 33px;
height: 35px;
padding: 0 9px;
padding-right: 6px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.l-three .nav-neirong:hover span{
color: #f60;
cursor: default;
}
.l-three .nav-neirong:hover .kehu{
transform: rotate(-180deg);
}
.wza:hover{
color: #f60;
}
.wangzhanmen{
display: none;
position: absolute;
top: 35px;
width: 988px;
border: 1px solid #ddd;
background-color: #fff;
padding: 20px 0;
left: auto;
z-index: 91;
}
.l-one:hover .wangzhanmen{
display: block;
}
.list{
width: 176px;
border-right: 1px solid #eee;
padding-left: 20px;
float: left;
}
.wangzhanmen .list dt{
height: 25px;
width: 100%;
font-size: 14px;
line-height: 17px;
font-family: "Microsoft Yahei";
}
.nav-left .list dd{
width: 100%;
overflow: hidden;
}
.nav-left .list dd p{
float: left;
height: 25px;
width: 78px;
line-height: 25px;
}
.nav-left .list dd p a{
font-size: 12px;
display: inline-block;
position: relative;
padding: 0;
color: #666;
text-decoration: none;
}
.nav-left .list dd p a:hover{
color: #f60;
}
.wangzhanmen .hot{
position: absolute;
display: inline-block;
height: 16px;
width: 16px;
background-image: url(npbg.png);
background-position: 0 -205px;
background-repeat: no-repeat;
}
.shangjiamen{
display: none;
position: absolute;
top: 35px;
border: 1px solid #ddd;
background-color: #fff;
left: 0;
right: auto;
width: 162px;
padding-top: 5px;
padding-bottom: 5px;
z-index: 91;
}
.l-two:hover .shangjiamen{
display: block;
}
.list-shangjia{
width: 176px;
padding-left: 10px;
float: left;
}
.nav-left .list-shangjia dd{
width: 100%;
overflow: hidden;
}
.nav-left .list-shangjia dd p{
float: left;
height: 25px;
width: 78px;
line-height: 25px;
}
.nav-left .list-shangjia dd p a{
font-size: 12px;
display: inline-block;
position: relative;
padding: 0;
color: #666;
text-decoration: none;
}
.nav-left .list-shangjia dd p a:hover{
color: #f60;
}
.kehufuwu{
display: none;
position: absolute;
top: 35px;
border: 1px solid #ddd;
background-color: #fff;
left: auto;
right: 0;
width: 162px;
padding-top: 5px;
padding-bottom: 5px;
z-index: 91;
}
.l-three:hover .kehufuwu{
display: block;
}
.l-three .kehufuwu a{
display: block;
width: 71px;
height: 28px;
padding: 0;
float: left;
line-height: 28px;
font-size: 12px;
text-decoration: none;
padding-left: 10px;
}
.l-three .kehufuwu a:hover{
color: #f60;
}
.kehufuwu .zixun{
font-family:'ng-iconfont';
font-style: normal;
font-size: 16px;
line-height: 27px;
color: #ffd200;
}
.nav-right{
position: absolute;
right: -95px;
float: right;
height: 35px;
font-size: 0;
}
.dengluzhuce{
position: relative;
float: left;
height: 35px;
line-height: 35px;
padding: 0 10px;
}
.dengluzhuce a{
font-size: 12px;
text-decoration: none;
}
.dengluzhuce a:hover{
color: #f60;
}
.dengluzhuce .login-jc{
position: relative;
margin-left: 10px;
color: #f60;
}
.dengluzhuce .login-jc:hover{
color: rgb(230, 92, 0);
}
.dingdan{
position: relative;
float: left;
margin-left: -1px;
}
.wddd{
display: block;
position: relative;
float: left;
padding: 0 10px;
height: 35px;
line-height: 35px;
width: 63px;
}
.wddd span{
display: inline-block;
font-size: 12px;
}
.dingdanmen{
display: none;
position: absolute;
top: 35px;
border: 1px solid #ddd;
background-color: #fff;
left: 0;
width: 81px;
padding-bottom: 5px;
z-index: 91;
}
.dingdanmen a{
display: block;
height: 30px;
width: 71px;
line-height: 30px;
padding-left: 10px;
text-decoration: none;
}
.dingdanmen span{
font-size: 12px;
}
.dingdanmen span:hover{
color: #f60;
}
.dingdan:hover .wddd{
color: #666;
line-height: 33px;
height: 35px;
padding: 0 9px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.dingdan .wddd:hover span{
color: #f60;
cursor: default;
}
.dingdan .wddd:hover .tub-dingdan{
transform: rotate(-180deg);
}
.dingdan:hover .dingdanmen{
display: block;
}
.wodeyigou{
position: relative;
float: left;
margin-left: -1px;
}
.yigou{
display: block;
position: relative;
float: left;
height: 35px;
line-height: 35px;
padding: 0 10px;
width: 63px;
}
.yigou span{
display: inline-block;
font-size: 12px;
}
.yigoumen{
display: none;
position: absolute;
top: 35px;
border: 1px solid #ddd;
background-color: #fff;
left: 0;
width: 203px;
padding-bottom: 5px;
z-index: 91;
}
.denglu{
width: 180px;
height: 56px;
margin: 5px 10px;
}
.img-denglu{
float: left;
width: 54px;
height: 54px;
border: 1px solid #f7f7f7;
padding: 0;
}
.img-denglu img{
display: block;
width: 54px;
height: 54px;
border: 0;
}
.nei-denglu{
float: left;
width: 86px;
height: 56px;
padding-left: 20px;
}
.nei-denglu .dl{
display: block;
height: 28px;
width: 40px;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
line-height: 28px;
float: none;
padding: 0;
margin-top: 14px;
}
.nei-denglu .dl:hover{
color: #f60;
}
.yigoumen .dls{
font-size: 12px;
display: block;
height: 30px;
line-height: 30px;
padding-left: 20px;
float: left;
text-decoration: none;
}
.yigoumen .dls:hover{
color: #f60;
}
.yigoumen .dls1{
margin-left: 24px;
}
.yigoumen .dls2{
margin-left: 10px;
}
.wodeyigou:hover .yigou{
color: #666;
line-height: 33px;
height: 35px;
padding: 0 9px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.wodeyigou .yigou:hover span{
color: #f60;
cursor: default;
}
.wodeyigou .yigou:hover .tub-dingdan{
transform: rotate(-180deg);
}
.wodeyigou:hover .yigoumen{
display: block;
}
.suninghuiyuan{
display: block;
position: relative;
float: left;
padding: 0 10px;
height: 35px;
line-height: 35px;
}
.suninghuiyuan:hover{
color: #f60;
}
.suninghuiyuan span{
display: inline-block;
font-size: 12px;
}
.gouwuche{
position: relative;
float: left;
margin-left: -1px;
}
.gouwuche .nei-gouwu{
display: block;
position: relative;
float: left;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #f60;
font-family: "Microsoft Yahei";
padding: 0 5px;
}
.gouwuche .che{
font-family:'ng-iconfont';
font-style: normal;
display: inline-block;
float: left;
margin: 0 7px 0 0;
font-size: 14px;
width: 16px;
line-height: 35px;
}
.nei-gouwu .s-1{
display: inline-block;
font-size: 12px;
margin-right: 3px;
}
.nei-gouwu .s-2{
display: inline-block;
height: 16px;
font-size: 12px;
line-height: 15px;
margin-right: 5px;
}
.gouwuche:hover .nei-gouwu{
color: rgb(230, 92, 0);
line-height: 32px;
height: 35px;
padding: 0 4px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.gouwuche .nei-gouwu:hover .tub-dingdan{
transform: rotate(-180deg);
}
.yifubao{
display: block;
position: relative;
float: left;
height: 35px;
line-height: 35px;
padding: 0 10px;
}
.yifubao span{
display: inline-block;
font-size: 12px;
}
.yifubao:hover{
color: #f60;
}
.qiyecaigou{
display: block;
position: relative;
float: left;
padding: 0 10px;
height: 35px;
line-height: 35px;
}
.qiyecaigou span{
display: inline-block;
font-size: 12px;
}
.qiyecaigou:hover{
color: #f60;
}
.shoujisuning{
position: relative;
float: left;
margin-left: 10px;
}
.su-phone{
display: block;
position: relative;
float: left;
height: 35px;
line-height: 35px;
padding: 0 10px;
margin-left: -13px;
}
.su-phone span{
display: inline-block;
font-size: 12px;
}
.shoujisuning:hover .su-phone{
color: #666;
line-height: 33px;
height: 35px;
padding: 0 9px;
background-color: #fff;
border: 1px solid #ddd;
cursor: default;
}
.shoujisuning .su-phone:hover span{
color: #f60;
}
.shoujisuning .su-phone:hover .tub-dingdan{
transform: rotate(-180deg);
}
/* 以上是nav-basic部分的CSS样式 */
/* 以下是header部分的CSS样式 */
.header{
position: relative;
width: 100%;
height: 110px;
background-color: #fff;
min-width: 990px;
z-index: 90;
}
.bbg{
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 110px;
z-index: 81;
}
.header-nei{
position: relative;
width: 1190px;
min-width: 1190px;
height: 100px;
margin: 0 auto;
z-index: 82;
}
.lherder-img{
position: absolute;
top: 10px;
left: 0;
}
.lherder-img img{
width: 190px;
height: 90px;
border: 0;
}
.r-herder{
position: absolute;
top: 0;
left: 300px;
width: 600px;
height: 100px;
}
.search{
display: inline;
position: relative;
width: 540px;
float: right;
margin: 30px 0 0 0;
font-family: 'Microsoft YaHei';
z-index: 60;
}
.search-tub{
font-family:'ng-iconfont';
font-style: normal;
display: block;
position: absolute;
top: 0;
left: 0;
font-size: 14px;
color: #ccc;
width: 25px;
height: 40px;
line-height: 40px;
text-align: right;
z-index: 1;
}
.box-search{
position: relative;
border-right: 0;
float: left;
width: 390px;
padding: 0 0 0 25px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
background-color: #fff;
border: 2px solid #ff8000;
}
.box-search input{
width: 380px;
height: 36px;
font-size: 12px;
color: #bbb;
line-height: 18px;
margin-top: 0;
border: 0;
background-color: #fff;
}
.search .bot{
float: left;
width: 120px;
height: 40px;
font-family: 'MicroSoft YaHei';
font-weight: bold;
color: #FFF;
border: 0;
background-color: #ff8000;
font-size: 18px;
border-radius: 0;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.box-search #ssk:focus{
outline: 0;
}
.hot-search{
float: left;
width: 100%;
height: 18px;
color: #999;
margin-top: 5px;
font-size: 0;
}
.hot-search .hots{
float: left;
white-space: nowrap;
font-size: 12px;
margin: 3px 0 3px -11px;
padding: 0 20px 0 10px;
border-left: 1px solid #ddd;
height: 12px;
line-height: 12px;
color: #999;
font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
text-decoration: none;
}
.hot-search .hotss{
border-left: 0px solid #ddd;
}
.hot-search .hot1{
color: #f60;
}
.hot-search .hot2:hover{
color: #f60;
}
.tops{
position: relative;
width: 100%;
height: 38px;
min-width: 1190px;
background-color: #fff;
z-index: 70;
}
.fenlei{
position: absolute;
top: 0;
left: 50%;
width: 0;
margin-left: -595px;
font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
}
.l-fl{
position: absolute;
top: 0;
display: block;
color: #fff;
font-size: 13px;
font-weight: bold;
width: 166px;
padding-left: 34px;
height: 38px;
line-height: 38px;
background-color: #ff8000;
border-radius: 12px 12px 0 0;
text-decoration: none;
}
.nei-fenlei{
display: block;
position: absolute;
top: 12px;
left: 12px;
width: 14px;
height: 14px;
background-image: url(index.png);
background-position: -928px 0;
font-style: normal;
}
.lllists{
position: absolute;
top: 38px;
left:0;
width: 200px;
height: 476px;
}
.list-cover{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 476px;
background-color: #fff;
}
.list-cover .list-nei{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 476px;
z-index: 77;
}
.list-nei li{
position: relative;
top: 0;
width: 166px;
height: 31px;
line-height: 29px;
padding: 0 6px 0 28px;
list-style: none;
}
.list-nei img{
position: absolute;
top: 7px;
left: 6px;
width: 16px;
height: 16px;
}
.list-nei a{
display: inline-block;
color: #000;
font-size: 14px;
text-decoration: none;
}
.list-nei a:hover{
color: #f60;
}
.list-nei em{
width: 1px;
height: 12px;
font-size: 14px;
margin: 0 1px;
}
.list-nei li:hover{
background-color: rgb(243, 243, 243);
}
.list-nei .li-nei1:hover .lili1{
display: block;
}
.lili1{
display: none;
position: relative;
top: -40px;
left: 172px;
width: 989px;
height: 476px;
background-color: rgb(243, 243, 243);
}
.small-top{
position: relative;
top: 5px;
width: 700px;
height: 24px;
margin: 10px 0 0 8px;
}
.lili1 .small-top a{
height: 24px;
color: #fff;
font-size: 12px;
line-height: 24px;
padding: 0 10px;
border-radius: 4px;
margin-left: 24px;
text-align: center;
text-decoration: none;
background-color: rgb(50, 103, 255);
font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
}
.small-mid{
width: 780px;
margin: 10px 0 0 0;
padding-left: 20px;
}
.small-mid dl{
width: 750px;
height: 57px;
}
.small-mid .ddl-6,.small-mid .ddl-7,.small-mid .ddl-8,.small-mid .ddl-9{
height: 40px;
}
.small-mid dt{
width: 84px;
height: 20px;
line-height: 20px;
font-weight: 700;
padding-top: 8px;
padding-left: 10px;
}
.small-mid dt a{
font-size: 12px;
display: block;
width: 84px;
height: 20px;
text-decoration: none;
}
.small-mid dd{
position: relative;
top: -30px;
left: 90px;
width: 640px;
line-height: 20px;
border-bottom: 1px solid #eee;
margin-top: 8px;
padding-bottom: 8px;
}
.small-mid dl dd a{
font-size: 12px;
color: #000;
margin-right: 11px;
display: inline-block;
text-decoration: none;
font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
}
.list-nei .li-nei2:hover .lili2{
display: block;
}
.lili2{
display: none;
position: relative;
top: -71px;
left: 172px;
width: 989px;
height: 476px;
background-color: rgb(243, 243, 243);
}
.lili2 .small-top a{
height: 24px;
color: #fff;
font-size: 12px;
line-height: 24px;
padding: 0 10px;
border-radius: 4px;
margin-left: 24px;
text-align: center;
text-decoration: none;
background-color: rgb(153 , 51, 255);
font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
}
.m-fenlei{
position: absolute;
left: 50%;
padding-left: 10px;
display: block;
width: 785px;
height: 38px;
line-height: 38px;
margin-left: -405px;
font-family: "Microsoft Yahei";
z-index: 69;
}
.fenlei-nav{
list-style: none;
}
.fenlei-top{
display: block;
position: relative;
float: left;
font-weight: bold;
width: 110px;
height: 38px;
padding: 0;
}
.fenlei-top a{
position: relative;
float: left;
font-size: 15px;
color: rgb(51, 51, 51);
text-decoration: none;
}
.fenlei-top a img{
display: block;
width: 100%;
height: 38px;
border: 0;
}
.fenlei-nav .lii{
display: block;
float: left;
position: relative;
height: 38px;
padding: 0 12px 0 13px;
font-weight: bold;
list-style: none;
}
.fenlei-nav li a{
color: rgb(51, 51, 51);
position: relative;
float: left;
font-size: 15px;
text-decoration: none;
}
.fenlei-nav li a:hover{
color: #f60;
}
.r-fenlei{
display: block;
position: absolute;
top: 0;
left: 50%;
width: 196px;
height: 38px;
margin-left: 398px;
border-radius: 12px 12px 0 0;
}
.gongshi{
display: block;
}
.gongshi img{
display: block;
width: 196px;
height: 39px;
border: 0;
}
.qingli{
display: block;
height: 0;
font-size: 0;
clear: both;
}
.guanggao{
position: relative;
width: 100%;
height: 476px;
min-width: 1190px;
}
.nei-guanggao{
position: relative;
width: 100%;
height: 476px;
}
.beijing{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 476px;
}
.beijing ul{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 476px;
list-style: none;
}
.beijing li{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 476px;
list-style: none;
background: rgb(70, 165, 255)
}
.aa-1{
position: absolute;
top: 0;
left: 50%;
display: block;
width: 252px;
height: 70px;
margin-left: -397px;
z-index: 9;
}
.aa-1 img{
display: block;
width: 252px;
height: 70px;
border: 0;
}
.aa-2{
position: absolute;
top: 0;
left: 50%;
display: block;
width: 794px;
height: 476px;
margin-left: -396px;
background-color: #46a5ff;
}
.xia-guanggao{
position: absolute;
left: 50%;
margin-left: -391px;
width: 786px;
height: 112px;
bottom: 6px;
}
.xia-list{
position: absolute;
top: 0;
left: 0;
width: 786px;
height: 112px;
}
.xia-list ul{
list-style: none;
}
.xia-list li{
position: relative;
float: left;
width: 194px;
height: 112px;
margin-left: 2px;
border-radius: 6px;
list-style: none;
background-color: #fff;
}
.xia-list li a{
display: block;
width: 100%;
height: 100%;
}
.xia-list img{
display: block;
width: 100%;
height: 100%;
border: 0;
}
.r-guanggao{
position: absolute;
display: block;
margin-left: 398px;
top: 0;
left: 50%;
width: 196px;
height: 477px;
border-radius: 0 0 4px 4px;
background-color: #fff;
}
.top-guanggao{
position: relative;
width: 196px;
height: 255px;
}
.top-guanggao .img{
position: absolute;
top: 10px;
left: 10px;
width: 48px;
height: 48px;
border: 1px solid #f7f7f7;
border-radius: 50%;
background-size: 100% 100%;
background-image: url(https://res.suning.cn/project/cmsWeb/suning/homepage/v8/css/images/tool-logo.png?v=2021062901);
}
.denglulu{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.ddll{
float: left;
width: 125px;
height: 38px;
font-size: 12px;
color: #333;
margin-top: 15px;
margin-left: 66px;
}
.ddll p{
width: 122px;
height: 18px;
margin-bottom: 5px;
}
.ddll a{
text-decoration: none;
}
.ddll i{
font-style: normal;
}
.xinren{
display: block;
width: 156px;
height: 24px;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 24px;
margin-top: 70px;
margin-left: 20px;
border-radius: 3px;
background-color: #ff8000;
text-decoration: none;
}
.tequan{
display: block;
width: 156px;
height: 24px;
color: #fada99;
text-align: center;
font-size: 12px;
line-height: 24px;
margin-top: 10px;
margin-left: 20px;
border-radius: 3px;
background-color: #17125b;
text-decoration: none;
}
.last{
position: absolute;
left: 0;
top: 140px;
width: 196px;
height: 85px;
background: #fff;
}
.last a{
float: left;
width: 65px;
height: 85px;
text-decoration: none;
}
.last img{
display: block;
width: 36px;
height: 36px;
margin: 6px auto;
border: 0;
}
.last p{
max-width: 66px;
height: 20px;
line-height: 20px;
font-size: 14px;
color: #333;
text-align: center;
}
.last p:hover{
color: #f60;
}
.di-guanggao{
position: relative;
top: -38px;
height: 250px;
width: 196px;
border-top: 1px solid #f2f2f2;
}
.di-guanggao ul{
margin-right: -2px;
list-style: none;
}
.di-guanggao li{
float: left;
width: 65px;
height: 85px;
border-style: solid;
border-width: 0 1px 1px 0;
border-color: #f2f2f2;
}
.di-guanggao a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.di-guanggao p:hover{
color: #ff8000;
}
.di-guanggao img{
display: block;
width: 26px;
height: 26px;
border: 0;
margin: 12px 20px;
}
.di-guanggao p{
text-align: center;
color: #333;
font-size: 14px;
height: 20px;
line-height: 20px;
max-width: 66px;
}
.fl-1{
width: 1190px;
margin: 10px auto;
}
.aarr{
float: left;
width: 590px;
height: 298px;
border-radius: 12px;
background: #fff;
}
.bbrr{
position: relative;
width: 1190px;
height: 298px;
}
.rr{
position: relative;
width: 590px;
height: 298px;
min-width: 590px;
border-radius: 40px;
background: #fff;
}
.rr-tit{
position: relative;
width: 100%;
height: 60px;
text-align: center;
font-size: 24px;
}
.rr-tit a{
display: block;
float: left;
height: 30px;
width: 106px;
margin: 15px 0 0 16px;
}
.rr-tit img{
display: block;
width: 106px;
height: 30px;
border: 0;
}
.rr-nei{
width: 100%;
height: 245px;
}
.tab{
float: left;
width: 590px;
height: 238px;
}
.ttbb{
position: relative;
display: block;
float: left;
width: 590px;
height: 238px;
}
.aacc ul{
position: absolute;
left: 0;
top: 0;
width: 1190px;
height: 238px;
}
.aacc li{
display: list-item;
position: relative;
float: left;
width: 170px;
height: 238px;
margin-left: 20px;
list-style: none;
}
.aacc a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.aacc img{
display: block;
width: 150px;
height: 150px;
margin: 0 10px 10px 10px;
border-radius: 6px;
border: 0;
}
.title{
width: 170px;
height: 20px;
color: #333;
font-size: 14px;
line-height: 20px;
overflow: hidden;
text-align: left;
font-weight: normal;
background-color: #fff;
}
.jge{
height: 21px;
margin: 4px 4px 4px 0;
}
.jiage{
float: left;
line-height: 21px;
color: #f30;
font-size: 18px;
font-weight: bold;
}
.jiage i{
font-style: normal;
font-size: 12px;
}
.jiage em{
font-style: normal;
}
.aarr2{
margin-left: 10px;
float: left;
width: 590px;
height: 298px;
border-radius: 12px;
background: #fff;
}
1505
暂无认证
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
