html - Joomla 中的 HTML 部分弄乱了网站的其他部分

Question

在 Nix 的帮助下，我有一个部分想放在 Joomla 页面上。问题是，当我放入该部分时，它会弄乱整个网站，即使代码在 Joomla 的编辑器中，并且没有连接到网站的其余部分。知道为什么吗？部分代码可以在这里找到：

http://jsfiddle.net/GRf9v/222/

<section>
<style type="text/css">
section {
background: #A8DBFF;
border-radius: 4px;
width: 275px; height: 300px;
margin:5px;
padding: 10px;
border: solid 1px #E0E0E0;
float: left;
position: relative;
display: inline;
}
div {
background: #fff;
border: solid 1px #E0E0E0;
border-radius: 4px;
margin-left: -15px;
padding:5px;
} 

o { 
background: orange; 
margin-left: 15px;
border-radius: 2px;
color: white;
font-weight: bold;
}

ul { list-style: disc; margin: 5px 0; padding: 0 15px; }​
</style>
<div>
    <o>Resultater&nbsp</o>&nbspmed mennesker
</div>
<ul>
    <li>Banan</li>
    <li>Jordbær</li>
    <li>Æble</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nibh, tincidunt id         vulputate quis, feugiat venenatis eros. Aliquam turpis ibh</p>
</section>​

Answer 1

这仍然会影响整个页面的 CSS。尝试放入ID您的部分并编辑您的CSS：

<section id="my_section">
<style type="text/css">

#my_section {
background: #A8DBFF;
border-radius: 4px;
width: 275px; height: 300px;
margin:5px;
padding: 10px;
border: solid 1px #E0E0E0;
float: left;
position: relative;
display: inline;
}
#my_section div {
background: #fff;
border: solid 1px #E0E0E0;
border-radius: 4px;
margin-left: -15px;
padding:5px;
} 

#my_section o { 
background: orange; 
margin-left: 15px;
border-radius: 2px;
color: white;
font-weight: bold;
}

Answer 2

您可以简单地将class或添加id到您的部分以使其具体如下：

HTML：

<section class="section"></section>

CSS：

.section {

}
.section div {

} 
.section o { 

}
.section ul {

}