flex نوار ساخته شده با
≪!DOCTYPE html≫
≪html lang="fa"≫
≪head≫
≪meta charset="UTF-8"≫
≪title≫Flex Menu≪/title≫
≪style≫
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f4f4f4;
font-family: sans-serif;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
height: 60px;
background: #333;
padding: 0 20px;
border-radius: 8px;
}
.menu div {
color: #fff;
cursor: pointer;
}
≪/style≫
≪/head≫
≪body≫
≪div class="menu"≫
≪div≫خانه≪/div≫
≪div≫درباره ما≪/div≫
≪div≫خدمات≪/div≫
≪div≫وبلاگ≪/div≫
≪div≫تماس≪/div≫
≪/div≫
≪/body≫
≪/html≫
flex آموزش
≪!DOCTYPE html≫
≪html lang="fa"≫
≪head≫
≪meta charset="UTF-8"≫
≪title≫Flex Cards≪/title≫
≪style≫
body {
margin: 0;
padding: 40px;
background: #fafafa;
font-family: sans-serif;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:space-around
}
.card {
width: 200px;
height: 120px;
background: #4f46e5;
color: white;
border-radius: 10px;
font-size: 20px;
}
≪/style≫
≪/head≫
≪body≫
≪div class="container"≫
≪div class="card"≫کارت ۱≪/div≫
≪div class="card"≫کارت ۲≪/div≫
≪div class="card"≫کارت ۳≪/div≫
≪div class="card"≫کارت ۴≪/div≫
≪div class="card"≫کارت ۵≪/div≫
≪div class="card"≫کارت ۶≪/div≫
≪/div≫
≪/body≫
≪/html≫
flex قسمت بندی صفحه با
≪!DOCTYPE html≫
≪html lang="fa"≫
≪head≫
≪meta charset="UTF-8"≫
≪title≫Flex Layout≪/title≫
≪style≫
body {
margin: 0;
height: 100vh;
font-family: sans-serif;
display: flex;
flex-direction: column;
}
header {
height: 70px;
background: #111827;
color: white;
display: flex;
align-items: center;
padding: 0 20px;
}
.main {
flex: 1;
display: flex;
}
aside {
width: 250px;
background: #374151;
color: white;
padding: 20px;
}
section {
flex: 1;
background: #e5e7eb;
padding: 20px;
}
≪/style≫
≪/head≫
≪body≫
≪header≫Header≪/header≫
≪div class="main"≫
≪aside≫Sidebar≪/aside≫
≪section≫Main Content≪/section≫
≪/div≫
≪/body≫
≪/html≫
header ساخت نوار
≪!DOCTYPE html≫
≪html lang="fa"≫
≪head≫
≪meta charset="UTF-8"≫
≪title≫Shop Menu≪/title≫
≪style≫
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
background: #f9fafb;
}
/* کانتینر منو */
.navbar {
background: #111827;
padding: 0 20px;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
max-width: 1200px;
margin: auto;
}
/* لوگو */
.logo {
color: white;
font-size: 22px;
font-weight: bold;
}
/* لیست لینکها */
.menu ul {
display: flex;
gap: 25px;
list-style: none;
padding: 0;
margin: 0;
}
.menu a {
color: #e5e7eb;
text-decoration: none;
font-size: 16px;
}
.menu a:hover {
color: #22c55e;
}
/* دکمه */
.btn {
background: #22c55e;
color: #052e16;
padding: 8px 14px;
border-radius: 6px;
font-size: 14px;
}
/* حالت موبایل */
@media (max-width: 768px) {
.menu {
flex-direction: column;
align-items: flex-start;
height: auto;
padding: 15px 0;
gap: 15px;
}
.menu ul {
flex-direction: column;
width: 100%;
gap: 10px;
}
.menu li {
width: 100%;
}
.menu a {
display: block;
padding: 10px;
width: 100%;
}
.btn {
align-self: stretch;
text-align: center;
}
}
≪/style≫
≪/head≫
≪body≫
≪nav class="navbar"≫
≪div class="menu"≫
≪div class="logo"≫MyShop≪/div≫
≪ul≫
≪li≫≪a href="#"≫خانه≪/a≫≪/li≫
≪li≫≪a href="#"≫محصولات≪/a≫≪/li≫
≪li≫≪a href="#"≫دستهبندیها≪/a≫≪/li≫
≪li≫≪a href="#"≫تخفیفها≪/a≫≪/li≫
≪li≫≪a href="#"≫تماس با ما≪/a≫≪/li≫
≪/ul≫
≪a href="#" class="btn"≫سبد خرید≪/a≫
≪/div≫
≪/nav≫
≪/body≫
≪/html≫
flex آموزش
≪!DOCTYPE html≫
≪html lang="en"≫
≪head≫
≪meta charset="UTF-8"≫
≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
≪title≫Document≪/title≫
≪style≫
body{
direction: ltr;
}
.container{
background-color: aqua;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
align-content: flex-start;
}
.flex-item{
background-color: blue;
border: solid;
width: 50px;
height: 50px;
}
≪/style≫
≪/head≫
≪body≫
≪div class="container"≫
≪div class="flex-item"≫1≪/div≫
≪div class="flex-item"≫2≪/div≫
≪div class="flex-item"≫3≪/div≫
≪div class="flex-item"≫4≪/div≫
≪/div≫
≪/body≫
≪/html≫
flex 2 آموزش
≪!DOCTYPE html≫
≪html lang="en"≫
≪head≫
≪meta charset="UTF-8"≫
≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
≪title≫Document≪/title≫
≪style≫
body{
direction: ltr;
}
.container{
background-color: aqua;
padding: 10px;
display: flex;
height: 300px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item{
background-color: blue;
color: beige;
border: solid;
width: 50px;
height: 50px;
}
≪/style≫
≪/head≫
≪body≫
≪div class="container"≫
≪div class="flex-item"≫1≪/div≫
≪div class="flex-item"≫2≪/div≫
≪div class="flex-item"≫3≪/div≫
≪div class="flex-item"≫4≪/div≫
≪div class="flex-item"≫5≪/div≫
≪/div≫
≪/body≫
≪/html≫
قسمت بندی صفحه
≪!DOCTYPE html≫
≪html lang="en"≫
≪head≫
≪meta charset="UTF-8"≫
≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
≪title≫Document≪/title≫
≪style≫
header{
width: 100%;
height: 50px;
background-color: black;
color: bisque;
padding: 10px;
}
section{
display: flex;
}
.slider{
width: 30%;
height: 600px;
background-color: aqua;
padding: 10px;
}
.main{
width: 70%;
height: 600px;
background-color: blueviolet;
padding: 10px;
}
≪/style≫
≪/head≫
≪body≫
≪header≫Header≪/header≫
≪main≫
≪section≫
≪div class="slider"≫Slider≪/div≫
≪div class="main"≫Main≪/div≫
≪/section≫
≪/main≫
≪/body≫
≪/html≫
css ترتیب دهی در
≪!DOCTYPE html≫
≪html lang="en"≫
≪head≫
≪meta charset="UTF-8"≫
≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
≪title≫Document≪/title≫
≪style≫
body{
direction: ltr;
}
.container{
background-color: aqua;
padding: 10px;
display: flex;
height: 300px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flex-item{
background-color: blue;
color: beige;
border: solid;
width: 50px;
height: 50px;
}
≪/style≫
≪/head≫
≪body≫
≪div class="container"≫
≪div class="flex-item"≫1≪/div≫
≪div class="flex-item"≫2≪/div≫
≪div class="flex-item"≫3≪/div≫
≪div class="flex-item"≫4≪/div≫
≪div class="flex-item"≫5≪/div≫
≪/div≫
≪/body≫
≪/html≫