我很喜欢哆啦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 id="header">
<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 id="header-content">
<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" id="sub" name="sub" value="搜索"/>
</form>
</div>
<div class="advertising">
<h2>构建自己的宝贝袋~</h2>
</div>
</div>
</div>
</div>
<!--顶部结束-->
<!--内容-->
<div id="content">
<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 id="geduan">
<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 id="footer">
</div>
<!--尾部结束-->
<!--到顶部-->
<div id="top">
</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;
}
页面的效果：
想学习前端，摸索了一两个月，代码的兼容性复用性可用性什么的都不懂，大概会被大佬们痛骂一顿吧...但是我希望能从这一份成果开始，逐渐完善，坚持走下去
1813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
