哆啦宝

来源：互联网发布：安卓个人中心界面源码编辑：程序博客网时间：2024/06/16 15:04

我很喜欢哆啦A梦，因为他为我的童年带来很多的欢乐。直至如今，他的故事总能让我感受到友情、亲情、爱情，这些美好，让人舍不得忘却。

这是我之后突然想到的，假如哆啦A梦的道具可以出售的话...

这里是首页，因为没有资源，所以使用的图片是从网上找到的，也没有对展示区进行美化...但是我相信，如果同样是喜欢哆啦A梦的朋友，一定可以从页面看出一些什么的

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>多啦宝-专属于你的四次元口袋</title><link rel="stylesheet" type="text/css" href="css/index.css"/><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script></head><body><!--顶部--><div ><div class="header-top"><ul class="left"><li><a href="">登录</a></li><span>/</span><li><a href="">注册</a></li></ul><ul class="right"><li><a href="">我的口袋</a></li><li><a href="">收藏夹</a></li><li><a href="">联系客服</a></li><li><a href="">网站导航</a></li></ul></div><div ><div class="header-content"><div class="logo"><img src="img/logo.jpg"/></div><div class="search"><form action="" method='post'><input type="search" placeholder="寻找口袋里的道具☆" name="search"><input type="submit"  name="sub" value="搜索"/></form></div><div class="advertising"><h2>构建自己的宝贝袋~</h2></div></div></div></div><!--顶部结束--><!--内容--><div ><div class="content-mid-fill"><div class="content-mid"><div class="content-mid-figure"><div class="figure" style="background: url(img/7af40ad162d9f2d3ac8f3766acec8a136227cc99.jpg) no-repeat;background-size: 100% 100%;display: block;"></div><div class="figure" style="background: url(img/7af40ad162d9f2d3ace53766acec8a136227cc47.jpg) no-repeat;background-size: 100% 100%;"></div><div class="figure" style="background: url(img/asdasdasdfsa.jpg) no-repeat;background-size: 100% 100%;"></div><div class="figure" style="background: url(img/asdfasdf646sad4f64wf4.jpg) no-repeat;background-size: 100% 100%;"></div></div><ul><li style="background-color: gold;"></li><li></li><li></li><li></li></ul></div></div><div class="content-left"><h2 style="text-align: center;color: darkseagreen;">你看见过我的百宝袋了吗？</h2><ul><li><p>-------催眠类-------</p></li><li  style="background-position: 0 -19px;"><p>-------攻击类-------</p></li><li  style="background-position: 0 -39px;"><p>-------变身类-------</p></li><li  style="background-position: 0 -60px;"><p>-------控制类-------</p></li><li  style="background-position: 0 -81px;"><p>-------能力类-------</p></li><li  style="background-position: 0 -104px;"><p>-------侦测类-------</p></li><li  style="background-position: 0 -130px;"><p>-------影像类-------</p></li><li  style="background-position: 0 -152px;"><p>-------时间类-------</p></li><li  style="background-position: 0 -176px;"><p>-------游戏类-------</p></li><li  style="background-position: 0 -199px;"><p>-------愿望类-------</p></li></ul><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">遥控</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">催眠机</a><a href="" class="hot">惊声波发生机</a><a href="">延长时间光线</a><a href="">感人话筒</a><a href="">判断是非枪</a><a href="">自信动摇机</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">接触</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">初次印象徽章</a><a href="">万能通行证</a><a href="" class="hot">制造潮流的病毒</a><a href="">息怒棒</a><a href="">熟睡枕头</a><a href="">丘比特之箭</a><a href="" class="hot">夸张外套</a><a href="">决心针</a><a href="">感激光环</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">食用</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">招待锭</a><a href="">疑心豆包</a><a href="">成真片</a><a href="">什么都相信罐头</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">投掷</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">口袋龙卷风</a><a href="">空气手枪</a><a href="" class="hot">正义绳索的种子</a><a href="">肥皂泡手枪</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">部署</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">摔跤手</a><a href="">强力吹跑电风扇</a><a href="">美杜莎的脑袋</a><a href="" class="hot">定时傻瓜蛋</a><a href="">税金鸟</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">对手停止机</a><a href="">空气炮</a><a href="">名刀电气丸</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">水中呼吸管</a><a href="" class="hot">猫头鹰人套装</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">消耗品</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><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="" class="hot">三态药丸</a><a href="">化身博士</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">复用</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">放大灯</a><a href="" class="hot">缩小灯</a><a href="">调换绳子</a><a href="">格列佛隧道</a><a href="">影子剪刀</a><a href="">动物灯</a><a href="" class="hot">换装相机</a><a href="">动物重生蛋</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">食用</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">桃太郎丸子</a><a href="">弃狗丸子</a><a href="">助人药丸</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">赠予</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">诅咒照相机</a><a href="">吸嘴章鱼</a><a href="">贿赂器</a><a href="" class="hot">点头哈腰蚱蜢</a><a href="">正直太郎</a><a href="">人类书皮</a><a href="">唯命是从帽子</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">放置</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">魔法肚子</a><a href="">虫醋剂</a><a href="">朋友圈</a><a href="" class="hot">梦风铃</a><a href="">天气控制箱</a><a href="">任意遥控器</a><a href="" class="hot">表里如一膏药</a><a href="">任意机场</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">消耗品</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">深海油</a><a href="">隐身喷漆</a><a href="">钻地瓦斯</a><a href="" class="hot">水漂浮气体</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">食用</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">翻译魔芋</a><a href="" class="hot">记忆面包</a><a href="">昆虫丹</a><a href="">声音凝固剂</a><a href="">声音糖果</a><a href="">迷你黑洞</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">抓鱼手</a><a href="" class="hot">电脑铅笔</a><a href="">石头帽</a><a href="">透明斗篷</a><a href="">超级手套</a><a href="">竹蜻蜓</a><a href="">长处选择板</a><a href="">强力味道追踪鼻</a><a href="">害怕接触接力棒</a><a href="" class="hot">魔法词典</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">携带</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">年代测定器</a><a href="" class="hot">纸片雷达</a><a href="">道路导游</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">透视镜</a><a href="" class="hot">寻人伞</a><a href="">匹诺曹之花</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">部署</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">宇宙探测火箭</a><a href="">密闭空间探索机</a><a href="">家用人工卫星监视器</a><a href="">任意电视</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">爱情伞</a><a href="">盲点星</a><a href="">情侣测试徽章</a><a href="">差变好喷雾</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">机体</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">瞬间模型制造照相机</a><a href="" class="hot">梦的电视</a><a href="">透视台和透视贴纸</a><a href="">内心读取器</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">转生</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">鬼怪神灯</a><a href="" class="hot">实物图鉴</a><a href="">纸手工剪纸册</a></p></div></div> <div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">机体</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">时光传感器</a><a href="" class="hot">时光机</a><a href="">时间电视</a><a href="">狂时机</a><a href="">时光相机</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">时光皮带</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">复用</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">时光包巾</a><a href="">时间电话</a><a href="">进化退化光线枪</a><a href="">时光电话</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">器件</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">室内钓鱼机</a><a href="">迷你推土机</a><a href="">折叠房屋</a><a href="">宇宙战争游戏</a><a href="">未来的宇宙船</a><a href="">通行圈</a><a href="" class="hot">墙纸屋</a><a href="">室内滑雪场</a><a href="">蜗牛屋</a><a href="">自然观察塑料模型系列</a><a href="">竞技屋</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">装备</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">祝贺伞</a><a href="">音乐伞</a><a href="">锻炼肌肉伞</a><a href="">马拉松伞</a><a href="">机械手</a><a href="">NS徽章</a><a href="" class="hot">宇宙探险游戏头盔</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">消耗品</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">心情香水</a><a href="">回忆香水</a><a href="">医疗箱</a><a href="">蹦床剂</a><a href="" class="hot">宠物膏</a></p></div></div><div class="dp-none"><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">消耗品</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">辛苦味噌</a><a href="">家族组合盒</a><a href="" class="hot">日程钟</a><a href="">妖怪盒子</a><a href="">剧本打火机</a><a href="">神机器人</a><a href="" class="hot">虚构人物蛋</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">携带</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="">指路天使</a><a href="">四季徽章</a><a href="" class="hot">阿拉丁神灯</a><a href="">印象灯帽</a><a href="">谎言成真喇叭</a></p></div><div class="dp-none-ico"><h2 style="height: 30px;line-height: 30px;"><a href=""><h2 style="float: left;">部署</h2></a><a href=""><span style="float: right;font-weight: 100;color:forestgreen;">更多></span></a></h2><hr /><p><a href="" class="hot">樵夫之泉</a><a href="">万能水龙头</a><a href="" class="hot">任意门</a><a href="">感冒转移话筒</a><a href="">日本标准日历</a><a href="">如果电话亭</a><a href="">那个人的房间</a><a href="">广而告之</a><a href="">美食餐桌布</a></p></div></div></div><div class="content-right"><div class="news"><ul><li class="ch news-gf">官方</li><li class="news-zb">周边</li></ul><div class="news-gf news-div" style="display: block;"><a href="https://www.hao123.com/" target="_blank">新企划再开！2018年剧场版企划</a><a href="">2017.5.30  南极大冒险！</a><a href="">TV新版首映！回味童年趣味</a><a href="">官方玩偶，进击的多啦A梦</a><a href="">官方辟谣：静香的新婚晚宴</a><a href="">论手办收集的注意事项</a></div><div class="news-zb news-div"><a href="">成为吉祥物吧！2020东京奥运会</a><a href="">日本宅男自制道具图鉴</a><a href="">网友评选：最受欢迎的道具</a><a href="">实物出现！如此逼真的竹蜻蜓</a><a href="">声优回首：曾经的感动</a><a href="">决斗！多啦A梦VS奥特曼</a></div></div><div class="fly"><div class="fly-pic"><img src="img/fly.jpg"/><img src="img/fly.jpg"/></div></div></div></div><!--内容结束--><!--隔断--><div ><img src="img/baibaodai.jpg" class="left"/><span>"哆啦A梦,快把道具借给我啦~"</span><img src="img/baibaodai.jpg" class="right"/></div><!--隔断结束--><!--商品展示--><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color: yellow;">有了这个，我就再也不用担心胖虎了~哈 哈 哈</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/cm1.jpg"/></a><h4>催眠机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm2.jpg"/></a><h4>桃太郎丸子</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm3.jpg"/></a><h4>初次印象徽章</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm4.jpg"/></a><h4>惊声波发声机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm5.jpg"/></a><h4>万能通行证</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm6.jpg"/></a><h4>息怒棒</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm7.jpg"/></a><h4>丘比特之箭</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm8.jpg"/></a><h4>熟睡枕头</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm9.jpg"/></a><h4>延长时间光线</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/cm10.jpg"/></a><h4>夸张外套</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:orange;">大雄，你的意思是你不服气吗？！</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/gj1.jpg"/></a><h4>口袋龙卷风</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj2.jpg"/></a><h4>摔跤手</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj3.jpg"/></a><h4>空气手枪</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj4.jpg"/></a><h4>定时傻瓜蛋</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj5.jpg"/></a><h4>对手停止机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj6.jpg"/></a><h4>税金鸟</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj7.jpg"/></a><h4>正义绳索的种子</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj8.jpg"/></a><h4>空气炮</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj9.jpg"/></a><h4>名刀电光丸</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/gj10.jpg"/></a><h4>肥皂泡手枪</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:pink;">叫我静香女超人！！！</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/bs1.jpg"/></a><h4>放大灯</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs2.jpg"/></a><h4>缩小灯</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs3.jpg"/></a><h4>格列佛隧道</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs4.jpg"/></a><h4>动物饼干</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs5.jpg"/></a><h4>换装相机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs6.jpg"/></a><h4>狼人面霜</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs7.jpg"/></a><h4>变身环和卡片</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs8.jpg"/></a><h4>文字接龙变身蛋</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs9.jpg"/></a><h4>袖珍二维相机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/bs10.jpg"/></a><h4>三态药丸</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:#61AA97;">大雄一定是用了哆啦A梦的道具！我得马上通知胖虎！</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/kz1.jpg"/></a><h4>魔法肚子</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz2.jpg"/></a><h4>诅咒照相机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz3.jpg"/></a><h4>朋友圈</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz4.jpg"/></a><h4>梦风铃</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz5.jpg"/></a><h4>弃狗丸子</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz6.jpg"/></a><h4>天气控制箱</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz7.jpg"/></a><h4>点头哈腰蚱蜢</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz8.jpg"/></a><h4>正直太郎</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz9.jpg"/></a><h4>表里如一膏药</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/kz10.jpg"/></a><h4>助人药丸</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:#7FCFF3;">大雄，你要知道，只有依靠自己的努力才能成为有用的人</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/nl1.jpg"/></a><h4>翻译魔芋</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl2.jpg"/></a><h4>电脑铅笔</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl3.jpg"/></a><h4>石头帽子</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl4.jpg"/></a><h4>记忆面包</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl5.jpg"/></a><h4>透明斗篷</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl6.jpg"/></a><h4>声音凝固剂</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl7.jpg"/></a><h4>竹蜻蜓</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl8.jpg"/></a><h4>隐身喷漆</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl9.jpg"/></a><h4>声音糖果</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/nl10.jpg"/></a><h4>魔法词典</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:pink;">大雄，我的胸针不见了，你能帮我找一下吗？</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/zc1.jpg"/></a><h4>透视镜</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc2.jpg"/></a><h4>寻人伞</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc3.jpg"/></a><h4>宇宙探测火箭</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc4.jpg"/></a><h4>年代测定器</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc5.jpg"/></a><h4>密闭空间探索机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc6.jpg"/></a><h4>纸片雷达</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc7.jpg"/></a><h4>家用人工卫星监视器</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc8.jpg"/></a><h4>匹诺曹之花</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc9.jpg"/></a><h4>任意电视</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/zc10.jpg"/></a><h4>道路导游</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:#61AA97;">我看呐，这附近也只有我家才有那么大的电视了！</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/yx1.jpg"/></a><h4>鬼怪神灯</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx2.jpg"/></a><h4>实物图鉴</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx3.jpg"/></a><h4>梦的电视</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx4.jpg"/></a><h4>纸手工剪纸册</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx5.jpg"/></a><h4>瞬间模型制作照相机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx6.jpg"/></a><h4>透视台和透视贴纸</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx7.jpg"/></a><h4>情侣测试徽章</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx8.jpg"/></a><h4>盲点星</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx9.jpg"/></a><h4>差变好喷雾</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yx10.jpg"/></a><h4>内心读取器</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:#7FCFF3;">走吧，我带你去22世纪！</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/sj1.jpg"/></a><h4>时光皮带</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj2.jpg"/></a><h4>时光传感器</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj3.jpg"/></a><h4>时光机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj4.jpg"/></a><h4>时光包巾</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj5.jpg"/></a><h4>时间电视</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj6.jpg"/></a><h4>时间电话</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj7.jpg"/></a><h4>进化退化光线枪</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj8.jpg"/></a><h4>时光电话</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj9.jpg"/></a><h4>狂时机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/sj10.jpg"/></a><h4>时光相机</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:orange;">你这个东西好像挺不错的，那我就借走了！</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/ga1.jpg"/></a><h4>室内钓鱼池</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga2.jpg"/></a><h4>宇宙战争游戏</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga3.jpg"/></a><h4>樵夫之泉</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga4.jpg"/></a><h4>未来的宇宙船</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga5.jpg"/></a><h4>NS徽章</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga6.jpg"/></a><h4>通行圈</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga7.jpg"/></a><h4>墙纸屋</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga8.jpg"/></a><h4>室内滑雪场</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga9.jpg"/></a><h4>宠物膏</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/ga10.jpg"/></a><h4>宇宙探险游戏头盔</h4><h4>￥???</h4></div></div></div><div class="shop-ad"><div class="shop-ad-top"><img src="img/zhuqingting.jpg"/><h3 style="color:yellow;">我真是全国最不幸的少年了...哆啦A梦你要拿什么道具？</h3></div><br /><div class="shop-ad-btm"><div class="shop-pro"><a href=""><img src="img/yw1.jpg"/></a><h4>指路天使</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw2.jpg"/></a><h4>任意门</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw3.jpg"/></a><h4>阿拉丁神灯</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw4.jpg"/></a><h4>感冒转移话筒</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw5.jpg"/></a><h4>日程钟</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw6.jpg"/></a><h4>剧本打火机</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw7.jpg"/></a><h4>如果电话亭</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw8.jpg"/></a><h4>谎言成真喇叭</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw9.jpg"/></a><h4>虚构人物蛋</h4><h4>￥???</h4></div><div class="shop-pro"><a href=""><img src="img/yw10.jpg"/></a><h4>美食餐桌布</h4><h4>￥???</h4></div></div></div><!--商品展示结束--><!--尾部--><div ></div><!--尾部结束--><!--到顶部--><div ></div><!--到顶部结束--><!--脚本--><script type="text/javascript">$(function(){var c=0;//设置定时器var timer = setInterval(run,2000);//定时器函数function run(){c++;if(c==4){$('.figure').eq(1).css({display:'block'}).siblings('.figure').css({display:'none'});c=0;}$('.figure').eq(c).css({display:'block'}).siblings('.figure').css({display:'none'});$('.content-mid li').eq(c).css({backgroundColor:'gold'}).siblings('.content-mid li').css({backgroundColor:'black'});}//鼠标移入时，停止自动轮播$('.content-mid li').mouseenter(function(){clearInterval(timer);})//鼠标移出时，恢复自动轮播$('.content-mid li').mouseleave(function(){timer=setInterval(run,2000);})//鼠标单击$('.content-mid ul li').click(function(){c=$(this).index();$('.figure').eq(c).css({display:'block'}).siblings('.figure').css({display:'none'});$('.content-mid li').eq(c).css({backgroundColor:'gold'}).siblings('.content-mid li').css({backgroundColor:'black'});})//导航栏固定$(window).scroll(function(){//获得文档的距离var t=$(document).scrollTop();//document即body中的范围if (t>29) {$('#header-content').addClass('gd');}else{$('#header-content').removeClass('gd');}})//飞天图var a = 0;setInterval(function(){a++;if(a==2){$('.fly .fly-pic').css({top:'0'});a=1;}var top=(-200*a);$('.fly .fly-pic').stop().animate({top:top+'px'},1000);},2000)//新闻$('li.news-gf').click(function(){$('div.news-gf').css({display:'block'}).siblings('div.news-div').css({display:'none'});$('li.news-gf').addClass('ch').siblings('li').removeClass('ch');})$('li.news-zb').click(function(){$('div.news-zb').css({display:'block'}).siblings('div.news-div').css({display:'none'});$('li.news-zb').addClass('ch').siblings('li').removeClass('ch');})//商品分类$('#content .content-left ul li').mouseenter(function(){var b=$(this).index();$('#content .content-left ul li').eq(b).css({backgroundImages:'url(../img/shopleft.jpg)',backgroundRepeat:'no-repeat',backgroundColor:'#F3F31D'}).siblings('li').css({backgroundImages:'url(../img/shopleft.jpg)',backgroundRepeat:'no-repeat',backgroundColor:'yellow'});$('.dp-none').eq(b).css({display:'block'}).siblings('.dp-none').css({display:'none'});})$('.dp-none').mouseleave(function(){$('#content .content-left ul li').css({backgroundImages:'url(../img/shopleft.jpg)',backgroundRepeat:'no-repeat',backgroundColor:'yellow'});$('.dp-none').css({display:'none'});})//隔断$('#geduan').hover(function(){$('#geduan span').text('"好啦好啦，我还真是服了你了..."');},function(){$('#geduan span').text('"哆啦A梦,快把道具借给我啦~"');})//到顶部$('#top').click(function(){ $("html,body").animate({scrollTop:0}, 500);})})</script></body></html>

