论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准，xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

jQuery+CSS实现动态问答效果

文章类别：div+css | 发表日期:2011-6-25 9:38:35

jQuery+CSS实现的动态的问答效果，看大家有需要没。

 

CSS代码

* {margin: 0; padding: 0;}
html {overflow-y: scroll;}
body {font: 18px Georgia, serif;}
#page-wrap {width: 500px; margin: 20px auto;}
dl {clear: both; margin: 0 0 60px 0;}
dt {border: 8px solid #7ac0d0; padding: 10px; background: white; position: relative; font-style: italic; position: relative; display: block; width: 100%; height: auto;}   
dd.answer {background: white; position: relative; width: 70%; float: right;}
dd.answer div {padding: 10px; border-left: 8px solid #dedede; border-right: 8px solid #dedede; border-bottom: 8px solid #dedede; margin: 0 0 10px 0;}
.answer-tab {background: url("images/answer-tag.png"); display: block; text-indent: -9999px; width: 105px; height: 50px; cursor: pointer; position: absolute; bottom: -58px; left: 10px;}

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery+CSS实现的动态问答效果 - 低一度</title>
<link rel="stylesheet" type="text/css" href="style.css" _fcksavedurl=""style.css"" />
<script src="http://www.google.com/jsapi"></script>
<script>
      google.load("jquery", "1.2.6");
    </script>
<script type="text/javascript" src="js/faq.js"></script>
</head>
<body>
<div id="page-wrap">
  <dl class="faq">
    <dt>21视频教程网的网址是什么？</dt>
    <dd class="answer">
      <div><a href="http://www.21shipin.com">www.21shipin.com</a></div>
    </dd>
  </dl>
  <dl class="faq">
    <dt>21视频教程网是一个什么样子的网站？</dt>
    <dd class="answer">
      <div>我站有网页网站制作教程,个人网站建设指南等,以及相关经验技巧类视频教程,另有建站入门,建站必修课,建站关键课等视频教程。</div>
    </dd>
  </dl>

</div>
</body>
</html>
faq.js文件代码

$(function(){
 
 $("dd.answer")
  .hide();
 
 $("dl.faq dt")
  .append("<br /><a href='#' title='Answer' class='answer-tab'>Answer</a>");
  
 $(".answer-tab")
  .click(function(){
   $(this)
    .parent().parent()
    .find("dd.answer")
    .slideToggle();
            return false;
  });
}); 

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058