Ich versuche, eine Website zu codieren, aber das Bild und der Name (Administracija) erscheinen auf der linken Seite, sollten aber dort erscheinen, wo sich die Suchleiste befindet.
@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>
Also habe ich mir ein Video zum Erstellen einer Admin-Website angesehen und in diesem Video gab es einen Schritt, bei dem der Name und das Bild des Admins in der oberen rechten Ecke erscheinen sollten, wo sich jetzt meine Suchleiste befindet, aber das ist nicht der Fall, sondern bleibt einfach eingeschaltet links Weiß jemand, wie man dieses Problem löst?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你的标题应该是：
<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>我建议在开始构建复杂项目之前学习 HTML 基础知识，特别是布局构建，因为缺乏必要的知识可能会带来很多复杂性和误解。