0

Web サイトのページの 1 つの部分だけをスタイルしたいと考えています。最終結果は、角が丸いボックスです。

基本的な「テスト」テキスト エディターでコードを使用すると、美しく動作します。

ただし、自分のサイトのページに配置すると、スタイルを設定したい 1 つの部分だけではなく、ページ全体がスタイル設定されます。

私は以前、ブラウザのサポートがないことを知るためだけに<style scoped>（すべてがタグでラップされた）答えを見つけたと思っていました。<div>ブラウザのサポートの問題を修正した可能性のあるプラグインにたどり着きましたが、ロードされないため使用できません。

もしお役に立てれば、これはWordpressのサイトです。また、functions.php で wpautop を無効にする必要がありました。それを行う前は、すべてのスタイリングを<p>タグでラップしていましたが、そこには入れていませんでした。

私が得たもう 1 つの一般的な結果は、下部の「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名前または setidのいずれかを使用する必要があります。何かのようなもの：

.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 に答える