Question

我的目标是拥有一个透明背景的导航栏，左边有徽标，并且工作＆＃39;和＆＃39;关于＆＃39;在导航栏的右边缘。请原谅，我的页面现在没有响应，因此正确的结果只会出现在大型视口中。我已经使用容器类在div中创建了一些内容，并希望使用flexbox将导航放在顶部。我需要帮助如何从这里继续。我正在尝试复制this设计。

＆＃13;

* {
  box-sizing: boder-box;
  margin: 0;
  padding: 0;
}

nav {
  background-color: pink;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  max-width: 100px;
  max-height: 100px;
  align-content: right;
}

.container {
  display: flex;
  position: relative;
}

.image {
  background-image: url("http://res.cloudinary.com/pixelplus/image/upload/v1510295441/black-and-white-photography-1024x584_niptgw.jpg");
  background-repeat: round;
  height: 100vh;
  width: 30vw;
}

.headline {
  font-family: 'Neuton', serif;
  font-size: 70px;
  max-width: 100px;
  position: absolute;
  top: 15%;
  left: 33%;
}

.summary {
  font-size: 20px;
  max-width: 400px;
  position: absolute;
  top: 65%;
  left: 38%;
}

＆＃13;

<div class="main">
  <div class="container">
    <nav><a class="logo">logo</a><a class="work">work</a><a class="about">about</a></nav>
    <div class="image"></div>
    <div class="headline">
      <p>Lorem Ipsum</p>
    </div>
    <div class="summary">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

你可以试试这个：

＆＃13;

* {
  box-sizing: boder-box;
  margin: 0;
  padding: 0;
}

nav {
position: absolute;
width: 100%;
background: transparent;
display: flex;
justify-content: space-around;
flex-direction: row;
max-height: 100px;
align-content: right;
}

nav .logo{margin-left: 15px}
nav .work{
   margin-left: auto;
   margin-right: 15px;
 }
nav .about{margin-right: 15px;}

.container {
  display: flex;
  position: relative;
}

.image {
  background-image: url("http://res.cloudinary.com/pixelplus/image/upload/v1510295441/black-and-white-photography-1024x584_niptgw.jpg");
  background-repeat: round;
  height: 100vh;
  width: 30vw;
}

.headline {
  font-family: 'Neuton', serif;
  font-size: 70px;
  max-width: 100px;
  position: absolute;
  top: 15%;
  left: 33%;
}

.summary {
  font-size: 20px;
  max-width: 400px;
  position: absolute;
  top: 65%;
  left: 38%;
}

＆＃13;

<div class="main">
  <div class="container">
    <nav><a class="logo">logo</a><a class="work">work</a><a class="about">about</a></nav>
    <div class="image"></div>
    <div class="headline">
      <p>Lorem Ipsum</p>
    </div>
    <div class="summary">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis</p>
    </div>
  </div>
</div>

＆＃13;

在我的页面顶部获得透明导航

1 个答案: