Front-End
تمرین جدید
HTML & CSS
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
JavaScript - جاوا اسکریپت
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
<!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>
<!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>
<!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>
<!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);
}
<!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;
}
.menu {
position: relative;
display: inline-block;
}
.menu-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;
}
.menu-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-content a:hover {
background-color: #f1f1f1;
}
.menu:hover .menu-content {
display: block;
}
</style>
</head>
<body>
<div class="menu">
<button>منو</button>
<div class="menu-content">
<a href="link1.html">گزینه 1</a>
<a href="link2.html">گزینه 2</a>
<a href="link3.html">گزینه 3</a>
</div>
</div>
</body>
</html>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام