Question

我正在尝试在图片中重新创建设计，但是，我的问题是我无法正确拆分页面布局，如果可以帮助我改善代码，因为我觉得/确信有一种更好的方法修复布局

nav {width:100%;
     }
nav ul {padding:0; marding:0;}
nav ul li {display:inline-block;
           padding:10px;
		   padding-top:65px;
		   padding-left:30px;   
		   font-size:0.8em;
		   text-transform:uppercase;
		   opacity:0.5;}
.logos {float:right;
        
         }
.logo-text{font-size=3em}
.brand-logo {float:left;
            clear:none;
            font-size:2.5em;
            font-weight:bold;}

 <!DOCTYPE html>
       <html lang="en">
        <head>
        <title>Burciaga & Co.</title>
        <link  rel="stylesheet" type="text/css" href="css.css">
        </head>
          <body>
             <div style="flex-wrap:wrap">
          <nav>
            <ul>
              <p class="brand-logo">Burciaga & Co. </p>
               <li>Design
               <li>Photography
               <li>profile
          </ul>
            </nav>
              <div class="logos">
             <img src="https://img.icons8.com/ios/50/000000/twitter.png" 
                 width=18px;height=18px; style="margin-left:10px">
             <img src="https://img.icons8.com/android/24/000000/facebook.png" 
                 width=18px;height=18px style="margin-left:10px">
             <img src="https://img.icons8.com/ios/50/000000/instagram-new- 
               filled.png"  width=18px;height=18px style="margin-left:10px">
            </div>
          <div>
          JJJJJJJJJJJJJJJJJJ
           </div>
           </body>
            </html>

Answer 1

这是您的问题的示例解决方案。

html, body {
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  height: 100px;
  padding: 10px;
}

.icons {
  display: flex;
  align-items: flex-end;
  
  height: 100%;
}

.icons a + a {
  margin-left: 5px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  padding: 20px;
  
  background-color: #353537;
  color: #fff;
}

.logos {
  display: flex;
  justify-content: space-around;
}

.logos div {
  padding: 10px;
  
  background-color: #444547;
}

.logos div + div {
  margin-left: 10px;
}

<header>
  <div class="logo">Logo</div>
  <nav>
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
  </nav>
  <nav class="icons">
    <a href="#">
      <img src="" alt="icon">
    </a>
    <a href="#">
      <img src="" alt="icon">
    </a>
    <a href="#">
      <img src="" alt="icon">
    </a>
    <a href="#">
      <img src="" alt="icon">
    </a>
  </nav>
</header>
<main>
  <h1>Caption</h1>
  <p>Description</p>
  <div class="logos">
    <div><img src="" alt="Logo"></div>
    <div><img src="" alt="Logo"></div>
    <div><img src="" alt="Logo"></div>
    <div><img src="" alt="Logo"></div>
    <div><img src="" alt="Logo"></div>
  </div>
</main>

尝试重新创建此网页设计，但无法拆分网页

1 个答案: