Question

我正在为我的体育俱乐部制作一个篮球网站。我正在尝试制作一张照片旋转木马，旁边有一个信息部分。这是我制作的以下代码，但我不知道如何设置它（使用CSS），使它看起来像它应该是什么。

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="slider-area">
    <div class="main cf">
      <div class="owl-carousel eql-height owl-theme" id="sync1" style="opacity: 1; display: block; height: 369px;">
        <div class="owl-wrapper-outer">
          <div class="owl-wrapper" style="width: 7480px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-1496px, 0px, 0px);">
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/" title="Werribee referees add to the trophy case">Werribee referees add to the trophy case</a></h3>
                  <p><span>Werribee Basketball’s referees have taken out three major awards at the Technical Officials Commission’s (formerly VBRA) annual awards in May.</span></p><a class="Read-more" href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/"
                    title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/1.jpg')">
                  <a href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/" title="Werribee referees add to the trophy case"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Franky’s A1 Car Sales our new sponsor">Franky’s A1 Car Sales our new sponsor</a></h3>
                  <p>Werribee Basketball is pleased to announced our latest sponsor to sign on in support of the club, Franky’s A1 Car Sales.</p><a class="Read-more" href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/frankys-digital-2.jpg')">
                  <a href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Franky’s A1 Car Sales our new sponsor"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Werribee Basketball’s Gala Dinner in July">Werribee Basketball’s Gala Dinner in July</a></h3>
                  <p>You’re invited to Werribee Basketball’s night of nights!</p><a class="Read-more" href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Gala-Dinner_WEB.jpg')">
                  <a href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Werribee Basketball’s Gala Dinner in July"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/potter-has-the-magic-touch/" title="Potter has the magic touch">Potter has the magic touch</a></h3>
                  <p><span>You may notice Werribee Basketball’s Player and Coach Development Manager Reece Potter walking around Eagle Stadium with a big smile on his face this week – and it’s with good reason!</span></p><a class="Read-more" href="http://werribeebasketball.com/potter-has-the-magic-touch/"
                    title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/05/Web.jpg')">
                  <a href="http://werribeebasketball.com/potter-has-the-magic-touch/" title="Potter has the magic touch"></a>
                </div>
              </div>
            </div>
            <div class="owl-item" style="width: 748px;">
              <div class="item">
                <div class="slider-caption">
                  <h3><a href="http://werribeebasketball.com/court-announcer-wanted/" title="Court announcer wanted!">Court announcer wanted!</a></h3>
                  <p>Werribee Basketball is looking for a court announcer for our Big V home games at Eagle Stadium.</p><a class="Read-more" href="http://werribeebasketball.com/court-announcer-wanted/" title="Read More">Read More</a>
                </div>
                <div class="slider-img" style="background-image:url('http://werribeebasketball.com/wp-content/uploads/2018/04/Court-announcer.jpg')">
                  <a href="http://werribeebasketball.com/court-announcer-wanted/" title="Court announcer wanted!"></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="owl-controls">
          <div class="owl-buttons">
            <div class="owl-prev">
              <i class="fa fa-chevron-left"></i>
            </div>
            <div class="owl-next">
              <i class="fa fa-chevron-right"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="owl-carousel eql-height owl-theme" id="sync2" style="opacity: 1; display: block; height: 369px;">
        <div class="owl-wrapper-outer">
          <div class="owl-wrapper" style="width: 2490px; left: 0px; display: block; transition: all 800ms ease; transform: translate3d(-498px, 0px, 0px);">
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/werribee-referees-add-to-the-trophy-case/" title="Werribee referees add to the trophy case">Werribee referees add to th...</a>
              </div>
            </div>
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/frankys-a1-car-sales-our-new-sponsor/" title="Franky’s A1 Car Sales our new sponsor">Franky’s A1 Car Sales...</a>
              </div>
            </div>
            <div class="owl-item synced" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/werribee-basketballs-gala-dinner-in-july/" title="Werribee Basketball’s Gala Dinner in July">Werribee Basketball’s...</a>
              </div>
            </div>
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/potter-has-the-magic-touch/" title="Potter has the magic touch">Potter has the magic touch</a>
              </div>
            </div>
            <div class="owl-item" style="width: 249px;">
              <div class="item">
                <a href="http://werribeebasketball.com/court-announcer-wanted/" title="Court announcer wanted!">Court announcer wanted!</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

这应该是它应该看起来的样子，或它看起来应该是什么样的近似值。

Answer 1

使用bootstrap Carousel为您的篮球网站

Click Here

Answer 2

以下是代码：

＆＃13;

<html>
<head></head>
<body>
    <div class="col">
        <form action="#" method="post">
            <select id="periodname" class="drpdwn" value=" " onchange='myFunction()'>
                <?php foreach($period as $period): ?> 
                    <option><?= $period['period']; ?></option>
                <?php endforeach; ?>
            </select>
        </form>
    </div>
    <div class="col" style="width:200px">
        <form action="myprofile.php" method="post" name='periodGet' id='periodGet'>
            <input name='periodText' autocomplete="off" value="Period">
            <input type="submit" value="Go">
        </form>
    </div>
</body>
</html>

＆＃13;

如何在html中创建带侧边栏的轮播？

2 个答案: