哆啦宝
2018-06-24 01:48:41来源：未知 阅读 ()
我很喜欢哆啦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;
}
页面的效果：
想学习前端，摸索了一两个月，代码的兼容性复用性可用性什么的都不懂，大概会被大佬们痛骂一顿吧...但是我希望能从这一份成果开始，逐渐完善，坚持走下去
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：自制简易打赏功能
相关文章
- CSS Position的学习教程 2019-09-17
- H1标签也可以美化 2019-08-14
- 用css画一个哆啦A梦 2019-04-18
- fab 菜单实现之前传-钟表表盘 2019-02-25
- 用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画 2018-06-24
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签