Write an html header icon button icon button search box icon button
<!DOCTYPE html>
<html>
<head>
<title>Header with Icons and Search Box</title>
<style>
.header {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
<pre><code> .icon-button {
background-color: transparent;
border: none;
color: #fff;
font-size: 20px;
cursor: pointer;
margin-right: 10px;
}
.search-box {
background-color: #fff;
border: none;
border-radius: 5px;
padding: 5px;
font-size: 16px;
width: 300px;
}
</style>
</code></pre>
</head>
<body>
<div class="header">
<button class="icon-button"><i class="fa fa-bars"></i></button>
<button class="icon-button"><i class="fa fa-bell"></i></button>
<input type="text" class="search-box" placeholder="Search...">
<button class="icon-button"><i class="fa fa-search"></i></button>
</div>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/B2I 著作权归作者所有。请勿转载和采集!