Saya cuba mengekod tapak web tetapi imej dan nama (Administracija) muncul di sebelah kiri tetapi ia sepatutnya muncul di mana bar carian berada.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
:root {
--main-color: #DD2F6E;
--color-dark: #1D2231;
--text-grey: #8390A2;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.sidebar {
width: 345px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background: var(--main-color);
}
.sidebar-brand {
height: 90px;
padding: 1rem 0rem 1rem 2rem;
color: #fff;
}
.sidebar-brand span {
display: inline-block;
padding-right: 1rem;
}
.sidebar-menu {
margin-top: 1rem;
}
.sidebar-menu li {
width: 100%;
margin-bottom: 1.7rem;
padding-left: 2rem;
}
.sidebar-menu a {
display: block;
color: #fff;
font-size: 1.1rem;
}
.sidebar-menu a.active {
background: #fff;
padding-top: 1rem;
padding-bottom: 1rem;
color: var(--main-color);
border-radius: 30px 0px 0px 30px;
}
.sidebar-menu a span:first-child {
font-size: 1.5rem;
padding-right: 1rem;
}
.main-content {
margin-left: 345px;
}
header {
display: flex;
justify-content: space-between;
padding: 1rem;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.search-wrapper {
border: 1px solid #ccc;
border-radius: 30px;
height: 50px;
display: flex;
align-items: center;
overflow-x: hidden;
}
.search-wrapper span {
display: inline-block;
padding: 0rem 1rem;
font-size: 1.5rem;
}
.search-wrapper input {
height: 100%;
padding: .5rem;
border: none;
outline: none;
}
.user-wrapper {
display: flex;
align-items: center;
}
.user-wrapper img {
border-radius: 50%;
margin-right: 1rem;
}
.user-wrapper small {
display: inline-block;
color: var(--text-grey);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>Bibliotekos administracija</title>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<div class="sidebar-brand">
<h2><span class="lab la-accusoft"></span> Biblioteka</h2>
</div>
<div class="sidebar-menu">
<ul>
<li>
<a href="" class="active"><span class="las la-home"></span>
<span>Pradžia</span></a>
</li>
<li>
<a href=""><span class="las la-clipboard"></span>
<span>Knygų sąrašas</span></a>
</li>
<li>
<a href=""><span class="las la-book"></span>
<span>Paimtos knygos</span></a>
</li>
</ul>
</div>
</div>
<div class="main-content">
<header>
<h2>
<label for="">
<span class="las la-bars" ></span>
</label> Pradžia
</h2>
<div class="search-wrapper">
<span class="las la-search"></span>
<input type="search" placeholder="Search here" />
</div>
</header>
<div class="user-wrapper">
<img src="img/among.jpg" width="40px" height="40px" alt="">
<div>
<h4>Administracija</h4>
</div>
</div>
<main>
<div class="cards">
<div class="card-single">
<div>
<h1>0</h1>
<span>Knygų</span>
</div>
<div>
<span class="las la-books"></span>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
Jadi saya sedang menonton video tentang cara membuat laman web pentadbir dan dalam video itu terdapat satu langkah di mana nama dan gambar pentadbir harus muncul di sudut kanan atas di mana bar carian saya sekarang tetapi ia tidak hanya kekal kiri Adakah sesiapa tahu bagaimana untuk menyelesaikan masalah ini?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tajuk anda hendaklah:
<header> <h2> <label for=""> <span class="las la-bars" ></span> </label> Pradžia </h2> <div class="search-wrapper"> <span class="las la-search"></span> <input type="search" placeholder="Search here"/> </div> <div class="user-wrapper"> <img src="img/among.jpg" width="40px" height="40px" alt=""> <div> <h4>Administracija</h4> </div> </div> </header>Saya mengesyorkan mempelajari asas HTML sebelum mula membina projek yang kompleks, terutamanya pembinaan susun atur, kerana kekurangan pengetahuan yang diperlukan boleh membawa banyak kerumitan dan salah faham.