Question

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

<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 {

}

Joomla的HTML部分弄乱了网站的其余部分

2 个答案: