Question

以下是我的代码，我正在尝试制作类似于的内容我的代码如下：

＆＃13;

 .service-box {
        background: #fff;
        margin: 0 -5px 20px;    ;  
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        padding: 50px 30px;
        -webkit-transition: background 0.5s;
        -o-transition: background 0.5s;
        transition: background 0.5s;
    
    }
    
    
    .service-box:hover {
      background: #84a499;
      color: #fff;
    }
    
    .service-box:hover .btn-primary {
      background: #fff;
      color: #222121 !important;
    }
    .service-box:hover .icon-rounded {
      background: #688d80;
    }
    
    .service-box .service-title {
      padding: 30px 0 22px 0;
      margin: 0;
      font-weight: 300;
    }
    
    .service-box .service-title a{
        color: #222121;
    }
    
    .service-box:hover .service-title a {
      color: #fff;
    }
    
    .service-box .btn{
        margin-top: 10px;
    }
    
    .service-box .btn .fa{
        margin-left: 5px;
    }
    
    .service-box .icon-rounded{
        width: 80px;
        height: 80px;
        border: 1px dashed #e1e1e1;
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 80px;
    }
    
    .service-box .icon-rounded:before{
        font-size: 50px;
        margin-left: 0;
    }

＆＃13;

我的输出看起来像

我试图让我的第二张图片看起来像第一张，我已经复制了所有必需的代码，我不知道该怎么办，我现在被困了几个小时。请让我知道我该怎么办。我试图制作的是顶部的图像，然后是底部的标题和描述，以及在单独的矩形中读取更多选项。

谢谢

Answer 1

在每个框的div内，您应该包含圆形图像的div。此图像应具有类似于以下内容的CSS样式：

.anyClassNameOfYourChoice {
display: block;
margin: 20px auto 20px;
height: 20px;
width: 20px;
border-radius: 50px;
}

您需要定义图像的内容，这可以使用CSS或HTML来完成。如果您想要示例中显示的内容，请使用以下内容：

border: 1px dotted #cecece;

在仅使第二个框看起来像示例中的那个框时，您将要么直接应用该框专用的类，要么使用CSS中的第n个子框仅将某些CSS应用于第二个元素父容器。无论您选择做什么，您都希望包含以下样式：

background-color: #008080

请注意，上述颜色只是示例中相同范围内的示例，但可能不是100％准确。

Answer 2

使用带引导网格系统的嵌套行，根据您的要求将col分成n部分

<div class="col-md-4 col-sm-4 col-xs-16 col-4" style="margin-bottom: 100px; margin-top: 100px">
    <div class="row">
      <div class="col-12">
        <div id="image" class="text-center m-6">
          <img src="https://www.thefamouspeople.com/profiles/images/a-p-j-abdul-kalam-2.jpg" class="rounded-circle img-thumbnail" alt="image" width="200px" height="200px"/>
        </div>
      </div>
      <div class="col-12">
        <div class="service-box">
      <span class="icon-rounded flaticon-business70"></span>

      <h2 class="service-title"><a href="services-single.html">Information Design</a></h2>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit sed rhoncus ex condimentum. Donec placerat nunc ut porttitor blandit. Duis ex nisi, tristique nec nullaf non.</p>

      <a class="btn btn-primary" href="services-single.html">Read More <i class="fa fa-long-arrow-right"></i></a>
    </div>
      </div>

    </div>

  </div>

以下是仅适用于一个col https://codepen.io/IamMonikaPatel/pen/VdrQry

的工作演示的链接

在容器顶部添加图像

2 个答案: