<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- outer wrapper element -->
<div id="wrapper">
<!-- header element -->
<header>
<!-- top of the header -->
<div id="headerTop">
<!-- headerTopMain -->
<div id="headerTopMain">
<div id="left">
<h5>Welcome to Fi-mall</h5>
<p>
<a href="javascript:;">Login</a>
<a href="javascript:;">Sign in</a>
</p>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
// wrapper
#wrapper {
//header
header {
background-color: skyblue;
height: 30px;
#headerTop {
height: 100%;
#headerTopMain {
height: 100%;
width: 1200px;
margin: 0 auto;
#left {
height: 100%;
display: flex;
align-items: center;
h5 {
color: black;
font-size: 15px;
font-weight: bold;
margin-right: 10px;
}
p {
}
}
}
}
}
}
有一种更简单的方法来实现这一目标吗？谢谢您的回复。
