Question

我正在制作表格幻灯片，工作正常。如你所见，如果我点击这些点，它将打开另一个表格。点击这些点后，我已经改变了从上到下的过渡，这里是codepen link。

在我上面的代码链接中，我的点变得非常小。检查我原来的codepen link。在这个我的点很大，也适当间隔。我想让我的圆点像那样。我的拳头码链接有什么问题，如何让点更大。

以下是我的代码：

<html>
<head>
  <meta charset="utf-8">
  <title>SlidesJS Standard Code Example</title>
  <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
  <meta name="author" content="Nathan Searles">
  <meta name="viewport" content="width=device-width">

</head>
<body>
<div class="topnav">
   <img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
   <nav>
      <ul>
         <li class="dropdown">
            <a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-content">
               <li><a href="#"><i>INDIVIDUAL</i></a>
               </li>
               <li><a href="#"><i>CORPORATE</i></a>
               </li>
            </ul>
         </li>
         <li class="our-story">OUR STORY</li>
         <li class="login-signup">Log In | Sign up</li>
         <li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
         </li>
      </ul>
   </nav>
</div>  
  <div class="container">
   <h3>INSURANCE FORM</h3>
   <h4><i>BASIC DETAILS</i></h4>
   <br>    
    <div id="slides" class="container-fluid" >
        <form action="/action_page.php" class="form-horizontal">
            <div class="form-group">
               <div class="col-sm-6">
                  <label>FIRST NAME</label>
                  <input type="text" class="form-control" name="fname" value="Mickey 1">
               </div>
               <div class="col-sm-6">
                  <label>LAST NAME</label>
                  <input type="text" class="form-control" name="lname" value="Mouse">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>EMAIL</label>
                  <input type="text" class="form-control" name="email" value="abc@host.com">
               </div>
               <div class="col-sm-6">
                  <label>PHONE NUMBER</label>
                  <input type="text" class="form-control" name="number" value="123-456-789">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>COUNTRY</label>
                  <select name="country" class="form-control">
                     <option value="canada">Canada</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>PROVINCE</label>
                  <select name="province" class="form-control">
                     <option value="ontario">ONTARIO</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>CITY</label>
                  <select name="city" class="form-control">
                     <option value="ottawa">OTTAWA</option>
                  </select>
               </div>
            </div>
         </form>
        <form action="/action_page.php" class="form-horizontal">
            <div class="form-group">
               <div class="col-sm-6">
                  <label>FIRST NAME</label>
                  <input type="text" class="form-control" name="fname" value="Mickey 2">
               </div>
               <div class="col-sm-6">
                  <label>LAST NAME</label>
                  <input type="text" class="form-control" name="lname" value="Mouse">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>EMAIL</label>
                  <input type="text" class="form-control" name="email" value="abc@host.com">
               </div>
               <div class="col-sm-6">
                  <label>PHONE NUMBER</label>
                  <input type="text" class="form-control" name="number" value="123-456-789">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>COUNTRY</label>
                  <select name="country" class="form-control">
                     <option value="canada">Canada</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>PROVINCE</label>
                  <select name="province" class="form-control">
                     <option value="ontario">ONTARIO</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>CITY</label>
                  <select name="city" class="form-control">
                     <option value="ottawa">OTTAWA</option>
                  </select>
               </div>
            </div>
         </form>
        <form action="/action_page.php" class="form-horizontal">
            <div class="form-group">
               <div class="col-sm-6">
                  <label>FIRST NAME</label>
                  <input type="text" class="form-control" name="fname" value="Mickey 2">
               </div>
               <div class="col-sm-6">
                  <label>LAST NAME</label>
                  <input type="text" class="form-control" name="lname" value="Mouse">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>EMAIL</label>
                  <input type="text" class="form-control" name="email" value="abc@host.com">
               </div>
               <div class="col-sm-6">
                  <label>PHONE NUMBER</label>
                  <input type="text" class="form-control" name="number" value="123-456-789">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>COUNTRY</label>
                  <select name="country" class="form-control">
                     <option value="canada">Canada</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>PROVINCE</label>
                  <select name="province" class="form-control">
                     <option value="ontario">ONTARIO</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>CITY</label>
                  <select name="city" class="form-control">
                     <option value="ottawa">OTTAWA</option>
                  </select>
               </div>
            </div>
         </form>
        <form action="/action_page.php" class="form-horizontal">
            <div class="form-group">
               <div class="col-sm-6">
                  <label>FIRST NAME</label>
                  <input type="text" class="form-control" name="fname" value="Mickey 2">
               </div>
               <div class="col-sm-6">
                  <label>LAST NAME</label>
                  <input type="text" class="form-control" name="lname" value="Mouse">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>EMAIL</label>
                  <input type="text" class="form-control" name="email" value="abc@host.com">
               </div>
               <div class="col-sm-6">
                  <label>PHONE NUMBER</label>
                  <input type="text" class="form-control" name="number" value="123-456-789">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>COUNTRY</label>
                  <select name="country" class="form-control">
                     <option value="canada">Canada</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>PROVINCE</label>
                  <select name="province" class="form-control">
                     <option value="ontario">ONTARIO</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>CITY</label>
                  <select name="city" class="form-control">
                     <option value="ottawa">OTTAWA</option>
                  </select>
               </div>
            </div>
         </form>
        <form action="/action_page.php" class="form-horizontal">
            <div class="form-group">
               <div class="col-sm-6">
                  <label>FIRST NAME</label>
                  <input type="text" class="form-control" name="fname" value="Mickey 2">
               </div>
               <div class="col-sm-6">
                  <label>LAST NAME</label>
                  <input type="text" class="form-control" name="lname" value="Mouse">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>EMAIL</label>
                  <input type="text" class="form-control" name="email" value="abc@host.com">
               </div>
               <div class="col-sm-6">
                  <label>PHONE NUMBER</label>
                  <input type="text" class="form-control" name="number" value="123-456-789">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>COUNTRY</label>
                  <select name="country" class="form-control">
                     <option value="canada">Canada</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>PROVINCE</label>
                  <select name="province" class="form-control">
                     <option value="ontario">ONTARIO</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>CITY</label>
                  <select name="city" class="form-control">
                     <option value="ottawa">OTTAWA</option>
                  </select>
               </div>
            </div>
         </form>
        <form action="/action_page.php" class="form-horizontal">
            <div class="form-group">
               <div class="col-sm-6">
                  <label>FIRST NAME</label>
                  <input type="text" class="form-control" name="fname" value="Mickey 2">
               </div>
               <div class="col-sm-6">
                  <label>LAST NAME</label>
                  <input type="text" class="form-control" name="lname" value="Mouse">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>EMAIL</label>
                  <input type="text" class="form-control" name="email" value="abc@host.com">
               </div>
               <div class="col-sm-6">
                  <label>PHONE NUMBER</label>
                  <input type="text" class="form-control" name="number" value="123-456-789">
               </div>
            </div>
            <div class="form-group">
               <div class="col-sm-6">
                  <label>COUNTRY</label>
                  <select name="country" class="form-control">
                     <option value="canada">Canada</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>PROVINCE</label>
                  <select name="province" class="form-control">
                     <option value="ontario">ONTARIO</option>
                  </select>
               </div>
               <div class="col-sm-3">
                  <label>CITY</label>
                  <select name="city" class="form-control">
                     <option value="ottawa">OTTAWA</option>
                  </select>
               </div>
            </div>
         </form>  
    </div>
  </div>
</body>
</html>

Answer 1

您正在使用<li>的项目符号，您可以修改font-size进行编辑，尝试：

.slick-dots li {font-size:22px;}

由于您还需要能够编辑每个项目符号之间的空间并使每个项目看起来都是空的，您可以使用：

.slick-dots li {
    font-size:22px;
    margin: -5px 0px;
    list-style-type:circle;
}

.slick-dots li.slick-active {
    color: black;
    list-style-type: initial;
}

Answer 2

这有助于您更改项目符号的大小：

<style>
li{list-style-type:none;}
li:before{content:'\00b7'; font-size:30px; line-height:24px; vertical-align:middle;}
</style>

如果我的回答对您有帮助，请投票给我1个答案！

如何在表格幻灯片中制作小点？

2 个答案: