pcX28資訊網(wǎng)——每日最新資訊28at.com

第一步.我們找到自己看著符合我們自己店鋪風(fēng)格和創(chuàng)意的店鋪或者其他什么網(wǎng)頁(yè).然后點(diǎn)擊360瀏覽器右上角的截圖.下拉.看到保存全網(wǎng)頁(yè)為圖片的選項(xiàng).pcX28資訊網(wǎng)——每日最新資訊28at.com

將自己需要的頁(yè)面保存為jpg的格式圖片.pcX28資訊網(wǎng)——每日最新資訊28at.com

將我們得到的素材加載進(jìn)入PS里面.這時(shí)候我們就需要自己動(dòng)手將需要的模塊取下來(lái)了.舉個(gè)例子.我們看見(jiàn)別人的店招很棒.我也想要這個(gè)效果.那么我們固定一個(gè)960*150尺寸來(lái)裁剪店招(注意:這里的150像素是指不要原來(lái)的導(dǎo)航,自己制作導(dǎo)航的高度.如果不想自己只做導(dǎo)航,請(qǐng)參考淘寶標(biāo)準(zhǔn)).裁剪一下.pcX28資訊網(wǎng)——每日最新資訊28at.com

得到店招之后我們就可以加工了.替換掉別人的名字.換上自己的思路.更換掉其他的小細(xì)節(jié)之類(lèi)的.相信同學(xué)們都有自己的想法.pcX28資訊網(wǎng)——每日最新資訊28at.com

pcX28資訊網(wǎng)——每日最新資訊28at.com

好啦.這就是最簡(jiǎn)單的方法啦.以后還會(huì)繼續(xù)分享.直到我們完整復(fù)制別人的店鋪為止!最后.這是我稍微修改的一個(gè)范例.記得善用PS里面的圖層工具哦.可以更改很多信息呢.祝大家都能成功!pcX28資訊網(wǎng)——每日最新資訊28at.com

html:<divclass="high_menu"><pclass="high_menu_title">圖書(shū)分類(lèi)<span></span></p><divclass="high_menu_content"><ul><li><ahref="#">數(shù)學(xué)</a><em>(123)</em></li><li><ahref="#">語(yǔ)文</a><em>(1323)</em></li><li><ahref="#">美術(shù)</a><em>(12453)</em></li><li><ahref="#">繪畫(huà)</a><em>(1232)</em></li><li><ahref="#">動(dòng)漫</a><em>(413)</em></li><li><ahref="#">攝影</a><em>(1243)</em></li><li><ahref="#">旅游</a><em>(13)</em></li><li><ahref="#">漫畫(huà)</a><em>(23)</em></li><li><ahref="#">計(jì)算機(jī)</a><em>(1423)</em></li><li><ahref="#">網(wǎng)絡(luò)</a><em>(1253)</em></li><li><ahref="#">經(jīng)濟(jì)</a><em>(1243)</em></li><li><ahref="#">其他</a><em>(133)</em></li></ul><pclass="high_menu_less">簡(jiǎn)化></p></div></div>pcX28資訊網(wǎng)——每日最新資訊28at.com

pcX28資訊網(wǎng)——每日最新資訊28at.com

css:p,ul{margin:0;padding:0;}ul{list-style:none;}div.high_menu{margin:0auto;width:400px;}div.high_menu_content{width:398px;border:1pxsolid#ffc786;}div.high_menup.high_menu_title{padding-left:10px;width:390px;heigth:30px;background:#ff8f0a;line-height:30px;font-weight:bold;color:#302f2e;}div.high_menup.high_menu_titlespan{display:inline-block;margin:12px;float:right;width:0;height:0;border-right:5pxsolid#ff8f0a;border-bottom:5pxsolid#000;border-left:5pxsolid#ff8f0a;}div.high_menu_contentul{padding-left:8px;}div.high_menu_contentulli{float:left;width:130px;}em{font-style:none;color:gray;}div.high_menu_contentp.high_menu_less{padding-left:350px;font-weight:bold;color:red;}pcX28資訊網(wǎng)——每日最新資訊28at.com

Js:<scripttype="text/javascript">$(function(){$(".high_menu_title").toggle(function(){$(".high_menu_content").slideUp();$(this).children("span").css({"border-top":"5pxsolid#000","border-bottom":"none"})},function(){$(".high_menu_content").slideDown();$(this).children("span").css({"border-top":"none","border-bottom":"5pxsolid#000"})});$(".high_menu_less").toggle(function(){$("ulli:gt(4):not(:last)").hide();$(this).text("更多>");},function(){$("ulli:gt(4):not(:last)").show();$(this).text("簡(jiǎn)化>");});});</script>由于都是小效果，所以代碼代碼都比較簡(jiǎn)單，大家操作起來(lái)也比較方便滴這個(gè)就是預(yù)覽效果了這個(gè)呢是點(diǎn)擊小三角可以收起來(lái)的效果，挺好用的，大家試試看吧??pcX28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-23-18461-0.html簡(jiǎn)單實(shí)用仿淘寶菜單？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 淘寶網(wǎng)店如何裝修？

下一篇： 淘寶店商品寶貝名字關(guān)鍵字的巧妙運(yùn)用？