Header 可扩展文本的文本大小
Sizing of Header Text for Expandable Text
我正在尝试更改可扩展部分 headers 之间的间距,如 here 所示。我已经想出如何更改字体大小,但随着我增加大小,headers 开始相互重叠。我真的很陌生,如果这是一个明显的答案,我很抱歉。我正在使用 Squarespace 作为主机。
这是该部分的 HTML:
<span style="cursor:hand; cursor:pointer" onClick="openAll()">[ Open
All</span> | <span style="cursor:hand; cursor:pointer"
onClick="closeAll()">Close All ]</span><br /><br />
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer;
font-family:verdana,arial,helvetica,sans-serif; font-size:30pt"><b>
MIDDLE SCHOOL +</b></div>
<div id="a1" class="texter">
<p>
</p>
Middle School - 6th-8th Grade (11-14 yo)
Being a Middle School student can be hard, fun, quirky and, for some
reason, no matter how much the culture changes the experience of being
a Middle School student never changes. If you are in 6th, 7th, or 8th
Grade in a private, public, or homeschool setting, you have a place
with us that is specifically geared to and focused on navigating the
Middle School aged years while trying to grasp the Gospel’s effects on
that time of life. Join us for any of our regular Middle School events
and/or our Middle School Sunday Night Fellowship.
<p>
</p>
<i><b>Middle School Sunday Night Fellowship (SNF)</b></i>
SNF occurs most Sunday nights during the school year. These nights have
four elements to them - food, games, worship, and discipleship. Dinner
is always provided for all students. Middle School SNF runs from
5:00pm-7:00pm in the Student Ministry Room (110). To find out more
about SNF, check out the SNF section on the Student Ministry page.
<p>
</p>
<br /><br />
</div>
这是页面 Header HTML:
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2007, Sandeep Gangadharan -->
<!--
if (document.getElementById) {
document.write('<style type="text/css">.texter {display:none; border-
left:white 20px solid; color:#404040; font-
family:verdana,arial,helvetica,sans-serif; font-size:9pt} @media print
{.texter {display:block;}}</style>') }
var divNum = new Array("a1","a2","a3", "a4", "a5");
function openClose(theID) {
for(var i=0; i < divNum.length; i++) {
if (divNum[i] == theID) {
if (document.getElementById(divNum[i]).style.display == "block") {
document.getElementById(divNum[i]).style.display = "none" }
else { document.getElementById(divNum[i]).style.display = "block" }
}else { document.getElementById(divNum[i]).style.display = "none"; }
}
}
function openAll() {
for(var i=0; i < divNum.length; i++) {
document.getElementById(divNum[i]).style.display = "block";
}
}
function closeAll() {
for(var i=0; i < divNum.length; i++) {
document.getElementById(divNum[i]).style.display = "none";
}
}
// -->
</script>
将此添加到您的 css 代码中
div[onclick^=openClose] {
margin-bottom: 20px;
}
此代码将为具有属性 onclick
且其值以 openClose
值开头的任何 div 提供 margin-bottom: 20px
。
这个image可能会进一步解释。
编辑:
要将 css 代码添加到您的 html,只需在 <head>
标签中输入下面的 css 代码。
<style>
div[onclick^=openClose] {
margin-bottom: 20px;
}
</style>
我正在尝试更改可扩展部分 headers 之间的间距,如 here 所示。我已经想出如何更改字体大小,但随着我增加大小,headers 开始相互重叠。我真的很陌生,如果这是一个明显的答案,我很抱歉。我正在使用 Squarespace 作为主机。
这是该部分的 HTML:
<span style="cursor:hand; cursor:pointer" onClick="openAll()">[ Open
All</span> | <span style="cursor:hand; cursor:pointer"
onClick="closeAll()">Close All ]</span><br /><br />
<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer;
font-family:verdana,arial,helvetica,sans-serif; font-size:30pt"><b>
MIDDLE SCHOOL +</b></div>
<div id="a1" class="texter">
<p>
</p>
Middle School - 6th-8th Grade (11-14 yo)
Being a Middle School student can be hard, fun, quirky and, for some
reason, no matter how much the culture changes the experience of being
a Middle School student never changes. If you are in 6th, 7th, or 8th
Grade in a private, public, or homeschool setting, you have a place
with us that is specifically geared to and focused on navigating the
Middle School aged years while trying to grasp the Gospel’s effects on
that time of life. Join us for any of our regular Middle School events
and/or our Middle School Sunday Night Fellowship.
<p>
</p>
<i><b>Middle School Sunday Night Fellowship (SNF)</b></i>
SNF occurs most Sunday nights during the school year. These nights have
four elements to them - food, games, worship, and discipleship. Dinner
is always provided for all students. Middle School SNF runs from
5:00pm-7:00pm in the Student Ministry Room (110). To find out more
about SNF, check out the SNF section on the Student Ministry page.
<p>
</p>
<br /><br />
</div>
这是页面 Header HTML:
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2007, Sandeep Gangadharan -->
<!--
if (document.getElementById) {
document.write('<style type="text/css">.texter {display:none; border-
left:white 20px solid; color:#404040; font-
family:verdana,arial,helvetica,sans-serif; font-size:9pt} @media print
{.texter {display:block;}}</style>') }
var divNum = new Array("a1","a2","a3", "a4", "a5");
function openClose(theID) {
for(var i=0; i < divNum.length; i++) {
if (divNum[i] == theID) {
if (document.getElementById(divNum[i]).style.display == "block") {
document.getElementById(divNum[i]).style.display = "none" }
else { document.getElementById(divNum[i]).style.display = "block" }
}else { document.getElementById(divNum[i]).style.display = "none"; }
}
}
function openAll() {
for(var i=0; i < divNum.length; i++) {
document.getElementById(divNum[i]).style.display = "block";
}
}
function closeAll() {
for(var i=0; i < divNum.length; i++) {
document.getElementById(divNum[i]).style.display = "none";
}
}
// -->
</script>
将此添加到您的 css 代码中
div[onclick^=openClose] {
margin-bottom: 20px;
}
此代码将为具有属性 onclick
且其值以 openClose
值开头的任何 div 提供 margin-bottom: 20px
。
这个image可能会进一步解释。
编辑:
要将 css 代码添加到您的 html,只需在 <head>
标签中输入下面的 css 代码。
<style>
div[onclick^=openClose] {
margin-bottom: 20px;
}
</style>