接着是样式表

/*通用*/*{padding: 0;margin: 0;color: black;}html{/*overflow-x: hidden;*/}body{background-color: rgba(0,160,232,0.3);}a{text-decoration: none;font-size: 15px;}li{list-style-type: none;}/*顶部*/#header{width: 100%;height: 30px;background: rgba(0,160,232,0.5);}#header .header-top{width: 1200px;height: 30px;line-height: 30px;margin: 0 auto;}#header .header-top .left{width: 800px;height: 30px;float: left;}#header .header-top .left a,span{float: left;}#header .header-top a:hover{color:#F94A14;}#header .header-top .right{width: 400px;height: 30px;float: right;}#header .header-top .right a{float: left;margin-left: 40px;}#header-content{background-color: white;}#header .header-content{width: 1200px;height: 150px;margin: 0 auto;background-color: white;}.gd{width: 100%;position: fixed;top: 0;z-index: 5;}#header .header-content .logo{width: 150px;height: 150px;float: left;}#header .header-content .logo img{width: 150px;height: 150px;}#header .header-content .search{width: 500px;height: 150px;float: left;margin-left: 150px;}#header .header-content .search [type='search']{width: 400px;height: 30px;margin: 50px 0;border: 1px solid beige;box-shadow:0 0 10px rgba(0, 204, 204, 0.5); color:cornflowerblue;}#header .header-content .search [type='submit']{width: 100px;height: 30px;box-shadow:0 0 10px rgba(0, 204, 204, 0.5); background: #7FCFF3;border: 2px dashed aliceblue;margin: 10px 0;margin-left: -5px;}#header .header-content .advertising{width: 200px;height: 150px;line-height: 120px;float: left;margin-left: 100px;text-align: center;background: -webkit-linear-gradient(left,transparent,#7FCFF3,transparent,#7FCFF3,transparent);/*border: 1px solid blueviolet;*/-webkit-background-clip:text;animation: hashi 3s linear 0s infinite;}@keyframes hashi{0%{opacity: 1;}50%{opacity: 0;}100%{opacity: 1;}}#header .header-content .advertising h2{color: #7FCFF3;color: transparent;}/*内容*/#content{width: 1200px;height: 500px;margin: 0 auto;margin-top: 160px;position: relative;}#content .content-mid-fill{width: 100%;height: 500px;float: left;}#content .content-mid{float: left;width: 700px;padding: 0 200px 0 300px;}#content .content-mid .content-mid-figure{width: 700px;height: 500px;position: relative;}#content .content-mid .content-mid-figure .figure{width: 700px;height: 500px;position: absolute;left: 0;top: 0;display: none;}#content .content-mid ul{position: absolute;left: 580px;bottom: 0;}#content .content-mid ul li{display: block;width: 20px;height: 20px;background-color: black;float: left;border-radius: 50%;margin: 0 10px;opacity: 0.7;}#content .content-left{width: 300px;height: 500px;float: left;margin-left: -100%;background-color: yellow;position: relative;}#content .content-left ul li{background: url(../img/shopleft.jpg) no-repeat;height: 20px;margin-top: 23px;text-align: center;line-height: 20px;margin-left: 50px;}#content .content-left .dp-none{width: 640px;height: 440px;padding: 30px;position: absolute;background-color: #F3F31D;top: 0;left: 300px;display: none;}#content .content-left .dp-none .dp-none-ico{width: 640px;height: 135px;margin-bottom: 20px;overflow: hidden;}#content .content-left .dp-none .dp-none-ico p a{margin: 6px 10px;display: inline-block;white-space: nowrap;} #content .content-left .dp-none .dp-none-ico p a.hot{color: red;}#content .content-left .dp-none .dp-none-ico p a:hover{color:hotpink;}#content .content-right{width: 200px;height: 500px;float: left;margin-left: -200px;background-color: white;}#content .content-right .news{width: 200px;height: 300px;/*border: 1px solid #6495ED;*/position: relative;}#content .content-right .news ul li{width: 50%;height: 30px;float: left;outline: 1px solid #6495ED;text-align: center;line-height: 30px;color:white;background-color: #7FCFF3;}#content .content-right .news ul li.ch{color: darkorange;background-color: #F0F8FF;}#content .content-right .news .news-div{background-color: #F0F8FF;width: 200px;height: 268px;margin-top: 32px;position: absolute;left: 0;top: 0;display: none;}#content .content-right .news .news-div a{color: darkorange;margin-top: 15px;text-align: center;font-size: 14px;display: block;width: 200px;height: 30px;line-height: 30px;/*outline: 1px solid red;*/white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}#content .content-right .fly{width: 200px;height: 198px;position: relative;overflow: hidden;}#content .content-right .fly .fly-pic{width: 200px;height: 396px;position: absolute;top: 0;left: 0;}#content .content-right .fly img{width: 200px;height: 200px;float: left;}/*隔断*/#geduan{width: 1200px;height: 70px;background-color:pink;margin: 20px auto;}#geduan img.left{width: 70px;height: 70px;float: left;}#geduan img.right{width: 70px;height: 70px;float: right;}#geduan span{line-height: 70px;margin-left: 36%;color: white;}/*商品展示*/.shop-ad {width: 1200px;height: 700px;margin: 30px auto;background-color: white;}.shop-ad .shop-ad-top img{width: 50px;height: 50px;margin-left: 48%;}.shop-ad .shop-ad-top h3{text-align: center;line-height: 25px;position: relative;}.shop-ad .shop-ad-top h3:before,h3:after{content: '';                 /*CSS伪类用法*/    position: absolute;         /*定位背景横线的位置*/    top: 52%;   background: gray;       /*宽和高做出来的背景横线*/    width: 30%;    height: 2px;}.shop-ad .shop-ad-top h3:before{left: 0;}.shop-ad .shop-ad-top h3:after{right: 0;}.shop-ad .shop-ad-btm .shop-pro{width: 200px;height: 270px;float: left;outline: 2px solid darkgray;margin: 10px 20px;text-align: center;}.shop-ad .shop-ad-btm .shop-pro:hover{box-shadow: 0px 0px 10px 5px #F3F31D;}.shop-ad .shop-ad-btm .shop-pro h4{color: rgba(100,149,237,0.6);margin: 5px;}.shop-ad .shop-ad-btm .shop-pro h4:last-child{color: red;}.shop-ad .shop-ad-btm img{width: 200px;height: 200px;}/*尾部*/#footer{width: 100%;height: 300px;background: url(../img/footer.jpg) no-repeat;background-size: 100% 100%;}/*到顶部*/#top{width: 60px;height: 60px;position: fixed;top: 713px;right: 60px;border: 2px solid white;background: url(../img/zhuqingting.jpg) no-repeat;background-size: 100% 100%;box-shadow: 0px 0px 6px 3px coral;}

　　页面的效果：

想学习前端，摸索了一两个月，代码的兼容性复用性可用性什么的都不懂，大概会被大佬们痛骂一顿吧...但是我希望能从这一份成果开始，逐渐完善，坚持走下去

阅读全文

0 0