主页 / user-326850

Flandered's questions

Martin Hope
Flandered
Asked: 2020-05-18 23:15:32 +0800 CST
  • 0

问题是我无法垂直对齐第一个Logo元素。已经尝试应用属性vertical-align, lign-height，但都没有成功。我会感谢任何可以帮助我解决这个问题的人。

body {
  margin: 0;
  padding: 0;
  height: 10000px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  background-color: #0D0D0D;
}

header {
  height: 86px;
  width: 100%;
  background-color: #262626;
}

.HeadInfo {
  text-align: center;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.Logo {
  height: 86px;
}

.Logo>#LogoLink {
  display: block;
  margin-left: 40px;
  width: 76px;
  height: 76px;
  background-image: url(https://avatars.mds.yandex.net/get-pdb/1689173/fdc7c8e4-0329-4d04-bfcb-d34e53e740bd/s1200?webp=false);
  background-repeat: no-repeat;
  background-size: contain;
}
HTML код:

<header>
  <div class="HeadInfo">

    <div class="Logo">
      <a href="#" id="LogoLink"></a>
    </div>

    .....Остальной код шапки....

  </div>
</header>

红色矩形不是边框。我在编辑屏幕截图时添加了它，以便您可以更好地看到标题。

帽子

html
Martin Hope
Flandered
Asked: 2020-05-07 20:04:50 +0800 CST
  • 0

我想将所有现有的文本元素放在背景中，以便它们具有响应性，就像背景本身一样。我决定使用背景（背景图像）而不是图像，以便所有文本元素都在背景内，并且当网站宽度调整大小或缩放时，一切都保持原位（完全自适应的背景可以调整到任何大小，当网站被调整大小时，文本不会移动到任何地方并保持其大小，同时位于背景中。

以下是任何网站大小的外观： 在此处输入图像描述

在这里，我使用了图像，而不是背景。我将文本元素设置为位置：absolute 如果您不更改站点的宽度或比例，一切看起来都很好因此，例如，如果更改比例，结果是 在此处输入图像描述 这里，比例是 50%。一切顺利*****

很长时间以来我一直在摸索如何适应这一切。我将非常感谢并感谢您的回答！

HTML 代码：

<main> 
        <div class="Block_image"><div class="FLRBK2_img">
        <h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>

        <div class="ReadMore">
            <p>Read More</p>
            <div id="RArrow" style="background-image: url(../Images/Adidas/right_arrow.png);"></div>
        </div> 

        <div class="AboutRBK">
            <p id="NameFlorens">Florens RBK <span>2</span></p>
            <p id="Property">New comfortable material for new wins</p>
            <button id="Buy"><p>By Now</p></button>
        </div>
    </div> 
</div> 
</main>

CSS 代码：

.Block_image {
  margin-top: 8px;
  margin-right: 40px;
  margin-left: 40px;
  text-align: center;
  position: relative;
}

.FLRBK2_img {
  background-image: url(../Images/Adidas/Florens_RBK2.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 100%;
}

.MainText span {
  text-transform: uppercase;
  position: absolute;
  float: left;
  top: 130px;
  left: 240px;
  text-align: left;
  width: 100%;
  font-family: "Anton", cursive;
  font-size: 4.79vw;
  color: rgba(14, 14, 14, 0.7);
  text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
}

.ReadMore {
  position: absolute;
}

.ReadMore #RArrow {
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  text-align: center;
}

.ReadMore {
  left: 78%;
  top: 146px;
}

.ReadMore p {
  display: inline-block;
  font-family: "PT Sans Caption";
  font-style: normal;
  font-weight: bold;
  font-size: 1.45vw;
  color: #000000;
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25);
}

.ReadMore p:hover {
  cursor: pointer;
  text-decoration: underline;
}

.ReadMore p:active {
  color: white;
  opacity: 0.8;
}

.AboutRBK {
  left: 70%;
  top: 650px;
  position: absolute;
  text-align: center;
}

.AboutRBK #NameFlorens {
  font-family: Anton;
  font-size: 64px;
  line-height: 94px;
  color: white;
  text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
  right: 50px;
}

#Property {
  margin-top: 5px;
  font-family: "PT Sans Caption";
  font-weight: bold;
  font-size: 18px;
  color: #FFFFFF;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

#Buy {
  margin-top: 20px;
  border: none;
  width: 165px;
  height: 60px;
  background: #FFFFFF;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

#Buy p {
  font-family: "Anton";
  font-size: 28px;
  color: #000000;
}

#Buy:hover {
  text-decoration: underline;
}

#Buy:active {
  background-color: black;
}

#Buy p:active {
  color: white;
}
html
Martin Hope
Flandered
Asked: 2020-05-05 16:43:57 +0800 CST
  • 0

当站点的宽度减小时，铭文向左滑动，铭文的大小保持不变。这是它在移动设备上的外观（图片1）

在 1500 像素及以上的宽度下，一切都显示得很好。有没有办法在图像中添加铭文并使其具有响应性？这样它就不会在任何地方移动并在宽度根据图片变化时减小。还是有其他方法可以使其在小型设备上灵活使用？

图片1

这就是标题的显示方式

图.2

HTML：

<main>
    <div class="FLRBK2_img"><img src="Images/Adidas/Florens_RBK2.jpg"></div>
    <h1 class="MainText"><span>Always Be <br> Powerfull <br> for new <br> wins</span> </h1>

SCSS：

.FLRBK2_img {
    margin-top: 8px;
    text-align: center;
    position: relative;
}

.FLRBK2_img img {
    max-width: 100%;
}

.MainText {
    span {
        position: absolute;
        top: 130px;
        right: 550px;
        text-align: center;
        width: 100%;
        font-family: "Anton", cursive;
        font-size: 92px;
        color: rgba(14, 14, 14, 0.7);
        text-shadow: 1px 4px 6px rgba(0, 0, 0, 0.35);
    }
}
html