0

我有一个内容，我想在内容里面放一些用户帐户的设置，这样他们就可以更改他们的信息..

这是我的代码 CSS

   *{
    font-family:Verdana, Geneva, sans-serif}
body{
    background-color:#33CC33;
    font-size:0.7em;}
p{
    font-size:1em;
    margin:0 0 1em 0;
    text-align:justify}

dl{
    padding:10px;
    min-width:960px;}

dl dt{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #ccc;
    margin:0;
    width:400px;}

dl dt a{
    color:#000;
    font-weight:bold;
    text-decoration:none;
    padding:10px;
    display:block;
    }

dl dd{
    color:#ccc;
    margin:0;
    width:400px;
    overflow:hidden;
    -webkit-transition:height 1s ease;
    -moz-transition:height 1s ease;
    -o-transition:height 1s ease;}  

dl dd p{
    padding:10px;
    margin:0;}

dl dd:not(:target){
    height:0;}

dl dd:target{
    height:900px;}

dl a.ie:hover dd, dl a.ie:focus dd{
    height:auto;
    color:#ccc !important;}

HTML

<link rel="stylesheet" href="tab.css">
<dl>
<dt><a href="#section1">Account Settings</a></dt>
<dd id="section1">
      <table>
      <form action="" method="post" name="register_form">

      <td><input type="text" name="email" placeholder="E-mail" size="50" /></td>
      </tr>

      <tr>
      <td><input type="text" name="reemail" placeholder="Re-Enter Email" size="50" /></td>
      </tr>

      <tr>
      <td><input type="password" name="password" placeholder="New Password" size="50" /></td>
      </tr>

      <tr>
      <td>
      <input type="text" name="fullname" placeholder="Full Name" size="50" />
      </td>
      </tr>

      <tr>
      <td>
      <input type="text" name="birthday" placeholder="Day Birth YYYY-MM-DD" size="29" />
          <select id="gender" name="gender">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Others">Others</option>                
          </select>
</dd>

<dt><a href="#section2">Privacy Settings</a></dt>
<dd id="section2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</dd>

<dt><a href="#section3">What Settings</a></dt>
<dd id="section3">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</dd>
</dl>

这是我的小提琴 http://jsfiddle.net/obink/kNs8d/

我看到的问题是，当我第一次单击第 1 部分时，一切正常，但是当我更改为第 2 部分时，奇怪的事情就来了……

哎呀，我只用了一个 CSS 和 HTML，我试图让它像 jQuery 或 javascript 一样工作（“当你去第 1 部分时，第 1 部分将缓和而其他部分缓和。否则当你去到第 2 部分，另一部分将缓出，第 2 部分将缓入”）

我正在寻求帮助:(请...

对不起我的英语不好。

4

1 回答 1

0

ohhh一切都是我的错

我忘记关闭表格和表格标签

  </form>
  </table>

并且一些and标签还没有关闭

大声笑很抱歉打扰你

于 2013-09-11T18:41:38.110 回答