Question

有人可以帮忙吗？谢谢！

谢谢大家。这是我到目前为止所得到的。我试图把它们放在带有圆形边框的单独盒子里。标题的不同背景颜色（足球，棒球，垒球）我想为标题制作标签。

<div class="jive-html-text-widget">
   <style type="text/css">
      .third {float:left; width:32%; margin-left:1%;}
      .third:first-child {margin-left:0;}
      .third h2 {font-family: "consolas"; color:#762432; margin-bottom:12px;}
      .third p {font-family: "consolas"; color:#2B547E; margin-bottom:12px;}
      .third ul {margin:0 0 22px 30px;}
      .third ul li {margin-bottom:8px;}
      .third li {font-family: "consolas"; color:#2B547E}
   </style>
   <div class="jive-html-text-widget">
      <div class="jive-html-text-widget">
         <hr/>
         <div class="third">
            <h2>Baseball</h2>
            <ul class="noindent">
               <li>a ball game played between two teams of nine on a field with a diamond-shaped circuit of four bases. It is played chiefly in the US, Canada, Latin America, and East Asia.</li>
            </ul>
         </div>
         <div class="third">
            <h2>Soccer</h2>
            <ul class="noindent">
               <li>a game played by two teams of eleven players with a round ball that may not be touched with the hands or arms during play except by the goalkeepers. The object of the game is to score goals by kicking or heading the ball into the opponents' goal.</li>
            </ul>
         </div>
         <div class="third">
            <h2>Basketball</h2>
            <ul class="noindent">
               <li>Originally invented in the movie BASEketball, starring South Park creators Trey Parker and Matt Stone, BASEketball has evolved from a fictional game to a popular real-life sport![1] It might have started as a joke, but BASEketball has rules just like the sports it started from.</li>
            </ul>
         </div>
      </div>
   </div>
</div>

Answer 1

嗨，请查看此https://plnkr.co/edit/kAEDONthQYYgB54Sc7Tz?p=preview以获取参考资料

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">

   <div class="column-left">Column left The border-left shorthand property sets all the left border properties in one declaration.The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.</div>
   <div class="column-center">Column centerThe border-left shorthand property sets all the left border properties in one declaration.The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.</div>
   <div class="column-right">Column right</div>
</div>
  </body>

</html>

和CSS

.container {
    width: 100%
}
.container div {
    height: 300px;
}
.column-left {
    left: 0;
    width: 30%;
    background: #00F;
    float: left;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    border: 1px solid red;
}
.column-center {
    width: 30%;
    background: #933;
    float: left;
    margin-left: 20px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    border: 1px solid red;
}
.column-right {
    width: 30%;
    right: 0;
    background: #999;
    float: left;
    margin-left: 20px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    border: 1px solid red;
}

HTML / CSS使用边框着色创建三列

1 个答案: