Question

我正在尝试练习设计在线商店着陆页，并且从Urban Outfitters中汲取灵感。我正在尝试使橙色促销部分看上去与Urban Outfitters相同。

我尝试过辩解内容：居中和围绕空格，或者也使用填充，但是响应速度不是很好。

Codepen here。

*{
  margin: 0px;
  padding: 0px;
  border-sizing: border-box;
}

#promo{
  background-color: #F5C793;
  display: flex;
  align-items: center;
  min-height: 50px;
  justify-content: space-around;
}

.promo-link{
  color: #222;
  text-decoration-color: #222;
}

nav{
  display: flex;
  border-bottom: 0.3px solid #d3d3d3;
  min-height: 40px;
  align-items: center;
  justify-content: center;
}

.nav-links{
  display: flex;
  list-style: none;
  padding-left: 20px;
}

.nav-links li{
  padding-left: 15px;  
  padding-right: 15px;
}

nav a{
  text-decoration: none;
  color: #767676;
}

nav a:hover{
  color: #b2b2b2;
  border-bottom: 1px solid black;
}

.logo{
  color: #30336b;
  text-transform: uppercase;
  padding-left: 50px;
}

.landing-body{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display:inline;
}

.landing-page{
  display: grid;
  grid-template-columns: 49% 2% 49%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

.three-div{
  display: grid;
  grid-template-columns: 32% 2% 32% 2% 32%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

img{
  display: inline;
  opacity: 1.0;
  padding-top: 10px;
  width: 100%;
}

img:hover{
  opacity: 0.8;
}

<div id="promo">
  <p>everything you love, all in one place.</p>
  <h3 class="center">MOST ♥ LIKED </h3>
  <p><a href="#" class="promo-link">shop</a></p>
</div>

<nav>
  <div class="logo">
    <h2>Giants & Dwarfs</h2>
  </div>

  <ul class="nav-links">
    <li id="about"><a href="#">About</a></li>
    <li id="womens"><a href="#">Women's</a></li>
    <li id="mens"><a href="#">Men's</a></li>
    <li id="sale"><a href="#">Sale</a></li>
  </ul>
</nav>

<div class="landing-page">
      <a href="#"><img src="https://images.ctfassets.net/q602vtcuu3w3/7rnjSHqBEcgbtJ2pZqZarm/c32a5cbe533a8aab72aee54689ddb7e3/190617-WK3-WGW-4-Update.jpg"></a>
  <a></a>
      <a href="#"><img src="https://images.ctfassets.net/q602vtcuu3w3/6vo26Ry1p3rcvSURCYBoJH/2fdc52ccb0ee69352d8e02ff905d592a/190603-WK1-LGW-1.jpg"></a>
</div>

<div class="three-div">
  <a href="#">
    <img src="https://images.ctfassets.net/q602vtcuu3w3/7btvNrhUWJrd5UWYSRHtJr/43f9ce8f23d39c839f9b0e34991d97cc/190603-WK1-MGW-5.jpg">
  </a>
  <a></a>
  <a href="#">
    <img src="https://images.ctfassets.net/q602vtcuu3w3/5674zBs4G9hFqVyg2ceT6y/83fd495152f58a7bd12e64d68e541dcd/190617-WK3-HGW-7.jpg">
  </a>
  <a></a>
  <a href="#">
    <img src="https://images.ctfassets.net/q602vtcuu3w3/3Rz4KD78yXurQYIyqx6oyC/be018c5eeecd2df0a81471bb81177d8d/190617-WK3-WGW-7.jpg">
  </a>
</div>

<div class="exclusives">
  
</div>

试图复制this，橙色部分的顶部

Answer 1

无论如何我都不是CSS专家，但是我已经玩了一些。您是否尝试过使用以下选项？

右移：15px;
padding-left：15像素；

左边距：1％；

填充可在对象的左侧或右侧添加空间。边距增加了对象周围的空间。可以表示为像素或百分比。我经常发现百分比对于期望的输出比像素更可靠，但是同样，我也不是专家，所以可能是我自己不熟悉那里的工作。

有关更多详细信息：https://www.w3schools.com/cssref/pr_padding.asp

希望这会有所帮助-祝您编程愉快！

Answer 2

您可以在flexbox中使用边距，就像align-self一样，具有更多控制权。

#promo {
  background-color: #F5C793;
  display: flex;
  align-items: center;
  min-height: 50px;
}

.left {
  margin-left: auto;
}

.center {
  margin: 0 20px;
}

.right {
  margin-right: auto;
}

<div id="promo">
  <p class="left">everything you love, all in one place.</p>
  <h3 class="center">MOST ♥ LIKED </h3>
  <p class="right"><a href="#" class="promo-link">shop</a></p>
</div>

Answer 3

强制您的内部元素显示为嵌入式块，在中心元素上添加一些填充，然后将促销类从flex切换到block。

在下面的示例中，有2个新类（sideMe和sideMeCenter）和在促销中显示属性的mod

将类添加到包含的促销元素中，应该很好

.sideMe {
  display: inline-block;
  margin:10px
}
.sideMeCenter {
  padding: 0 40px;
}

*{
  margin: 0px;
  padding: 0px;
  border-sizing: border-box;
}

#promo{
  background-color: #F5C793;
  display: block;
  align-items: center;
  min-height: 50px;
  justify-content: space-around;
  text-align:center;
}

.promo-link{
  color: #222;
  text-decoration-color: #222;
}

nav{
  display: flex;
  border-bottom: 0.3px solid #d3d3d3;
  min-height: 40px;
  align-items: center;
  justify-content: center;
}

.nav-links{
  display: flex;
  list-style: none;
  padding-left: 20px;
}

.nav-links li{
  padding-left: 15px;  
  padding-right: 15px;
}

nav a{
  text-decoration: none;
  color: #767676;
}

nav a:hover{
  color: #b2b2b2;
  border-bottom: 1px solid black;
}

.logo{
  color: #30336b;
  text-transform: uppercase;
  padding-left: 50px;
}

.landing-body{
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display:inline;
}

.landing-page{
  display: grid;
  grid-template-columns: 49% 2% 49%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

.three-div{
  display: grid;
  grid-template-columns: 32% 2% 32% 2% 32%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

img{
  display: inline;
  opacity: 1.0;
  padding-top: 10px;
  width: 100%;
}

img:hover{
  opacity: 0.8;
}

.exclusives-title{
  padding-top: 20px;
  text-align: center;
  display: grid;
}

.exclusives-title h2{
  font-weight: 100;
  padding-bottom: 5px;
}

.exclusives{
  grid-template-columns: 14% 3.2% 14% 3.2% 14% 3.2% 14% 3.2% 14% 3.2% 14%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

<div id="promo">
  <p class ="sideMe">everything you love, all in one place.</p>
  <h3 class="center sideMe sideMeCenter">MOST ♥ LIKED </h3>
  <p class="sideMe"><a href="#" class="promo-link">shop</a></p>
</div>

我如何使这面横幅看起来像城市服饰店的旗帜？

3 个答案: