建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > 网页特效 >

jQuery+CSS实现动态问答效果

时间:2011-06-24 12:05来源: 作者: 点击:
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: whit

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>建站学的网址是什么?</dt>
    <dd class="answer">
      <div><a href="http://www.jzxue.com">www.jzxue.com</a></div>
    </dd>
  </dl>
  <dl class="faq">
    <dt>建站学是一个什么样子的网站?</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;
  });
}); 

打包下载

http://www.jzxue.com/System/uploads/soft/web/DYfj/CSS+jQuery.rar

 

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片