-
توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.
پرسش و پاسخ آموزش CSS و HTML
- شروع کننده موضوع Mahdi Askari
- تاریخ شروع
Mahdi Askari
مدير فنی
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style>
H1 span { font: 10px tahoma;
color: red;
}
.top {vertical-align: top;
}
H1 , H2{
Float: left;
Margin-top: 0;
}
H2 {
Clear: both;
}
.nav{
Float: right;
Margin: 0;
List-style: none;
}
.nav li {
Float: left;
font: 20px tahoma;
}
.nav a {
Display: block;
Margin-left: 50px;
Padding: 15px;
Border: 1px solid red;
Color: blue;
Text-decoration: none;
}
.nav a:focus , .nav a:hover {
Background: green;
Color: yellow;
}
</style>
</head>
<body>
<h1>
<span class="top"> خانواده ایرانی </span>iranjoman
</h1>
<ul class="nav">
<li> <a href="#"> صفحه نخست </a> </li>
<li> <a href="#"> تماس با مدیر </a> </li>
<li> <a href="#"> پست الکترونیک </a> </li>
</ul>
<h2>
Learning html & css
</h2>
</body>
</html>:24:
1. استفاده ار nav به جای navbar که مشکلی ایجاد نمیکنه؟؟؟
در مورد موارد زیر لطفا توضیح بدید:
2. کاربرد تگ li , ul
3. "#"
4. نحوه تعریف
Border و Color به این شکل توضیح میدید
HTML:
Border: 1px solid [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ccc]#ccc[/URL]
Color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=233]#233[/URL]5. اینجا میشه از کلاس کاذب visited استفاده کرد؟(منظورم ترتیب قرار گرفتن کلاس های کاذب هست)
HTML:
.navbar a:focus , .navbar a:hover
{ Background: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=aaa]#aaa[/URL]
Color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=fff]#fff[/URL] }
آخرین ویرایش:
Mahdi Askari
مدير فنی
منظورم کاربرد # در این خط هست:
HTML:
<li> <a href="#"> </a> </li>در مورد Border و Color هم نوع مقدار دهی و تعریف کدی بود که شما در آموزش نوشتید
چرا اینجا برای بکگراند یه لینک نوشتید؟
برنامه ای که شما در آموزش نوشته بودید برای من به شکلی که عکس گرفته بودید نمایش نداد
به این شکل بود:
آخرین ویرایش:
Mahdi Askari
مدير فنی
Mahdi Askari
مدير فنی
میدونم توضیح دادید:حرص:
منظورم همون تعریفی بود که واسهBorder و Color تو اموزش نمایش داده شده که الان گفتید انجمن مشکل داره:نیش:
http://www.iranjoman.com/showthread.php?t=71467
Mahdi Askari
مدير فنی
میدونم توضیح دادید:حرص:
منظورم همون تعریفی بود که واسهBorder و Color تو اموزش نمایش داده شده که الان گفتید انجمن مشکل داره:نیش:
http://www.iranjoman.com/showthread.php?t=71467
منم توضیح دادم
یک سیسم هست اون لینک و در انجمن اضافه میکنه
کد ها نباید اونطوری باشن
آموزش رو دوباره نگاه کنید:گل:
Mahdi Askari
مدير فنی
مرسی از شما که پیگیر تاپیک ها هستید:نیش:
نه سعی میکنیم تا اونجا نرسیم:خنده2:
خواهش میکنم:احترام:
از انجمن یاد گرفتیم به خود انجمن داریم درس پس میدیم:نیش:
:نیش:
ممنون از توجه شما ادمین عزیز:گل:
بله آقا مهدی واقعا لطف دارن و حوصله ی بسیار :بله: واقعا ازشون ممونم:گل::احترام:
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style>
.sayeh {
background:#f0d8f0 ;
border:5px ridge #000 ;
width: 600px;
height: 400px;
padding:10px;
position:absoluet;
}
.sayeh li{
list-style: inside url('http://www.iranjoman.com/images/smilies/palang.gif') ;
}
.sayeh1{ background: #fff ;
margin: 50px 20px ;
width:400px;
height:230px;
border:4px double #000 ;
border-radius:10px;
padding:5px;
position:Relative ;
left:40px;
top:-25px;
font:15px tahoma ;
}
.sayeh1 li { list-style: upper-alpha inside ;
}
</style>
<body>
<ul class=sayeh>
<li>ostad palang</li><br>
<li>learning html & css</li>
<ol class="sayeh1">
<h4> کار با لیست ها و تعیین موقعیت عناصر</h4>
<ol>
<li>list-style
<ol>
<li> list-style-type </li>
<li> list style image </li>
<li>list-style-position</li>
</li>
</ol>
<li> position
<ol>
<li> Static </li>
<li>Relative</li>
<li> absolute </li>
<li>fixed</li>
</li>
</ol>
</ol>
</ol>
</ul>
</body>
</html>[MENTION=4792]palang[/MENTION]
Mahdi Askari
مدير فنی
مرسی:گل::نیش:
توصیه برام مهمتر از تعریف بود:احترام:
حالا حتما باید خودم میگفتم که نظر بدید:91:
:کسل:
http://www.up.iranjoman.com/images/awxrud8u4djuzm9cw9b6.rar
من متوجه کاربرد display نشدم ممکنه لطفا ی مثال کاربردی بزنید:کسل:
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<style>
.one{
width:200px;
height:200px;
background:green;
margin:50px 0 0 100;
position:relative;
cursor:pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
.two{
width:200px;
height:200px;
background:blue;
margin:-100px 0 0 200;
position:relative;
cursor:help;
z-index:1;
opacity:0.5;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.three{
width:200px;
height:200px;
background:yellow;
margin:-100px 0 0 300;
position:relative;
cursor:url(http://www.iranjoman.com/images/smilies/palang.gif),auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
.four{
width:200px;
height:200px;
background:black;
margin:-100px 0 0 400;
position:relative;
visibility:hidden;
}
</style>
</head>
<body>
<div class="one"> </div>
<div class="two" ></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>http://www.up.iranjoman.com/images/awxrud8u4djuzm9cw9b6.rar
من متوجه کاربرد display نشدم ممکنه لطفا ی مثال کاربردی بزنید:کسل:
Mahdi Askari
مدير فنی
:کسل:
HTML:<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <style> .one{ width:200px; height:200px; background:green; margin:50px 0 0 100; position:relative; cursor:pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } .two{ width:200px; height:200px; background:blue; margin:-100px 0 0 200; position:relative; cursor:help; z-index:1; opacity:0.5; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); } .three{ width:200px; height:200px; background:yellow; margin:-100px 0 0 300; position:relative; cursor:url(http://www.iranjoman.com/images/smilies/palang.gif),auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } .four{ width:200px; height:200px; background:black; margin:-100px 0 0 400; position:relative; visibility:hidden; } </style> </head> <body> <div class="one"> </div> <div class="two" ></div> <div class="three"></div> <div class="four"></div> </body> </html>
http://www.up.iranjoman.com/images/awxrud8u4djuzm9cw9b6.rar
من متوجه کاربرد display نشدم ممکنه لطفا ی مثال کاربردی بزنید:کسل:
نمره 23 از 20 برای اینکه از شکلک من استفاده کردید:خنده2:
خب خصوصیت display
ببینید برای اینکه یک عنصر بدرستی در جای خودش نشون داده بشه مجموعه عوامل کد ها این کارو میکنن
یکی از این display هست
شما دارید کار میکنید و میخواید نمایش یک عنصرتون رو خاص کنید
این ویژگی رو تعریف میکنید اما چجوری؟
اگر block تعریف بشه این عنصر در کنار خودش هیچ عنصری رو راه نمیده
و فقط این عنصر در این خط قرار میگیره و عناصر بعدیش رو به پایین خودش منتقل میکنه
اگر none تعریف بشه این عنصر رو نمایش نمیده
اگر inline و inline-block تعریف بشه شما میتونید چند تا از عنصر ها رو کنار هم بچینید
اگر list-item تعریف بشه مانند تگ li کنار هر آیتم یک بولت میذاره