購物平台

by etai200

HTML

<body>
<header>
<h1>ET服飾</h1>
 <nav>
  <ul>
  <li><a href="#">潮男館</a></li>
  <li><a href="#">正妹館</a></li>
  <li><a href="#">大尺碼</a></li>
  <li><a href="#">兒童館</a></li>
  <li><a href="#">購物車</a></li>
  <li><a href="#">聯繫我們</a></li>
  </ul>
 </nav>
</header>
<main>
<form action="/add-product">
<article>


<div class="commodity">

<select>
    <option>請選擇您購買的類別</option>
    <option>上衣類</option>
    <option>外套類</option>
    <option>下身類</option>
    <option>配件類</option>
</select><br><br>
<input type="text" name="commodity" value="您想購賣的商品"><br><br>
<input type="radio" name="sex" value="male" cheaked>男性
<input type="radio" name="sex" value="fmale">女性<br>
</div>
<br>
<div class="price">
<input type="text" name="price" value="商品售價"><br><br>
<input type="checkbox" name="free shipping" value="true">免運<br><br>
</div>
<br>
<div class="note">
<textarea style="height:150px">備註</textarea><br>
<input type="submit" value=提交 class="submit">
</div>

</article>
</form> <!--輸入的!-->
</main>
<footer>
<p>copyright © 2023 ET服飾 ALL Right Reserved.</p>
</footer>
</body>

CSS

header{
  background-color: black;
  height: 50px;
  width: 100%;
}
header li{
 display: inline;

}
header h1{
  color: white;
  position: absolute;
  top: 0;
  left: 30px;
  line-height: 30px;
}
header a{
  color: white;
  text-decoration: none;
  font-size: 1.3rem;
}

header ul{
  position: absolute;
  right: 30vw;
  top: 0;
  line-height: 55px;
}
main{
  background-color: LightGray;
}
article{
  display: flex;
  justify-content: center;
  align-items: center;
}
.commodity,.price,.note{
  border: 2px solid Silver;
  background-color: #FFFFFF99;
  width: 200px;
  height: 200px;
  padding: 20px 20px;
  margin: 10px 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}
.submit{
  background-color: Orange;
  border: 2px solid Moccasin;
  color: white;
   width: 200px;
   height: 30px;
   margin: 5px;
    -webkit-border-radius: 50px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
footer{
  background-color: black;
  color: white;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}