Front-End
افزودن تمرین جدید
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منوی کشویی</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
ul:hover{
display: block;
}
li a{
width: 300px;
display: inline-block;
padding: 15px;
background-color: rgb(54, 54, 233);
color: white;
text-decoration: none;
box-sizing: border-box;
}
li:hover a{
background-color: rgb(121, 157, 203);
color:rgb(54, 54, 233) ;
}
#menu{
width: 300px;
padding: 8px;
box-sizing: border-box;
background-color: rgb(7, 117, 251);
}
#menu:hover+ul{
display: block;
}
</style>
</head>
<body>
<div id="menu">
Menu
</div>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">log out</a></li>
</ul>
HTML & CSS
<!DOCTYPE html>
<html>
<head>
<style>
#s {
border: 2px solid rgb(31, 30, 30);
border-radius: 1px;
width: 150px;
}
.b {
color:rgb(31, 30, 30) ;
text-decoration: none;
}
#s:hover+ul,
ul:hover {
display: block;
}
ul {
border:2px solid rgb(79, 72, 72);
text-decoration: none;
color: rgb(79, 72, 72);
display: none;
width: 150px;
font-weight: bold;
list-style-type: none;
box-sizing: border-box;
position: absolute;
margin: 0px;
}
</style>
</head>
<body>
<div id="s">Select</div>
<ul>
<li><a href="#" class="b">Home</a></li>
<li><a href="#" class="b">Media</a></li>
<li><a href="#" class="b">Support</a></li>
</ul>
</body>
</html>
C S S____________________________________
<style>
/******important*****/
ul{
width: 200px;
height: 40px;
background: rgb(13, 168, 152);
align-content: center;
text-align: center;
padding: 0;
list-style-type: none;
border-radius: 5px;
user-select: none;
font-weight: 1000;}
li{display: none;}
ul:hover li{
display:block;
width: 100%;
background-color: rgb(46, 123, 116);}
a{
display: block;
text-decoration: none;
color: rgb(248, 248, 248);}
/******unimportant*****/
ul:hover{
color: rgb(255, 255, 255);
text-shadow: 2px 2px 5px white, -2px -2px 5px white;}
ul:hover li{text-shadow: none;}
a:hover{
letter-spacing: 2px;
zoom: 120%;
width: 100%;
border-bottom: 1px solid rgb(236, 223, 223);}
</style>
H T M L_______________________________________________
<ul>
⥼ M U N U ⥽
<li><a href="#">one </a></li>
<li><a href="#">twe </a></li>
<li><a href="#">three</a></li>
<li><a href="#">four </a></li>
</ul>
HTML & CSS
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منوی کشویی</title>
<style>
body {
font-family: Arial, sans-serif;
}
/* استایل منو */
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: right;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* استایل زیرمنو */
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
padding: 14px 16px;
background-color: #333;
color: white;
border: none;
outline: none;
font-size: 16px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block; /* نمایش زیرمنو هنگام هاور */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">خانه</a>
<a href="#about">درباره ما</a>
<div class="dropdown">
<button class="dropbtn">خدمات</button>
<div class="dropdown-content">
<a href="#service1">خدمات 1</a>
<a href="#service2">خدمات 2</a>
<a href="#service3">خدمات 3</a>
</div>
</div>
<a href="#contact">تماس با ما</a>
</div>
</body>
</html>
HTML & CSS
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منوی کشویی</title>
<style>
:root{
--a:rgb(45, 45, 189);
--b:rgb(141, 161, 189);
--c:rgba(87, 159, 248, 0.705);
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
ul:hover{
display: block;
}
li a{
width: 300px;
display: inline-block;
padding: 17px;
background-color: var(--a);
color: white;
text-decoration: none;
box-sizing: border-box;
}
li:hover a{
background-color: var(--b);
color:var(--a);
}
#menu{
width: 300px;
padding: 10px;
box-sizing: border-box;
background-color: var(--c);
}
#menu:hover+ul{
display: block;
}
</style>
</head>
<body>
<div id="menu">
Menu
</div>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">log out</a></li>
<li><a href="#">aboutas</a></li>
</ul>
<!--HTML-->
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<link rel="stylesheet" href="project.css" title="text/css">
</head>
<body dir="rtl">
<div id="mydiv">
<ul>
<li>منو
<ul>
<li><a href="about me.html" target="_self">درباره ی من</a></li>
<li><a href="contact.html" target="_self">تماس با من</a></li>
<li><a href="index.html" target="_self"> خانه</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<!--CSS-->
@charset 'utf-8';
*{
padding: 0px;
margin: 0xp;
font-style: italic;
}
#mydiv{
width: 150px;
height: auto;
margin: 150px auto;
border: 2px solid black;
text-align: center;
font-size: 30px;
box-shadow: 0px 0px 0px 2px rgb(102, 101, 101);
}
ul {
list-style-type: none;
cursor: pointer;
}
ul a{
color: black;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
li ul {
width: 100%;
display: none;
}
li:hover ul {
display: block;
}
ul a:hover {
box-shadow:0px 0px 0px 3px rgb(20, 20, 20);
margin: 0px 7px;
background-color: rgb(221, 218, 218);
}
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو
😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و
یواش یواش به سراغ تمرینات سخت تر بری.
همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری