经典案例-制作FAO列表页
来源:互联网 发布:词汇量测试什么软件 编辑:程序博客网 时间:2024/05/17 15:37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>FAQ列表</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><style type="text/css" >.one{ width:600px;font-size:12px;}.one .top{background-color:#fff; height:33px;line-height:33px;width:700px;padding-left:28px;color:#168750;font-weight:bold;margin-top:10px;}.iocn{display:block; width:14px;height:14px;background-image:url(images/+.jpg); background-repeat:no-repeat; float:left;margin:10px 0px 0px 3px;padding-right:10px;}.one span.jian{background-image:url(images/-.jpg); }.one span.jia{background-image:url(images/+.jpg); } .one div.bgreen{ background-image:url(images/bg.jpg); }div.content{display:none;padding:5px;width:716px;border:1px solid #D9EFED;}</style><script type="text/javascript">$(document).ready(function() {$(".top").hover(function() {$(this).addClass("bgreen");}, function() {$(this).removeClass("bgreen");});$(".top").toggle(function() {$(this).find(".iocn").removeClass("jia").addClass("jian");$(this).siblings(".content").show("1");}, function() {$(this).find(".iocn").removeClass("jian").addClass("jia");$(this).siblings(".content").hide("show");}); });</script></head><body> <div id="fq"> <div class="one"> <div class="top"><span class="iocn"></span>什么是人身保险?</div> <div class="content"> <img src="images/gd.jpg" /><br/> <p>人身保险是人的寿命和身体为...... </p> </div> </div> <div class="one"> <div class="top"><span class="iocn"></span>什么是保险合同?</div> <div class="content"> <img src="images/gd.jpg" /><br/> <p>保险合同是......</p> </div> </div> <div class="one"> <div class="top"><span class="iocn"></span>什么是保险人?</div> <div class="content"> <img src="images/gd.jpg" /><br/> <p>保险人是......</p> </div> </div> <div class="one"> <div class="top"><span class="iocn"></span>什么是投保人?</div> <div class="content"> <img src="images/gd.jpg" /><br/> <p>投保人是......</p> </div> </div> </div></body></html>
效果图如下:
0 1
- 经典案例-制作FAO列表页
- 经典案例
- JavaScript特效制作经典精讲(案例入门详解、可直接粘贴拷贝运行、史上最牛案例)
- bootstrap列表页制作之列表组使用
- 网页制作案例
- 见缝插针案例制作
- Unity_NGUI案例制作_048
- struts2_day01_17_案例-客户列表
- 嵌套查询经典案例
- C经典案例
- log4j经典案例
- SNS经典案例 分享
- 经典处事案例
- 接口的经典案例
- oracle 经典查询案例
- 数据查询经典案例
- 数据挖掘经典案例
- C++继承经典案例
- js中getDay()和getDate(),常用的时间函数
- laravel5基础用法
- 【PM】【进度】:把握项目节奏的方法
- IntelliJ使用指南—— 导入Eclipse的Web项目
- 初识Java之概念
- 经典案例-制作FAO列表页
- caffe loss 曲线(python 正则表达式)
- UEFI原理与编程(四):UEFI工程模块文件-使用main函数的应用程序工程模块
- 正则表达式
- JAVA实现仿微信红包分配规则
- JQuery动画
- 进程死锁算法——Peterson与Dekker
- altera FPGA时序工程约束主要命令
- 解决发布App到Apple Store无法构建版本的问题