使用JQuery快速高效制作网页交互特效第六章课后

课后五
样式

*{padding:0px;margin:0px;font-size:12px;}
a{color:#000;text-decoration:none;
}
ul{list-style:none;}
dl,dt,dd{display:block;
}
dl{clear:both;height:30px;width:670px;line-height:30px;
}
dl dt{width:100px;padding-left:10px;float:left;
}
dl dd{float:left;
}
dl dd a{margin:3px;}
dl dd.more{float:right;margin-right:10px;
}

代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>隔行变色的列表</title><link rel="stylesheet" href="css/nav.css"></head>
<body>
<div class="content"><dl><dt><a href="http://www.6655.com/1/youxi.htm">[页游]</a></dt><dd ><ul><li><a href="http://codes.dian5000.com/htmlcode/38319.html">枪魂</a><a href="http://p.37pk49.com/s/1/683/11722.html?uid=510412">女神联盟</a> <ahref="http://tg.131cc.com/?uid=510412">37WAN游戏</a> <ahref="http://p.37pk49.com/s/1/683/13574.html?uid=510412">武易</a> <ahref="http://jcnm.game3737.com/htmlcode/36266.html">斗圣</a> <ahref="http://tk.pk897.com/1616dh.php?id=2467">烈焰</a> <ahref="http://p.37pk49.com/s/1/683/14006.html?uid=510412">大闹天宫OL</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多&gt;&gt;</a></dd></dl><dl class="s1"><dt><a href="http://www.6655.com/1/xiaoyouxi.htm">[小游戏]</a></dt><dd ><ul><li><a href="http://www.4339.cc">4339小游戏</a> <ahref="http://www.6949.com">6949小游戏</a> <ahref="http://www.3155.com/?hmsr=1616">3155小游戏</a> <ahref="http://www.4399i.net/">4399i小游戏</a> <ahref="http://www.3199.cn/?hmsr=1616">3199小游戏</a> <ahref="http://www.7k7k7.net">7k7k7小游戏</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/xiaoyouxi.htm">更多&gt;&gt;</a></dd></dl><dl><dt><a href="http://www.6655.com/1/yingshi.htm">[影视]</a></dt><dd ><ul><li><a href="http://www.iqiyi.com">爱奇艺高清</a><ahref="http://www.tudou.com/">土豆网</a><ahref="http://tv.sohu.com/movie/">搜狐电影</a><a href="http://tv.cntv.cn/">CNTV</a><a href="http://www.kktv1.com/c.shtml?c=52560">KK美女视频</a> <ahref="http://p.yiqifa.com/s?sid=a4df75c5719e9b11&amp;pid=184&amp;wid=410486&amp;vid=426282&amp;cid=7100&amp;lid=168915&amp;euid=&amp;vwid=">六间房</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/yingshi.htm">更多&gt;&gt;</a></dd></dl><dl class="s1"><dt><a href="http://www.6655.com/1/xiaoshuo.htm">[小说]</a></dt><dd ><ul><li><a href="http://www.qdmm.com/">起点女生网</a> <ahref="http://www.zongheng.com/?co=1616">纵横中文网</a> <ahref="http://p.yiqifa.com/c?s=3b2f15ba&amp;w=88243&amp;c=6805&amp;i=23342&amp;l=0&amp;e=&amp;t=http://www.zazhipu.com/">杂志铺</a><ahref="http://www.xxsy.net/">潇湘书院</a> <ahref="http://www.qidian.com/Default.aspx">起点</a> <ahref="http://www.xs8.cn/">言情小说吧</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/xiaoshuo.htm">更多&gt;&gt;</a></dd></dl><dl><dt><a href="http://www.6655.com/1/youxi.htm">[游戏]</a></dt><dd ><ul><li><a href="http://365.uc108.com/">同城游棋牌</a><ahref="http://games.sina.com.cn/">新浪游戏</a><ahref="http://p.yiqifa.com/c?s=ae39a645&amp;w=154815&amp;c=6756&amp;i=23904&amp;l=0&amp;e=&amp;t=http://www.5173.com/">5173游戏交易</a><ahref="http://www.17173.com/">17173游戏</a><ahref="http://www.duowan.com/">多玩游戏</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/youxi.htm">更多&gt;&gt;</a></dd></dl><dl class="s1"><dt><a href="http://www.6655.com/1/yinyue.htm">[音乐]</a></dt><dd ><ul><li><a href="http://www.1ting.com">一听音乐网</a> <ahref="http://mp3.sogou.com/">搜狗音乐</a> <ahref="http://music.baidu.com">百度mp3</a> <ahref="http://www.yinyuetai.com/">音悦台MV</a> <ahref="http://www.iqiyi.com/zongyi/superboy.html">快乐男声</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/yinyue.htm">更多&gt;&gt;</a></dd></dl><dl><dt><a href="http://www.6655.com/1/jiaoyou.htm">[交友]</a></dt><dd ><ul><li><ahref="http://reg.jiayuan.com/st/?id=421710&amp;url=http://reg.jiayuan.com">世纪佳缘</a><a href="http://www.zhiji.com/?ad=1616" class="green">同城交友网</a><ahref="http://www.zhenai.com/901934.html">珍爱网</a><ahref="http://www.9see.com/go123?from=120_1">美女秀场</a> <ahref="http://www.iqiyi.com/zongyi/fcwr.html">非诚勿扰</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/jiaoyou.htm">更多&gt;&gt;</a></dd></dl><dl class="s1"><dt><a href="http://www.6655.com/1/lvyou.htm">[旅游]</a></dt><dd ><ul><li><ahref="http://vacations.ctrip.com/?allianceid=1091&amp;sid=1227&amp;ouid=">携程旅游</a><ahref="http://www.tuniu.com/?p=1627&amp;cmpid=mkt_08005301&amp;utm_campaign=daohang&amp;utm_source=1616.net&amp;utm_medium=textlink"class="green">途牛旅游网</a><a href="http://www.zoutu.com/">云南旅游</a><ahref="http://hotel.elong.com/?banid=1616">艺龙订酒店</a> <ahref="http://www.qunar.com/?ex_track=auto_4f4dd298">去哪儿旅游</a> <ahref="http://detail.tmall.com/item.htm?id=21737099723">迪士尼门票</a> <ahref="http://www.17u.cn/FlightQuery.aspx#refid=14748221">同程机票</a></li></ul></dd><dd class="more"><a href="http://www.6655.com/1/lvyou.htm">更多&gt;&gt;</a></dd></dl></div>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){$(".s1").css("background","#ececec");})
</script>
</body>
</html>

课后六
代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>分享特效</title><style type="text/css">dt{height:30px;}dt img{margin-left:80px;display:none;}</style></head>
<body>
<dl><dt ><img src="Image/text.gif"  /></dt><dd>分享到：<img src="Image/iocns.gif"  /></dd>
</dl>
<script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){$("dd img").click(function(){$("img:hidden").show();});$("dt img").click(function(){$("dt img:visible").hide();});})
</script>
</body>
</html>

使用JQuery快速高效制作网页交互特效第六章课后相关推荐

使用JQuery快速高效制作网页交互特效第六章所有上机
上机一样式 body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;padding: 0;} body{font-family: "微软雅 ...
使用JQuery快速高效制作网页交互特效第五章所有上机
上机一 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8& ...
使用jQuery快速高效制作网页交互特效第五章上机练习四制作广告图片轮播切换效果
轮播应有的功能大致都有,分享给一些在学的朋友参考学习. <!DOCTYPE html> <html> <head lang="en"><m ...
使用jQuery快速高效制作网页交互特效
第四章:JQuery选择器 1.Jquery选择器简介 (1) Jquery中的选择器完全继承了CSS的风格,利用Jquery选择器,可以非常便捷和快速的找出特定的Dom元素,然后为他们添加相应的行为 ...
使用JQuery快速高效制作网页交互特效第九章所有上机
这里是引用上机一样式 body{border:0px;padding:0px;margin:0px auto;font:12px Tahoma; } div,ul,li,dt,dl {float: ...
使用jQuery 快速高效制作网页特效
使用jQuery 快速高效制作网页特效第一章:JavaScript基础 DOM:document object model 文档对 ...
[开源] OpWeb 框架－－快速高效的实时交互框架（更新至 0.0.4.0）
一个轻量高效的实时交互开发框架,用于开发实时Web App 或者网络游戏. 这是什么? 这是一个Web在线对战射击游戏(MMOA)的开源版本,该游戏依然在运行中. 原有平台为C#,现在我通过Shar ...
《快速掌握PyQt5》第三十六章用PyQtGraph绘制可视化数据图表
第三十六章用PyQtGraph绘制可视化数据图表 36.1 下载PyQtGraph 36.2 基础知识与用法 36.3 将PyQtGraph嵌入到PyQt5中 36.4 小结 <快速掌握PyQ ...
可视化IDE | 快速高效制作可视化大屏~
微兔Visual Tools 2021 Beta版发布,旨在让更多人轻松打造炫酷实用的可视化大屏,一款全新高自由度图表配置.多数据源实时渲染.源码一键下载的数据可视化设计工具~免费下载可视化IDE搭建 ...
全景丨0基础学习VR全景制作，后期篇第六章：拼接工具的教程
大家好,欢迎观看蛙色官方系列全景摄影课程! 本节教程,我们讲述拼接软件PTGui Pro 操作的第一步:导入源图像和预设镜头&画幅参数. 我们此次课堂有两个重点: 第一点是培养摄影后期中良好 ...

使用JQuery快速高效制作网页交互特效第六章课后

使用JQuery快速高效制作网页交互特效第六章课后相关推荐

最新文章

热门文章