HTML中折叠展开的实现。

html-css016

HTML中折叠展开的实现。,第1张

<!DOCTYPE HTML>

<html>

<body>

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

</body>

</html>

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td scope="row"><table border="1">

<tr>

<td id="showbfq" height="20" align="top" onclick="if(bfq.style.display=='none'){bfq.style.display=''showbfq.innerText='优质'}

else{bfq.style.display='none'showbfq.innerText='点击更多'}">点击更多</td>

</tr>

<tr>

<td height="80" align="center" name="bfq" id="bfq" style="display:none">aaa</td>

</tr>

</table></td></tr>

<tr><td><table border="1">

<tr>

<td id="showbfq1" height="20" align="top" onclick="if(bfq1.style.display=='none'){bfq1.style.display=''showbfq1.innerText='优质'}

else{bfq1.style.display='none'showbfq1.innerText='点击更多'}">点击更多</td>

</tr>

<tr>

<td height="80" align="center" name="bfq1" id="bfq1" style="display:none">bbb</td>

</tr>

</table></td></tr>

<tr><td><table border="1">

<tr>

<td id="showbfq2" height="20" align="top" onclick="if(bfq2.style.display=='none'){bfq2.style.display=''showbfq2.innerText='优质'}

else{bfq2.style.display='none'showbfq2.innerText='点击更多'}">点击更多</td>

</tr>

<tr>

<td height="80" align="center" name="bfq2" id="bfq2" style="display:none">ccc</td>

</tr>

</table></td></tr>

</table>

一样的，用一个大表格，把它们竖向的框起来。

看着这一坨的东西就不想去看了，首先问问题要使用专业术语，

如果不会就要说得清楚一点，代码整理一下，这么乱是没有多少人会愿意去解答的。

你这些设置了可以缩放，一般情况下移动端的是这样的，

有时候还需加上这个：

至于你说的背景问题，你可以通过设置一个盒子为width：100%；height：100%；然后把图片放在这个盒子里面，然后设置图片自适应盒子（display:blockwidth:100%），然后在根据body标签来定位，这样它就是一张完美适应的背景图了。