0

我希望在我的网站上只设计页面的 1 部分。最终结果是一个圆角的盒子。

当我在基本的“测试”文本编辑器中使用代码时，它运行良好。

但是，当我将它放在我网站的页面上时，它会设置整个页面的样式，而不是我希望它设置样式的仅 1 部分。

我以前以为我找到了答案<style scoped>（所有内容都包含在<div>标签中）只是为了得知没有浏览器支持。我被引导到一个插件，它可能已经纠正了浏览器支持问题，只是它不会加载，所以我不能使用它。

如果有帮助，这是一个 Wordpress 网站。我还必须在我的functions.php 中禁用wpautop。在我这样做之前，它将所有样式包装在<p>我没有放在那里的标签中。

我得到的另一个常见结果是底部的“ul”片段和那些“ul”片段的文本将显示，但没有任何样式。

我也确实尝试将整个东西包装在<div>标签中，但这也不起作用。

如果您需要更多信息，请告诉我。

否则，提前感谢您的任何想法！

如果它有用，这是代码（返回<style type="text/css">而不是作用域）：

<style type="text/css">
UL {
border-radius: 20px/20px;
-webkit-border-radius: 20px/20px;
-moz-border-radius: 20px/20px;
-ms-border-radius: 20px/20px;
-o-border-radius: 20px/20px;
 height: 150px;
 width: 500px;
    background: #7220c9;
    margin: 12px 12px 12px 12px;
    padding: 5px 5px 5px 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
                                          /* No borders set */
  }
  LI {
    color: black;                /* text color is black */
    font-family: Arial;
    font-size: 14px;
    background: white;           /* Content, padding will be white */
    border-radius: 20px/20px;
    -webkit-border-radius: 20px/20px;
    -moz-border-radius: 20px/20px;
    -ms-border-radius: 20px/20px;
    -o-border-radius: 20px/20px;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
    list-style: none             /* no glyphs before a list item */
                                          /* No borders set */
  }
  LI.withborder {
    border-radius: 20px/20px;
    -webkit-border-radius: 20px/20px;
    -moz-border-radius: 20px/20px;
    -ms-border-radius: 20px/20px;
    -o-border-radius: 20px/20px;
    border-style: none;
    border-width: medium;        /* sets border width on all sides */
    border-color: #27d130;
  }
</STYLE>

<UL>
  <LI><b><center>Here is some text.</center></b>
  <LI class="withborder">This is some additional text.</a>.
</UL>
4

2 回答 2

0

您已将样式设置为包含页面中的每个 UL 和 LI 标记。要使其仅特定于某些部分，您应该为它们使用class名称或 set ids。就像是：

.ul UL {
    /* style here */
}

HTML：

<ul class="ul">  <!-- only this particular UL will be affected -->

我看到你已经在你的<li>标签中使用了它withborder，你也需要对<ul>标签做同样的事情。

于 2013-07-20T01:20:13.033 回答
0 
be sure to end your lines
<li><b><center>Here is some text.</center></b></li>

只要没有其他无序列表就可以了。否则，您将必须创建一个单独的类，该类是所有其他无序列表的标准无格式类。经过

UL {
border-radius: 20px/20px;
-webkit-border-radius: 20px/20px;
-moz-border-radius: 20px/20px;
-ms-border-radius: 20px/20px;
-o-border-radius: 20px/20px;
height: 150px;
width: 500px;
background: #7220c9;
margin: 12px 12px 12px 12px;
padding: 5px 5px 5px 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.9);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.9);

您正在有效地设置页面上每个无序列表的样式。确保通过类为所有无序列表创建一种描述形式。

于 2013-07-20T01:33:41.370 回答