HTML入门小练习（三）

本次学习的任务目标是进一步学习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;
}

HTML入门小练习（三）相关推荐

React入门小册(三)组件
组件 React中的组件是可复用的代码块,其由JSX元素构成,并根据相关的逻辑和数据创建动态UI. 函数式组件 vs 类组件 React 中有两种类型的组件:函数式组件和类组件. 函数式组件通常情况下 ...
九宫怎么排列和使用_剪映零基础入门教程第三十七篇：一学就会系列之九宫格小程序配音...
很多玩儿抖音的朋友都看过九宫格视频,但是并不是每个玩抖音的人都会制作这个九宫格视频,实际这个需要借助小工具来帮忙,而常用抖音的朋友们会对剪映更加熟悉一些,且九宫格视频在剪映内的制作方式则比较简单.那么 ...
【深度学习】翻译：60分钟入门PyTorch（三）——神经网络
前言原文翻译自:Deep Learning with PyTorch: A 60 Minute Blitz 翻译:林不清(https://www.zhihu.com/people/lu-guo-92 ...
python将整数逆序_python练手入门小项目：字符串的妙用
题目来源:小行:python练手入门小项目详解(一) 1 给任意一个的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. 代码: def reversed_integer(number):ass ...
QR code 二维码基础入门教程（三）
QR code 入门教程(三) 承接上文,我们已经说过了数据编码和纠错码的生成,接下来我们继续下面的步骤结构化最终的数据所谓的结构化(Structure),说白了就是如何把之前生成的数据排成一个比 ...
变量的三重属性_TypeScript基础入门 - 变量声明(三)
转载地址TypeScript基础入门 - 变量声明(三)www.gowhich.com 项目实践仓库 https://github.com/durban89/typescript_demo.gitt ...
机器学习入门笔记（三）：K近邻算法
文章目录一.K近邻算法的基本概念 1.1 K近邻算法实现二.K近邻分类三要素 2.1 距离度量 2.2 K值的选择 2.2.1 基于m-fold cross validation的 K值选择 2. ...
Arduino入门小知识点总结（2）(红外感应开关与继电器接法模拟输入输出tone函数)
** Arduino入门小知识点总结(2)(红外感应开关与继电器) ** 1.关于电磁继电器的接法说来惭愧,本是多么简单的一个问题,我用了约十万六千三百二十七次心跳(这梗懂得都懂)的时间,才查到 ...
零基础入门小程序，实战经验分享
讲师介绍:连胜大佬曾经就职于点心移动 & 百度,折腾小程序也有段时间了,参与开发的"小小签到"小程序,在2017年荣获阿拉丁神灯奖.我公司开发了多个工具类小程序,已有四款小 ...
STM32学习——入门小项目
博客地址:STM32学习--入门小项目 – Infinite's Blog 这个小项目是来自参加电设时,老师发的STM32入门(进阶)任务,具体的要求如下: 软件设计要求编写简单I/O程序,能用板上 ...

HTML入门小练习（三）

HTML入门小练习（三）相关推荐

最新文章

热门文章