سوال در بخش رسپانسیو
ثبت پرسش جدید
پاسخ‌ها
2
سلام پویا جان
من خودم به شخصه css رو نمیتونم اینطوری بررسی کنم.
کاش کدهات رو یا کپی میکردی برامون یا ضمیمه میکردی؛ اینطوری بهتر میتونیم بهت کمک کنیم.
بفرمایید این کد های من اگر میشه از لحاظ رسپانسیو بودنش توی نمایش گر کوچیک تر میشه برسیش کنید
<!doctype html>
<html>
<head>
<title>test1</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://roocket.ir/style/style.css">
<link rel="stylesheet" href="https://roocket.ir/fonts/vazir.css">
</head>
<body dir="rtl">
<div class="dede cliarfix">
<a href="#"><h1>راکت نیوز</h1></a>
</div>
<header class="he1 cliarfix">
<h2>همراه ما باشید با راکت</h2>
</div>
</header>
<nav class="cliarfix">
<!-- <a href="#"><img src="img/images (1).jfif"></a> -->
<a href="#" class="a1">پنل کاربری</a>
<div>
<input class="search-box" type="text" name="" placeholder="جستجو کنید">
</div>
</nav>
</body>
</html>html{
font-size: 100%;
font-family: vazir;
}
body{
background-color: rgb(255, 255, 255);
color: white;
margin: 0%;
}
.dede{
border: 2px solid;
margin: auto;
margin-top: 1rem;
border-radius: 10px;
box-shadow:1px 2px 3px rgb(95, 255, 202);
border-color: rgb(0, 33, 141);
}
.dede h1{
margin-right: 1rem;
color: aqua;
}
.dede a{
text-decoration: none;
}
header{
width: 100%;
display: inline-block;
}
@media(min-width:760px){
header{
width:calc(50% - 12rem);
margin-right: 12rem;
}
}
header{
margin-top: 1rem;
margin-right: 12rem;
}
h2{
color: aqua;
}
nav{
width: 100%;
margin: auto;
}
@media(min-width:760px){
nav{
width:calc(35% - 13rem);
margin-left: 13rem;
}
}
nav{
float:left;
display:inline-block;
margin-top: .5rem;
}
nav img{
float: left;
width:5rem;
border-radius: 100%;
margin: .5rem;
}
.cliarfix::after,
.cliarfix::before{
content: "";
display: table;
}
.cliarfix::after{
clear: both;
}
.dede{
width: 100%;
display: inline-block;
}
@media(min-width:760px){
.dede{
width: 80%;
margin-right: 10%;
}
}
@media (min-width:760px){
body{
background-color: rgb(2, 5, 56);
}
}
.a1{
text-decoration: none;
float: left;
margin-top: 1.5em;
padding: 10px 30px;
font-size: larger;
font-family: vazir;
color: rgb(255, 255, 255);
border-radius: 0.5em;
font-weight: bold;
box-shadow:10px 10px rgba(0, 255, 255, 0.212);
background-color: rgb(7, 216, 216);
}
.dodi{
position: absolute;
top: 18%;
right: 13%;
}
.search-box{
margin-top: 1.5em;
padding: 10px 30px;
font-size: larger;
font-family: vazir;
color: rgb(65, 65, 65);
border-radius: 0.5em;
font-weight: bold;
background-color: rgb(255, 255, 255);
border: none;
}
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد