console
$(document).ready(function(){
$("#p2").click(function(){
$("#p3").fadeToggle();
$("#p4").fadeToggle("slow");
$("#p5").fadeToggle(3000);
$("#p6").fadeToggle();
$("#p7").fadeToggle("slow");
$("#p8").fadeToggle(3000);
$("#p9").fadeToggle();
$("#p10").fadeToggle("slow");
$("#p11").fadeToggle(3000);
$("#p12").fadeToggle();
$("#p13").fadeToggle("slow");
$("#p14").fadeToggle(3000);
$("#p15").fadeToggle();
$("#p16").fadeToggle("slow");
});
});
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
$(document).ready(function(){
$("#p2").click(function(){
$("td").css({"background-color":"pink","font-size":"200%"});
});
});
$(document).ready(function(){
$("#show").click(function(){
var div=$("#p17");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
<div id="p1"><header><h1><a href="http://www.meishij.net/china-food/">中国美食网及旅游地图展览</a></h1> </header>
<section>
<table>
<tr>
<td ><img id="p2"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494258574693&di=11d185ab3265409c36e15408e5722ab5&imgtype=0&src=http%3A%2F%2Fp.nanrenwo.net%2Fuploads%2Fallimg%2F161227%2F8461-16122F95440.jpg style="width:180px;">
<td ><img id="p3"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494258655185&di=131525762d741dbead4e97ebb213d9a1&imgtype=0&src=http%3A%2F%2Fimages.quanjing.com%2Fchineseview060%2Fhigh%2F429-11519.jpg style="width:180px;">
<td ><img id="p4"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494258748093&di=90e91e11172a4ba486650e2cfada70dc&imgtype=0&src=http%3A%2F%2Fimages.3158.cn%2Fdata%2Fattachment%2Ftougao%2Farticle%2F2014%2F10%2F13%2Fab5f97050c3917d7b36c56142a4881fc.jpg style="width:230px;">
<td ><img id="p5"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494258929976&di=2a958527660292765b72fc96edef17f3&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2F7dd98d1001e93901fbea1a767bec54e737d1968a.jpg style="width:180px;">
<td ><img id="p6" src=https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3885319854,3755435001&fm=23&gp=0.jpg style="width:180px;">
</td>
</tr>
<tr>
<tr>
<td><a href="https://www.zhihu.com/question/28426892">重庆火锅</a></td>
<td><a href="http://www.dianping.com/mylist/1608767">北京烤鸭</a></td>
<td><a href="http://zs.gou1222.com/70722595/">重庆小面</a></td>
<td><a href="https://zhidao.baidu.com/question/1885901660287090708.html">山西刀削面</a></td>
<td><a href="https://www.zhihu.com/question/28447751">西安肉夹馍</a></td>
<tr>
<td><img id="p7" src=https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=353529372,1326814757&fm=23&gp=0.jpg style="width:180px;"></td>
<td><img id="p8"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259242501&di=ecbb47604624ef0743e85b785db6c2c3&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D6c8b7689596034a829e2b889fb1249d9%2Fe2afd143ad4bd113865e48ba5fafa40f4afb0565.jpg style="width:168px;"></td>
<td><img id="p9"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259348604&di=e3e6ccff64136c8d844acdfa6893961c&imgtype=0&src=http%3A%2F%2Fpic.dbw.cn%2F0%2F06%2F36%2F00%2F6360072_798628.jpg
style="width:230px;">
<td ><img id="p10"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259434687&di=77b9c84e3b2d5120a92235d9e0a6541b&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3655606407%2C427809814%26fm%3D214%26gp%3D0.jpg style="width:180px;">
<td ><img id="p11"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259499315&di=0428de927e5cafd90f1abc0a2f43a840&imgtype=0&src=http%3A%2F%2Fp0.55tuanimg.com%2Fstatic%2Fgoods%2FrichText%2F2014%2F04%2F13%2F23%2F8004a668eaf31d159bf8c3d1f78cfc78_690_458.jpg style="width:180px;">
</td>
</tr>
<tr>
<tr>
<td><a href="http://baike.baidu.com/link?url=h8ogF1LPKvsgZExCyigcA638ijJPSPNbFzuEN-k261l18ryuN-lkVs3gyfhThkXGweG_l2np5rX18yg4F-19JWoenV6qGnvZbFmhSi6S8dDpnAucUmNWRDDCIfOAz9WXY43CWpGyTccs9T2QuSABEK">洛阳牛肉汤</a></td>
<td><a href="http://baike.baidu.com/link?url=S6Hs9yNFpWvNNiU1G854tbGAm7lhlTDSQaAokIA1bpGPs3PveXQ-5tuYQlbyel167IVSu49WlALN57NIcMRIQ1aiIsYsxuRiGjGym32sVr3xtB-PnmAP4Ab9_vhd5EFUNh4RrIVRAGDNfFNTn_95V_">洛阳不翻汤</a></td>
<td><a href="http://www.360doc.com/content/16/0128/15/19083799_531241987.shtml">洛阳水席</a></td>
<td><a href="http://baike.baidu.com/link?url=y1qUJEMnv2Ah1YAA3I-px2W3NGanV4j_Lw_hJky7oyYLonn8KkJMIIPfKNHrSGo1aSSsn9Gb_-YQF-V-vZ6pTJ9RGWjl7LyYDnrchX2tCw4jMnCB-pohDp8rrvtau14dMusPGsQQh4FziR21nhojNq">洛阳驴肉汤</a></td>
<td><a href="http://news.lyd.com.cn/system/2015/02/13/010377084.shtml">洛阳小碗汤</a></td>
<tr>
<td><img id="p12"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259845816&di=17ed7090da2a7467b5eb04777922c9c4&imgtype=0&src=http%3A%2F%2Fwww.52uyn.com%2Fattachments%2Ffck_1112%2F13234176191931312388.jpg style="width:180px;"></td>
<td><img id="p13"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259699511&di=b30251791f03b4df34b5adbd4b8f8e64&imgtype=0&src=http%3A%2F%2Fimg9.cntrades.com%2F201606%2F13%2F10-35-50-63-1107279.jpg style="width:180px;"></td>
<td><img id="p14"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494259634473&di=8c391caae9494dcf83a314ba280acfcc&imgtype=0&src=http%3A%2F%2Fspe.zwbk.org%2Ffile%2Fupload%2F201412%2F04%2F15-30-17-29-3.jpg style="width:230px;"></td>
<td ><img id="p15"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494260240370&di=9efb91ba4bfc6227815b127c03e0418f&imgtype=0&src=http%3A%2F%2Fzp1.douguo.net%2Fupload%2Fdish%2F5%2F1%2F4%2F600_51000f44f4593c0d1623e213d4cbac24.jpg style="width:180px;">
<td ><img id="p16"src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494260302941&di=0cce87b52414816c1abb3ad9ca1e7f75&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fbainuo%2Fcrop%3D0%2C0%2C470%2C285%3Bw%3D470%3Bq%3D80%2Fsign%3D5f90425f2bf5e0fefa57d34161501898%2F8b13632762d0f7033e00d89a0efa513d2797c5c2.jpg style="width:180px;">
<tr>
<tr>
<td><a href="http://baike.baidu.com/link?url=3uOg7aOFn0u_-7GI3L7j-T_7SSYrk6YlLtgx1LQd-U75KQk0dyd1ytRBtEUVRR3OeZel41ACuF6De2c8l0SJ2BBGtUgMbXbtSNLhZzZEOfKXlbp2hpFOwne4eJlr6qu_vfM8E7K-b9NGickgUaBh_K">北京涮羊肉</a></td>
<td><a href="http://baike.baidu.com/link?url=o0oJMBIatHNgcyM21yzi1skfJFAvqQ6K4IFgEBPXrlGeZgwiVP4nyDo_7_urRQNqEKJJMHL5dvNfhBtz0wCoteqXQh2lX9eM2OQy9v5hB6Qr5X7yeOGpCnmBSgaBA8_D">河南烩面</a></td>
<td><a href="http://baike.baidu.com/link?url=ZrZoNruPcwuHgC9_DWyMl_dwjykc1qZGW28k-3kDzFMRCnZGIzt588hLq-UFYYx8XtA4dPDuGQoZyEDOcEAhoJtvLJKP3jXe6MDbZHtOoMGhbhUS0HQcJJH0_rIu3nKY-eqEB21Kr8AD7kkHxSwlIa">开封灌汤包</a></td>
<td><a href="http://baike.baidu.com/link?url=fUs99t3i9gV_HblyYccNqjLYgFrt0UC-pkniYcqlIKmYG0ysg1BdUcKS4-FdytlObLVya3Jv0Ud0_2eEdECmB6HVooHkXBZlfDbcj8HRanHPayunwgZqI1v6kQLW8TFdcjEfFSmEpl_DY3TT3rZADK">新疆手抓饭</a></td>
<td><a href="http://baike.baidu.com/link?url=TeIq9T8I7AiBMAmqX7YApUqUS9WGS8EpvcQTBx3J7pPx-ntsqv36AI4wdIgHd4L0ugdjefV9NZLbOMX0XXTXR6BK5s9-No4SYkqBrUrzPfk5DFFu3v3_sdfA9e-fxRmS">内蒙烤全羊</a></td>
</table>
<button id="hide" style="margin-left:425px">隐藏攻略</button>
<button id="show">显示攻略</button>
<p id="P2"><a href="http://www.mafengwo.cn/cy/10094/tese.html">洛阳美食全攻略</a></p>
<div id="p17"style="background:#98bf21;height:120px;width:200px;position:absolute;">欢迎观看美食攻略</div>
<p id="P2"><a href="http://lxs.cncn.com/72102/n277906">西安美食全攻略</a></p>
<p id="P2"><a href="http://travel.163.com/16/0427/01/BLKDREGS00063KE8.html">重庆美食全攻略</a></p>
<p id="P2"><a href="http://www.mafengwo.cn/cy/10065/gonglve.html">北京美食全攻略</a></p>
<p id="P2"><a href="http://you.ctrip.com/restaurant/henan100058.html">河南美食全攻略</a></p>
<p id="P2"><a href="http://jsrun.net/qjkKp/show">中国故宫黄山龙门石窟旅游地图展览</a></p>
</section>
#p1{
width:1000px;
margin:auto;
}
header{
width:1000px;
height:50px;
background-color:gray;
}
h1{
text-align:center;
}
section{
width:1000px;
height:900px;
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494181044590&di=c3a3b2ade35a31e243a299fcb74c585e&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F130201%2F235113-13020110045928.jpg);
}
td{
text-align:center
}
#P2{
font-size:23px;
text-align:center;
}