我很喜歡哆啦A夢，因為他為我的童年帶來很多的歡樂。直至如今，他的故事總能讓我感受到友情、親情、愛情，這些美好，讓人捨不得忘卻。 這是我之後突然想到的，假如哆啦A夢的道具可以出售的話... 這裡是首頁，因為沒有資源，所以使用的圖片是從網上找到的，也沒有對展示區進行美化...但是我相信，如果同樣是喜歡哆 ...
我很喜歡哆啦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;
}
頁面的效果：
想學習前端，摸索了一兩個月，代碼的相容性復用性可用性什麼的都不懂，大概會被大佬們痛罵一頓吧...但是我希望能從這一份成果開始，逐漸完善，堅持走下去
