JSFiddle - React, Tailwind, and code Playground

by Occur

HTML

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>
  首頁
</title>
</head>
<body>
	<header>
	
		<span class="logo">
			<a href="index.html"><img src="image/brand.png" alt="商標"></a>
		</span>
		<span>
			<ul class="nav">
				<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>
		</span>
		<span class="icon">
			<a href="shopcart.html"><img src="image/cart.png" alt="購物車"></a>
			<a href="favorite.html"><img src="image/favorite.png" alt="追蹤清單"></a>
			<a href="login.html"><img src="image/login.png" alt="登入"></a>
		</span>
	</header>

	<footer>
		<div class="foot">

		</div>
	</footer>	
</body>
</html>

CSS

body{
    margin:0 0 0 0;
    padding:0 0 0 0;
    font-family: "微軟正黑體";
}

header{
    margin: 0 0 0 0;
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: paleturquoise; 
    height:10% ; 
}
header span:nth-child(2){
    width:100%;
}
.logo{
    flex: none;
    width: 150px;
    align-items: flex-start;
}
.icon{
    flex: none;
    width: 200px;
    align-items: flex-end;
    display: inline-flex;
    padding: 0 5px 0 5px;
}

.nav{
    flex: auto;
    align-content: center;
    justify-content:space-around;
    list-style: none;
    font-size: 20px;
    height: auto;
    background-color: aliceblue;
}

.nav > li{ 
    display: inline-flex;
    padding: 3% 10px 0 10px;
}

.nav > li > a{
    text-decoration: none;
}

.foot{
    font-size: 15px;
}