Wordpress 使用详细信息标签创建奇怪的间距
Wordpress creates wierd spacing with details tags
我正在创建一个缩进菜单，用于访问我的机器人团队的 website. It works perfectly when it runs as an isolated HTML page with the "custom.css" file. When I paste the code in Wordpress the details are about an inch apart vertically. I cannot find anything in the theme.css (I am using the Hueman 主题上的资源）可以执行此操作。如果我在可视化编辑器中做任何事情，它将移动我的 "display" 标签并破坏 HTML。
这是 html 代码
<div style="display:block;">
<!--team documents--><details><summary>Team Documents</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Team-Handbook.pdf">Power Hawks Team Handbook</a>
<a href="https://drive.google.com/file/d/0B6AhVZidEPEeSl9sNXV0aUx3MDA/view">Identity Standards Document</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Robotics2014-2015-Sponsorship-Package.pdf">Sponsorship Package</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Driver-Permission.pdf">Driver Form</a>
</details><!--team documents-->
<!--document templates--><details><summary>Document Templates</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Word-Template.docx">Power Hawks Word Template</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Powerpoint-Template.potx">Power Hawks Powerpoint Template</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Team-letterhead.docx">Team letterhead</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Document-cover.indd">Document cover</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Envelope.indd">Envelope</a>
</details><!--document templates-->
<!--visual media--><details ><summary>Visual Media</summary>
<!--logos--><details class="indent1"><summary>Logos</summary>
<!--primary logo--><details class="indent2"><summary>Primary Logo</summary>
<!--primary color--><details class="indent3"><summary>Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.png" alt="Primary Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.dwg">Primary Logo Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.emf">Primary Logo Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.eps">Primary Logo Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.png">Primary Logo Color PNG</a>
</details ><!--primary color-->
<!--primary grayscale--><details class="indent3"><summary>Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.png" alt="Primary Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.dwg">Primary Logo Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.emf">Primary Logo Grayscale EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.eps">Primary Logo Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.png" target="_blank">Primary Logo Grayscale PNG</a>
<!--primary grayscale--></details>
<!--primary black--><details class="indent3"><summary>Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.png" alt="Primary Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.dwg">Primary Logo Black&White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.emf">Primary Logo Black&White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.eps">Primary Logo Black&White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.png" target="_blank">Primary Logo Black&White PNG</a>
<!--primary black--></details>
<!--primary logo--></details>
<!--hawk head--><details class="indent2"><summary>Hawk Head</summary>
<!--head color--><details class="indent3"><summary>Hawk Head Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.png" alt="Hawk Head Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.dwg">Hawk Head Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.emf">Hawk Head Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.eps">Hawk Head Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.png" target="_blank">Hawk Head Color PNG</a>
</details><!--head color-->
<!--head grayscale--><details class="indent3"><summary>Hawk Head Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.png" alt="Hawk Head Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.dwg">Hawk Head Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.emf">Hawk Head Grayscale EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.eps">Hawk Head Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.png" target="_blank">Hawk Head Grayscale PNG</a>
</details><!--head grayscale-->
<!--head black--><details class="indent3"><summary>Hawk Head Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.png" alt="Hawk Head Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.dwg">Hawk Head Black&White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.emf">Hawk Head Black&White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.eps">Hawk Head Black&White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.png" target="_blank">Hawk Head Black&White PNG</a>
</details><!--head black-->
</details><!--hawk head-->
<!--text logo--><details class="indent2"><summary>Text Logo</summary>
<!--tl color--><details class="indent3"><summary>Text Logo Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.png" alt="Text Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.dwg">Text Logo Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.emf">Text Logo Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.eps">Text Logo Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.png" target="_blank">Text Logo Color PNG</a>
</details><!--tl color-->
<!--tl grayscale--><details class="indent3"><summary>Text Logo Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.png" alt="Text Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.dwg">Text Logo Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.emf">Text Logo Grayscale EMF</a>
<a href="http://powerhawks.org/wp/wp-content/uploads/2014/08/textuallogo-grayscale.eps">Text Logo Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.png" target="_blank">Text Logo Grayscale PNG</a>
</details><!--tl grayscale-->
<!--tl black--><details class="indent3"><summary>Text Logo Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.png" alt="Text Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.dwg">Text Logo Black&White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.emf">Text Logo Black&White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.eps">Text Logo Black&White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.png" target="_blank">Text Logo Black&White PNG</a>
</details><!--tl black-->
</details><!--text logo-->
<!--stamp--><details class="indent2"><summary>Stamp</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/stamp.png" alt="Stamp" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.dwg">Stamp DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.emf">Stamp EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.eps">Stamp EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.png" target="_blank">Stamp PNG</a>
</details><!--stamp-->
</details><!--logos-->
<!--fonts--><details class="indent1"><summary>Fonts</summary>
<!--title font--><details class="indent2"><summary>Title Font Family</summary>
<p style="indent2">The primary title font family (Serpentine) should be used as a primary heading in all written communication. The secondary title font family (Helvetica) should be used as a subheading in all written communication.</p>
<!--serpentine--><details class="indent3"><summary>Serpentine</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/SerpentineStd-Bold.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/serpentine.png" class="fontimg"></a>
</details><!--serpentine-->
<!--helvetica--><details class="indent3"><summary>Helvetica</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica.png" class="fontimg"></a>
</details><!--helvetica-->
<!--helvetica black--><details class="indent3"><summary>Helvetica Black</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica-black.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica-Black.png" class="fontimg"></a>
</details><!--helvetica black-->
</details><!--title font-->
<!--para font--><details class="indent2"><summary>Paragraph Font Family</summary>
<p style="indent2">The paragraph font family should be used in all correspondence in paragraph form when under 14 point font.</p>
<!--times--><details class="indent3"><summary>Times New Roman</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/times.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Times.png" class="fontimg"></a>
</details><!--times-->
</details><!--para font-->
<!--display font--><details class="indent2"><summary>Display Font Family</summary>
<p style="indent2">The display font family should be used with correspondence in paragraph form when over 14 point font.</p>
<!--arial--><details class="indent3"><summary>Arial</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/arial.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Arial.png" class="fontimg"></a>
</details><!--arial-->
<!--arial black--><details class="indent3"><summary>Arial Black</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/arial-black.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/arial-black.png" class="fontimg"></a>
</details><!--arial black-->
</details><!--display font-->
</details><!--fonts-->
<!--color palette--><details class="indent1"><summary>Color Palette</summary>
<div id="wrapper">
<p class="palette" style="background-color:#4169E1;">Power Hawk Blue<br> Hex: 4169E1 <br> RGB: R: 65, G: 105, B: 225 <br> CMYK: C: 71, M: 53, Y: 0, K: 12 <br> Pantone: #281 C</p>
<p class="palette-light" style="background-color:#FFFFFF;">White<br>Hex:FFFFFF<br>RGB: R: 255, G: 255, B: 255<br>CMYK: C: 0, M: 0, Y: 0, K: 0<br>Pantone: #9063 C</p>
<p class="palette" style="background-color:#2f3f58;">Dark Blue<br>Hex: 2f3f58<br>RGB: R: 47, G: 63, B: 88<br>CMYK: C: 47, M: 28, Y: 0, K: 65<br>Pantone: #534 C</p>
<p class="palette-light" style="background-color:#9eb0c9;">Slate Blue<br>Hex: 9eb0c9<br>RGB: R: 158, G: 176, B: 201<br>CMYK: C: 21, M: 12, Y: 0, K: 21<br>Pantone: #536 C</p>
<p class="palette" style="background-color:#c74f4f;">Power Hawk Red<br>Hex: c74f4f<br>RGB: R: 199, G: 79, B: 79<br>CMYK: C: 0, M: 60, Y: 60, K: 22<br>Pantone: #7418 C</p>
<p class="palette-light" style="background-color:#f0ebe7;">Cool Gray<br>Hex: f0ebe7<br>RGB: R: 240, G: 235, B: 231<br>CMYK: C: 0, M: 2, Y: 4, K: 6<br>Pantone: #1 C</p>
<p class="palette" style="background-color:#000000;">Black<br>Hex: 000000<br>RGB: R: 0, G: 0, B: 0<br>CMYK: C: 0, M: 0, Y: 0, K: 100<br>Pantone: #6 C</p>
</div>
</details><!--color palette-->
</details><!--vis med-->
<!--other resources--><details style="float: left;"><summary>Other Resources</summary>
<a href="https://www.flickr.com/photos/114070590@N03/" alt="Flickr">Flickr</a>
<a href="http://www.powerhawks.org/scouting/" alt="Scouting">Scouting</a>
<a href="https://www.usfirst.org" alt="FIRST">FIRST</a>
</details><!--other resources-->
</div>
这是习俗 CSS
#wrapper{overflow:hidden; height:auto;} /*for the div on color palette to auto height properly*/
0 .indent1{边距-左:25px;右边距：自动；}
.indent2{margin-left:50px; margin-right:auto;}
.indent3{margin-left:70px; margin-right:auto;}
.palette-light{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
font-color:white;
color:black;}
.palette{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
font-color:white;
color:white;}
/*overrides*/
summary{font-size:20px;}
/*font*/
h1,h2,h3,summary{font-family:serpentine;}
h4,h5,h6{font-family:helvetica;}
body{font-size:200%;}
@font-face {
font-family: 'serpentine';
src: url('fonts/SerpentineStd-Bold.eot');
src: url('fonts/SerpentineStd-Bold.otf') format('opentype'),
url('fonts/SerpentineStd-Bold.woff') format('woff'),
url('fonts/SerpentineStd-Bold.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'helvetica';
src: url('fonts/Helvetica.eot');
src: url('fonts/Helvetica.otf') format('opentype'),
url('fonts/Helvetica.woff') format('woff'),
url('fonts/Helvetica.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
主题css中关于细节的唯一代码是
{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
和
{ list-style: none; }
在 fire bug 中，我看到每个 div 下面都有空段落和 br。只需删除它。
<p><!--document templates--></p>
<p><!--visual media--><br>
</p><details>
我通过安装 Preserved HTML Editor Markup Plus 插件解决了这个问题，它使 HTML 按预期工作。作为副作用，一些在 Wordpress 可视化编辑器中制作的页面被损坏。
我正在创建一个缩进菜单，用于访问我的机器人团队的 website. It works perfectly when it runs as an isolated HTML page with the "custom.css" file. When I paste the code in Wordpress the details are about an inch apart vertically. I cannot find anything in the theme.css (I am using the Hueman 主题上的资源）可以执行此操作。如果我在可视化编辑器中做任何事情，它将移动我的 "display" 标签并破坏 HTML。 这是 html 代码
<div style="display:block;">
<!--team documents--><details><summary>Team Documents</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Team-Handbook.pdf">Power Hawks Team Handbook</a>
<a href="https://drive.google.com/file/d/0B6AhVZidEPEeSl9sNXV0aUx3MDA/view">Identity Standards Document</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Robotics2014-2015-Sponsorship-Package.pdf">Sponsorship Package</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Driver-Permission.pdf">Driver Form</a>
</details><!--team documents-->
<!--document templates--><details><summary>Document Templates</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Word-Template.docx">Power Hawks Word Template</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Power-Hawks-Powerpoint-Template.potx">Power Hawks Powerpoint Template</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Team-letterhead.docx">Team letterhead</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Document-cover.indd">Document cover</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Envelope.indd">Envelope</a>
</details><!--document templates-->
<!--visual media--><details ><summary>Visual Media</summary>
<!--logos--><details class="indent1"><summary>Logos</summary>
<!--primary logo--><details class="indent2"><summary>Primary Logo</summary>
<!--primary color--><details class="indent3"><summary>Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.png" alt="Primary Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.dwg">Primary Logo Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.emf">Primary Logo Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.eps">Primary Logo Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/New-blue.png">Primary Logo Color PNG</a>
</details ><!--primary color-->
<!--primary grayscale--><details class="indent3"><summary>Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.png" alt="Primary Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.dwg">Primary Logo Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.emf">Primary Logo Grayscale EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.eps">Primary Logo Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Grayscale.png" target="_blank">Primary Logo Grayscale PNG</a>
<!--primary grayscale--></details>
<!--primary black--><details class="indent3"><summary>Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.png" alt="Primary Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.dwg">Primary Logo Black&White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.emf">Primary Logo Black&White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.eps">Primary Logo Black&White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Backandwhite.png" target="_blank">Primary Logo Black&White PNG</a>
<!--primary black--></details>
<!--primary logo--></details>
<!--hawk head--><details class="indent2"><summary>Hawk Head</summary>
<!--head color--><details class="indent3"><summary>Hawk Head Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.png" alt="Hawk Head Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.dwg">Hawk Head Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.emf">Hawk Head Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.eps">Hawk Head Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head.png" target="_blank">Hawk Head Color PNG</a>
</details><!--head color-->
<!--head grayscale--><details class="indent3"><summary>Hawk Head Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.png" alt="Hawk Head Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.dwg">Hawk Head Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.emf">Hawk Head Grayscale EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.eps">Hawk Head Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-grayscale.png" target="_blank">Hawk Head Grayscale PNG</a>
</details><!--head grayscale-->
<!--head black--><details class="indent3"><summary>Hawk Head Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.png" alt="Hawk Head Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.dwg">Hawk Head Black&White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.emf">Hawk Head Black&White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.eps">Hawk Head Black&White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Hawk-Head-solidblack.png" target="_blank">Hawk Head Black&White PNG</a>
</details><!--head black-->
</details><!--hawk head-->
<!--text logo--><details class="indent2"><summary>Text Logo</summary>
<!--tl color--><details class="indent3"><summary>Text Logo Color</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.png" alt="Text Logo Color" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.dwg">Text Logo Color DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.emf">Text Logo Color EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.eps">Text Logo Color EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo.png" target="_blank">Text Logo Color PNG</a>
</details><!--tl color-->
<!--tl grayscale--><details class="indent3"><summary>Text Logo Grayscale</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.png" alt="Text Logo Grayscale" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.dwg">Text Logo Grayscale DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.emf">Text Logo Grayscale EMF</a>
<a href="http://powerhawks.org/wp/wp-content/uploads/2014/08/textuallogo-grayscale.eps">Text Logo Grayscale EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-grayscale.png" target="_blank">Text Logo Grayscale PNG</a>
</details><!--tl grayscale-->
<!--tl black--><details class="indent3"><summary>Text Logo Black and White</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.png" alt="Text Logo Black and White" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.dwg">Text Logo Black&White DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.emf">Text Logo Black&White EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.eps">Text Logo Black&White EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/textuallogo-solidblack.png" target="_blank">Text Logo Black&White PNG</a>
</details><!--tl black-->
</details><!--text logo-->
<!--stamp--><details class="indent2"><summary>Stamp</summary>
<img src="http://powerhawks.org/wp-content/uploads/2014/08/stamp.png" alt="Stamp" class="example"/><br>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.dwg">Stamp DWG</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.emf">Stamp EMF</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.eps">Stamp EPS</a>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/stamp.png" target="_blank">Stamp PNG</a>
</details><!--stamp-->
</details><!--logos-->
<!--fonts--><details class="indent1"><summary>Fonts</summary>
<!--title font--><details class="indent2"><summary>Title Font Family</summary>
<p style="indent2">The primary title font family (Serpentine) should be used as a primary heading in all written communication. The secondary title font family (Helvetica) should be used as a subheading in all written communication.</p>
<!--serpentine--><details class="indent3"><summary>Serpentine</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/SerpentineStd-Bold.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/serpentine.png" class="fontimg"></a>
</details><!--serpentine-->
<!--helvetica--><details class="indent3"><summary>Helvetica</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica.png" class="fontimg"></a>
</details><!--helvetica-->
<!--helvetica black--><details class="indent3"><summary>Helvetica Black</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica-black.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Helvetica-Black.png" class="fontimg"></a>
</details><!--helvetica black-->
</details><!--title font-->
<!--para font--><details class="indent2"><summary>Paragraph Font Family</summary>
<p style="indent2">The paragraph font family should be used in all correspondence in paragraph form when under 14 point font.</p>
<!--times--><details class="indent3"><summary>Times New Roman</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/times.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Times.png" class="fontimg"></a>
</details><!--times-->
</details><!--para font-->
<!--display font--><details class="indent2"><summary>Display Font Family</summary>
<p style="indent2">The display font family should be used with correspondence in paragraph form when over 14 point font.</p>
<!--arial--><details class="indent3"><summary>Arial</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/arial.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/Arial.png" class="fontimg"></a>
</details><!--arial-->
<!--arial black--><details class="indent3"><summary>Arial Black</summary>
<a href="http://powerhawks.org/wp-content/uploads/2014/08/arial-black.ttf"><img src="http://powerhawks.org/wp-content/uploads/2014/08/arial-black.png" class="fontimg"></a>
</details><!--arial black-->
</details><!--display font-->
</details><!--fonts-->
<!--color palette--><details class="indent1"><summary>Color Palette</summary>
<div id="wrapper">
<p class="palette" style="background-color:#4169E1;">Power Hawk Blue<br> Hex: 4169E1 <br> RGB: R: 65, G: 105, B: 225 <br> CMYK: C: 71, M: 53, Y: 0, K: 12 <br> Pantone: #281 C</p>
<p class="palette-light" style="background-color:#FFFFFF;">White<br>Hex:FFFFFF<br>RGB: R: 255, G: 255, B: 255<br>CMYK: C: 0, M: 0, Y: 0, K: 0<br>Pantone: #9063 C</p>
<p class="palette" style="background-color:#2f3f58;">Dark Blue<br>Hex: 2f3f58<br>RGB: R: 47, G: 63, B: 88<br>CMYK: C: 47, M: 28, Y: 0, K: 65<br>Pantone: #534 C</p>
<p class="palette-light" style="background-color:#9eb0c9;">Slate Blue<br>Hex: 9eb0c9<br>RGB: R: 158, G: 176, B: 201<br>CMYK: C: 21, M: 12, Y: 0, K: 21<br>Pantone: #536 C</p>
<p class="palette" style="background-color:#c74f4f;">Power Hawk Red<br>Hex: c74f4f<br>RGB: R: 199, G: 79, B: 79<br>CMYK: C: 0, M: 60, Y: 60, K: 22<br>Pantone: #7418 C</p>
<p class="palette-light" style="background-color:#f0ebe7;">Cool Gray<br>Hex: f0ebe7<br>RGB: R: 240, G: 235, B: 231<br>CMYK: C: 0, M: 2, Y: 4, K: 6<br>Pantone: #1 C</p>
<p class="palette" style="background-color:#000000;">Black<br>Hex: 000000<br>RGB: R: 0, G: 0, B: 0<br>CMYK: C: 0, M: 0, Y: 0, K: 100<br>Pantone: #6 C</p>
</div>
</details><!--color palette-->
</details><!--vis med-->
<!--other resources--><details style="float: left;"><summary>Other Resources</summary>
<a href="https://www.flickr.com/photos/114070590@N03/" alt="Flickr">Flickr</a>
<a href="http://www.powerhawks.org/scouting/" alt="Scouting">Scouting</a>
<a href="https://www.usfirst.org" alt="FIRST">FIRST</a>
</details><!--other resources-->
</div>
这是习俗 CSS
#wrapper{overflow:hidden; height:auto;} /*for the div on color palette to auto height properly*/
0 .indent1{边距-左:25px;右边距：自动；}
.indent2{margin-left:50px; margin-right:auto;}
.indent3{margin-left:70px; margin-right:auto;}
.palette-light{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
font-color:white;
color:black;}
.palette{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
font-color:white;
color:white;}
/*overrides*/
summary{font-size:20px;}
/*font*/
h1,h2,h3,summary{font-family:serpentine;}
h4,h5,h6{font-family:helvetica;}
body{font-size:200%;}
@font-face {
font-family: 'serpentine';
src: url('fonts/SerpentineStd-Bold.eot');
src: url('fonts/SerpentineStd-Bold.otf') format('opentype'),
url('fonts/SerpentineStd-Bold.woff') format('woff'),
url('fonts/SerpentineStd-Bold.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'helvetica';
src: url('fonts/Helvetica.eot');
src: url('fonts/Helvetica.otf') format('opentype'),
url('fonts/Helvetica.woff') format('woff'),
url('fonts/Helvetica.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
主题css中关于细节的唯一代码是
{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
和
{ list-style: none; }
在 fire bug 中，我看到每个 div 下面都有空段落和 br。只需删除它。
<p><!--document templates--></p>
<p><!--visual media--><br>
</p><details>
我通过安装 Preserved HTML Editor Markup Plus 插件解决了这个问题，它使 HTML 按预期工作。作为副作用，一些在 Wordpress 可视化编辑器中制作的页面被损坏。