Html 加号周围的元素_Html_Css

Html 加号周围的元素

html css

Html 加号周围的元素,html,css,Html,Css,我无法实现屏幕截图中的这个块。问题的实质是，在加号的中心和它的图片或块周围，所有这些都应该在所有屏幕上正常工作。如果您能帮助实施，我将不胜感激。中心块{ 位置：相对位置；宽度：100%； &：之前{ 位置：绝对位置；内容：''；宽度：128px；高度：1px；背景：#86b4d0；顶部：180像素；左：100px；变换：旋转（90度）； } &：之后{ 位置：绝对位置；内容：''；宽度：128px；高度：1px；背景：#86b4d0；顶部：160px；左：100p

我无法实现屏幕截图中的这个块。问题的实质是，在加号的中心和它的图片或块周围，所有这些都应该在所有屏幕上正常工作。如果您能帮助实施，我将不胜感激

。中心块{
位置：相对位置；
宽度：100%；
&：之前{
位置：绝对位置；
内容：''；
宽度：128px；
高度：1px；
背景：#86b4d0；
顶部：180像素；
左：100px；
变换：旋转（90度）；
}
&：之后{
位置：绝对位置；
内容：''；
宽度：128px；
高度：1px；
背景：#86b4d0；
顶部：160px；
左：100px；
}
&__项目{
边缘底部：20px；
&：最后一个孩子{
页边距底部：0；
}
a:不是（最后一个孩子）{
右边距：40px；
}
}
}

HTML

试试这个

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    * {
    box-sizing: border-box;
}
.center-block {
    position: relative;
    width: 100%;
    max-width: 425px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 5px #808080;
}
.center-block:before {
    position: absolute;
    content: '';
    width: 128px;
    height: 1px;
    background: #86b4d0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 128px;
    background: #86b4d0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block__items {
  margin-bottom: 20px;
}
.center-block__items:last-child {
  margin-bottom: 0;
}
.center-block__items a:not(:last-child) {
  margin-right: 40px;
}

    </style>
</head>
<body>

<div class="center-block">
<div class="center-block__items">
<a href="#">
  <img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
  <a href="#">
    <img src="https://via.placeholder.com/150C/" alt=""></a>
  <a href="#">
<img src="https://via.placeholder.com/150C/" alt="">
  </a>
</div>
</div>


</body>


</html>


试验
* {
框大小：边框框；
}
.中央大厦{
位置：相对位置；
宽度：100%；
最大宽度：425px；
保证金：0自动；
填充：40px；
边界半径：5px；
盒影：0 0 5px#808080；
}
.中心区：前{
位置：绝对位置；
内容：''；
宽度：128px；
高度：1px；
背景：#86b4d0；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.中心街区：之后{
位置：绝对位置；
内容：''；
宽度：1px；
高度：128px；
背景：#86b4d0；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.中心块项目{
边缘底部：20px；
}
.中间块项目：最后一个子项{
页边距底部：0；
}
.center-block_uu项目a:非（：最后一个子项）{
右边距：40px；
}

确保可以使用进一步的变换来获得正确的旋转，但是。。。尝试避免在“之前/之后”上进行变换，只需使用calc计算尺寸

请参阅代码片段：

。中心块{
位置：相对位置；
宽度：100%；
文本对齐：居中；
}
.中心区：前{
位置：绝对位置；
内容：''；
高度：1px；
背景：#86b4d0；
顶部：计算值（50%-1px）；
左：计算（50%-64px）；
右：计算（50%-64px）；
}
.中心街区：之后{
位置：绝对位置；
内容：''；
宽度：1px；
背景：#86b4d0；
顶部：calc（50%-64px）；
底部：钙（50%-64px）；
左：计算（50%-1px）；
}
.中心块项目{
边缘底部：20px；
}
.中间块项目：最后一个子项{
页边距底部：0；
}
.center-block_uu项目a:非（：最后一个子项）{
右边距：40px；
}

请在此处发布您的代码。请注意，发布的代码不是有效的CSS；它可能是更少或更少的SCSS代码。请发布呈现的CSS代码。解释代码的答案比那些只说“试试这个”和一堆代码的答案更容易上浮。更好的方法是让其他人不必复制和粘贴就可以看到正在运行的代码。感谢@HereticMonkey的建议：）解释代码的答案比那些只说“试试这个”和一堆代码的答案更容易上浮。更好的方法是使用它，让其他人看到正在运行的代码，而不必复制和粘贴它。

    .center-block{
    position: relative;
    width: 100%;
    &:before{
      position: absolute;
      content: '';
      width: 128px;
      height: 1px;
      background: #86b4d0;
      top: 180px;
      left: 100px;
      transform: rotate(90deg);
    }
    &:after{
      position: absolute;
      content: '';
      width: 128px;
      height: 1px;
      background: #86b4d0;
      top: 160px;
      left: 100px;
    }
    &__items{
      margin-bottom: 20px;
      &:last-child{
        margin-bottom: 0;
      }
      a:not(:last-child){
        margin-right: 40px;
      }
    }
  }

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    * {
    box-sizing: border-box;
}
.center-block {
    position: relative;
    width: 100%;
    max-width: 425px;
    margin: 0 auto;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 0 5px #808080;
}
.center-block:before {
    position: absolute;
    content: '';
    width: 128px;
    height: 1px;
    background: #86b4d0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 128px;
    background: #86b4d0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.center-block__items {
  margin-bottom: 20px;
}
.center-block__items:last-child {
  margin-bottom: 0;
}
.center-block__items a:not(:last-child) {
  margin-right: 40px;
}

    </style>
</head>
<body>

<div class="center-block">
<div class="center-block__items">
<a href="#">
  <img src="https://via.placeholder.com/150C/" alt=""></a>
<a href="#"><img src="https://via.placeholder.com/150C/" alt=""></a>
</div>
<div class="center-block__items">
  <a href="#">
    <img src="https://via.placeholder.com/150C/" alt=""></a>
  <a href="#">
<img src="https://via.placeholder.com/150C/" alt="">
  </a>
</div>
</div>


</body>


</html>