امروز دوشنبه ۱۳۹۹/۰۴/۲۳

2020/07/13 GMT +4:30

آگهی

زیبا سازی فرم های وب با CSS

همانطور که می دانیم، امروزه در طراحی صفحات و قالب های تحت وب، استفاده از css و تکنیک ها و قابلیت های مبتنی بر آن به یک امر اجتناب ناپذیر و فراگیر تبدیل شده است، از این گذشته با استفاده از قدرت css و کمی تجربه، بسیاری از جلوه های بصری را می توان حتی بدون به کارگیری تصاویر و المان های زیاد ایجاد کرد، از این رو قابلیت های این زبان کمکی در ایجاد جلوه های تعاملی، حتی بدون استفاده از سایر ابزار ها (مانند المان های تصویری، کتابخانه های جاوا اسکریپتی و...) در حدی است که می توان خیلی از نیازهایمان را در طراحی وب، با آن بر طرف کنیم، در این آموزش خواهیم دید که چگونه می توان با css (و css3) فرم های وب (html) را زیباتر و حرفه ای تر نمود.

استفاده از hover برای تگ های input

یکی از پرکاربردترین عناصر در فرهای وب، تگ input است که خود زیر مجموعه ها (type های) متفاوت دارد، در حالت معمول و بدون استفاده از استایل css، مرورگر یک استایل پیش فرض برای این تگ در نظر می گیرد، اما جالب است که با استفاده از خاصیت hover در css می توان برای این عنصر نیز ویژگی ها و جلوه های بصری زیبا در قالب کلاس و آی دی تعریف کرد، به مثال زیر توجه کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد جلوه های تعاملی با css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.text-field{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    padding:2px;    
    border:#39F 1px solid;    
}
.text-field:hover{
    border:#F60 1px solid;    
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="text" class="text-field" />
</form>
</body>
</html>

برای دیدن پیش نمایش، به انتهای این مطلب مراجعه کنید.
توضیح:
- همانطور که ملاحظه می کنید، کلاس css ما در مثال بالا از دو قسمت تشکیل شده است، قسمت اول ویژگی های کلی فیلد مقصد را در حالت عادی تعریف می کند و در قسمت دوم، با استفاده از خاصیت hover، برای حالتی که کاربر ماوس را روی فیلد مورد نظر می برد، یک رنگ متمایز برای خط حاشیه فیلد در نظر گرفته می شود.
- برای استفاده از این ویژگی در سایر عناصر فرم های وب (مانند textarea، select، submit و...) نیز می توانید به همین ترتیب عمل کنید، یعنی ابتدا یک کلاس در css تعریف کرده و سپس کلاس را به عنصر مورد نظر نسبت دهید، به این صورت یک ویژگی تعاملی خواهید داشت.

استفاده از focus در حالتی که کاربر در فیلد کلیک می کند

معمولا ویژگی hover به تنهایی نمی تواند جلوه کاملی ایجاد کند، به فرض کاربر انتظار دارد هنگامی که در یک فیلد کلیک کرده است، فیلد انتخاب شده را به رنگ متمایز از بقیه عناصر صفحه مشاهده کند، هرچند این نوع تنظیمات بیشتر سلیقه ای هستند، اما حداقل استفاده ای از آنها می تواند برای هر صفحه وبی کاربردی باشد، برای استفاده از قابلیت focus، کلاس های مثال بالا را به روش زیر تکمیل می کنیم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد فرم های تعاملی با css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.text-field{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    padding:2px;    
    border:#39F 1px solid;    
}
.text-field:hover{
    border:#F60 1px solid;    
}
.text-field:focus{
    border:#F60 1px solid;
    background-color:#F2FBFF;    
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="text" class="text-field" />
</form>
</body>
</html>

توضیح:
- با افزودن خاصیت focus به کلاس css، اگر کاربر در فیلدهای وب کلیک کند، استایل مخصوص و تعیین شده در آن هنگام اجرا شده که به کمک آن می توان یک جلوه تعاملی زیبا را ایجاد کرد.
- اگرچه خاصیت focus در بیشتر مرورگرهای استاندارد پشتیبانی می شود، اما در مرورگر اینترنت اکسپلورر نسخه 6 و 7 پشتبانی نشده و در اینترنت اکسپلورر نسخه 8، باید تگ DOCTYPE در صفحه موجود باشد (در ابتدای صفحه) تا این خاصیت عمل کند.

گرد کردن گوشه های عناصر فرم با css3 و افزودن سایه

یکی دیگر از کاربردهای css که البته در نسخه 3 به آن افزوده شده، قابلیت گرد کردن گوشه های عناصر html و از جمله فیلدهای وب است، در این حالت با استفاده از خاصیت radius می توان لبه های تیز فرم ها را به صورت گرد شده و نرم درآورد، البته این قابلیت در تمام مرورگرها و به یک نحو پشتبانی نمی شود، ولی نسخه های به روز اکثر مرورگرها (که از css3 پشتیبانی می کنند)، آن را به خوبی اجرا می کنند، به مثال زیر توجه کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد فرم های تعاملی با css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.text-field {
    border:1px solid #CCC;
    border-radius:4px;    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;
    padding:4px;
    outline:0px;
}
.text-field:focus {
    border-color:#F60;
    background-color:#CCC;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="text" class="text-field" />
</form>
</body>
</html>

توضیح:
- همانطور که ملاحظه می کنید، در کلاس بالا برای تعریف ویژگی های radius از مقادیر متفاوت استفاده کرده ایم، این کار به این جهت است که مرورگرهای مختلف، هر کدام شیوه مخصوص خود را در پردازش این خاصیت دارند و برای سازگاری با آنها، ناچاریم یک عنصر را به چند روش تعریف کنیم.
- در مثال بالا علاوه بر radius، از ویژگی سایه(shadow) که مربوط به css3 است نیز استفاده کرده ایم، با این کار یک افکت سایه مانند به کد خود اختصاص می دهیم.
- خاصیت outline که خط بیرونی حاشیه فیلد را مشخص می کند از این جهت با مقادیر صفر در نظر گرفته شده است که در برخی مرورگرهای مبتنی بر AppleWebKit (مانند سافاری، گوگل کروم و...)، در هنگام کلیک در فیلد، حاشیه ای مستطیلی در اطراف آن ایجاد می شود، برای از بین بردن و گرد کردن این حاشیه از outline با مقادیر صفر استفاده کرده ایم.
- اگرچه برخی از مرورگرها (مانند اینترنت اکسپلورر نسخه 8 و ماقبل) از ویژگی های radius و shadow پشتیبانی نمی کنند، اما چندان جای نگرانی نیست، چرا که فرم شما بدون هیچ مشکل مهمی، همچنان کار خواهد کرد، با این تفاوت که کاربران این گونه مرورگرها نمی توانند از جلوه های بصری و تعاملی آن استفاده کنند.

کد و پیش نمایش آنلاین

در زیر کامل شده مثال های بالا را به صورت کد و پیش نمایش آنلاین قرار داده ایم که می توانید از آن استفاده کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد فرم های تعاملی با css</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    direction:rtl;
    font-size:12px;
}
.text-field{
    border:1px solid #CCC;
    border-radius:4px;    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    box-shadow:2px 2px 3px #666;    
    -moz-box-shadow:2px 2px 3px #666;
    -webkit-box-shadow:2px 2px 3px #666;
    padding:4px;
    outline:0px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;    
}
.text-field:hover{
    border-color:#F60;
}
.text-field:focus{
    border-color:#F60;
    background-color:#CCC;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="text" class="text-field" /><br /><br />
<textarea cols="50" rows="10" class="text-field">
</textarea><br /><br />
<input type="checkbox" class="text-field" /><br /><br />
<select class="text-field">
<option value="">-- انتخاب --</option>
<option value="آموزش طراحی وب">آموزش طراحی وب</option>
<option value="آموزش برنامه نویسی وب">آموزش برنامه نویسی وب</option>
</select><br /><br />
<input type="submit" value="ارسال" class="text-field" />
</form>
<hr />
برای اینکه جلوه های css3 به طور کامل قابل استفاده باشند، خاصیت ها باید توسط مرورگر پشتیبانی شوند، به جزء اینترنت اکسپلورر نسخه 8 و ماقبل، سایر مرورگرهای استاندارد وب، در نسخه های جدید خود به خوبی از این قابلیت ها پشتیبانی می کنند.
</body>
</html>

پیش نمایش

دسته بندی: مهارتهای وب » طراحی وب

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
» طراحی باکس جستجو با فتوشاپ و CSS
» طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
» نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS

نظرات (۲۰ یادداشت برای این مطلب ارسال شده است)

یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.

نویسنده: hosin

زمان: ۱۰:۴۱:۲۴ - تاریخ: ۱۳۹۱/۰۵/۱۹

salam man site shoma ro khili dost daram aliye

نویسنده: فریبا

زمان: ۱۵:۰۰:۱۵ - تاریخ: ۱۳۹۱/۰۵/۱۹

سلام
مثل همیشه عالی هستید.
سوال: میشه توضیحی هم در مورد دکمه های جستجو ( مثل جستجوی سایت خودتون ) داشته باشید؟
ممنون.

پاسخ:

سلام
ممنون، نظر لطف شماست.
دکمه های جستجو ماهیتی متفاوت ندارند و مانند سایر عناصر فرم های وب هستند، دکمه ارسال از نوع input و submit و فیلد جستجو از نوع input و text است، منتها با کلاس های css و المان های تصویری، به طور دقیق تنظیم شده اند، با دقت در سورس کد سایت ملاحظه خواهید کرد که برای دکمه ارسال یک عکس ذره بین کوچک به عنوان پس زمینه تنظیم شده و برای فیلد جستجو، تصویری دیگر با همپوشانی کامل با دکمه ارسال؛ به این ترتیب از دید کاربران این یک فیلد جستجو است، ولی از دید برنامه نویسان این یک فرم وب با یک فیلد متنی و یک دکمه ارسال است.

نویسنده: فریبا

زمان: ۲۱:۱۸:۰۳ - تاریخ: ۱۳۹۱/۰۵/۲۰

سلام
سوال: می خوام فرمی بسازم که عنوان تکست فیلدها از یک طرف تراز شوند و خود تکست فیلدها هم از طرف دیگر و همچنین کل فرم یعنی المنتهای فرم در وسط divای که برای فرم در نظر گرفتم قرار بگیرند یعنی در هر مرورگری وسط باشند؛ چه کدهایی ( CSS و HTML ) باید بنویسم؟
ممنون.

پاسخ:

سلام
پاسخ دقیق به سوال شما نیازمند طرح یک مطلب آموزشی جداگانه است، اما به اختصار باید از label در فرم های خود استفاده کنید، مثال:

<label for="name" dir="rtl">نام:</label>
<input type="text" name="name" id="name" />

برای ترازبندی آنها نیز از ویژگی های css یا html مانند dir ، display ، float و... استفاده نمائید.
برای تنظیم یک بلاک در وسط صفحه از ویژگی margin-left و margin-right با مقادیر auto برای کلاس css آن استفاده کنید:
تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css
در مرورگر IE6 نیز از دستورات شرطی و تگ <center> استفاده کنید:

<!--[if IE 6]>
<center>
<![endif]-->
بلاک div
<!--[if IE 6]>
</center>
<![endif]-->

نویسنده: farhad

زمان: ۱۶:۲۱:۲۷ - تاریخ: ۱۳۹۱/۰۷/۲۳

salam dadash
enghad doad kardama yani damet garm
ba in sitet mahshare

نویسنده: امیر محمد

زمان: ۲۲:۰۱:۱۰ - تاریخ: ۱۳۹۲/۰۲/۳۱

دستت طلا

نویسنده: حمیدرضا

زمان: ۰۰:۰۹:۲۹ - تاریخ: ۱۳۹۲/۰۳/۱۴

سلام
عادت به نوشتن نظر ندارم
اما برای این مطلب خوب و کارآمدتون لازم بود تشکر کنم
با تشکر فراوان

نویسنده: حسن دهقانی

زمان: ۱۲:۲۷:۵۴ - تاریخ: ۱۳۹۲/۰۴/۰۶

سلام
من امروز از سایت شما دیدن کردم
واقعا جای تشکر داره من دست شما استار گرامی را که بدون هیچ توقعی آموزش رایگان در اختیار همه قرار می دهید می بوسم
من که خیلی حال کردم و چیزائی که تا حالا دیده بودم اینجا لمسش کردم
من فعلا سوالی ندارم حتما مزاحمتون می شم
با تشکر

پاسخ:

سلام
نظر لطف شما است.

نویسنده: علی شفیع زاده

زمان: ۱۸:۵۱:۰۲ - تاریخ: ۱۳۹۲/۰۴/۱۴

با سلام
عالی بود
خیلی استفاده کردم.
تشکر از سایت خوب و پر محتواتون
با آرزوی بهترین ها

نویسنده: گرافيك پلاس

زمان: ۰۹:۳۶:۴۱ - تاریخ: ۱۳۹۲/۰۵/۲۷

خيلي عالي بود. فقط يه سوال دارم. در خصوص اعمال hover به يك فيلد چطور ميشه يك افكت slow motion به اون داد. مثلا وقتي كه موس را روي يك فيلد مي بريم رنگ آن يك دفعه تغيير نكنه و به آرامي رنگ آن تغيير كنه. نمونش رو تو سايت دي بي اس تم در قسمت خريد قالب مي شه ديد.
ممنون

پاسخ:

سلام
اعمال افکت به صورت انیمیشن در وب یا از طریق جاوا اسکریپت و یا فریم ورک جی کئوری صورت می گیرد، به طور مثال از متد setTimeout می توان یک عملیات را در چند فریم و با وقفه های کوتاه انجام داد:

<script type="text/javascript">
function ChangeColor(id, frame){
	var color = '#CCC';
	switch(frame){
		case 1:
		color = "#FFECEC";
		break;
		case 2:
		color = "#FDD";
		break;
		case 3:
		color = "#FFC6C6";
		break;
		case 4:
		color = "#FFB3B3";
		break;
		case 5:
		color = "#FF9F9F";
		break;
		case 6:
		color = "#FF9393";
		break;
		case 7:
		color = "#FF8282";
		break;
		case 8:
		color = "#FF6F6F";
		break;
		case 9:
		color = "#F55";
		break;
		case 10:
		color = "#FF2F2F";
		break;
	}
	if(frame <= 10){
		frame++;
		document.getElementById(id).style.backgroundColor = color;
		setTimeout("ChangeColor('" + id + "', " + frame + ");", 100);
	}
	else if(frame == 12){
		document.getElementById(id).style.backgroundColor = color;		
	}
}
</script>
<input id="your-id" type="text" onmouseover="ChangeColor(this.id, 0);" onmouseout="ChangeColor(this.id, 12);">

نویسنده: محمود

زمان: ۲۳:۰۰:۲۴ - تاریخ: ۱۳۹۲/۰۶/۲۲

سلام خسته نباشید
من میخواهم به وسیله ی css کلمه ی ورود را از فرم زیر حذف کنم. به صورتی که بکگراندی که برایش در نظر گرفته ام حذف نشود. با تشکر

<button class="car" type="submit">
 ورود
</button>

پاسخ:

سلام
می توانید از نمونه کد زیر استفاده کنید:

<style type="text/css">
.hidden{
	height:25px;
	width:100px;
	text-indent:-9999px;
	* html button{
		font-size:0;
		display:block;
		line-height:0
	}/* ie6 */
	*+html button{
		font-size:0;
		display:block;
		line-height:0
	}/* ie7 */	
}
</style>
<button class="hidden" type="submit">ورود</button>

نویسنده: محمود

زمان: ۰۰:۵۷:۰۵ - تاریخ: ۱۳۹۲/۰۶/۲۳

یی سوال هم داشتم. البته به این بحث مربوط نیست در سایت هم جستجو کردم به نتیجه نرسیدم.
می خواستم ببینم itemprop چی هست به چه دردی می خورد و چطوری میشه تگی که کلاس ندارد و itemprop را دارد با css بهش استایل داد. مثل کد زیر:

<div itemprop="description"></div>

متشکر

پاسخ:

itemprop یا Item Property به معنی توصیفی برای تعیین هدف از به کاربردن تگ ها در HTML است (در نسخه 5 افزوده شده)، این ویژگی خواص محتوای هر تگ را مشخص تر می کند.
به نظر نمی رسد از طریق این ویژگی بتوانید با CSS استایلی به تگ اختصاص دهید، چون selector بدین منظور در CSS پیش بینی نشده است (باید از کلاس یا آی دی استفاده کنید).

نویسنده: امیر نجارپور

زمان: ۱۱:۳۸:۱۱ - تاریخ: ۱۳۹۲/۰۸/۲۷

عالی بود استاد!!
دنبال چنین مطلبی بودم.
بازم ممنون از آموزشی که دادین.

نویسنده: امین

زمان: ۱۶:۲۲:۴۷ - تاریخ: ۱۳۹۳/۰۴/۲۴

واقعا زدی وسط خال
همون چیزی که دنبالش بودم
خیلی عالی بود
واقعا ممنونتم

نویسنده: محمد

زمان: ۱۳:۱۰:۴۹ - تاریخ: ۱۳۹۳/۰۹/۲۲

فقط یه چیز میگم که عالیییی بود.... من اصلا نمیدونستم با سی اس اس هم میشه کاری کرد دکمه ها رنگ هاشون عوض شه...... خیلی عالییی.. فقط با سی اس اس میشه کاری کرد که مثلا موس روی دکمه ای میره و اون دکمه مثل به انیمیشن خیلی کوتاه جاش عوض شه؟

پاسخ:

چنین امکانی با CSS3 میسر است (باید در وب جستجو کنید)، منتها برای راحتی و سازگاری بیشتر می توانید از jQuery استفاده کنید.

نویسنده: محمد

زمان: ۱۴:۱۱:۳۵ - تاریخ: ۱۳۹۳/۱۰/۳۰

سلام.... شما راهی واسه افزایش سلیقه در طراحی قالب دارین؟؟؟ گفتم شاید تو وب زیاد کار میکنین یه راهی باشه.

پاسخ:

سلام
منظورتان از افزایش سلیقه مشخص نیست! در مجموع شناخت هارمونی رنگ ها و داشتن اطلاعات و تجربه در زمینه گرافیک + دیدن و بررسی قالب های مختلف با رنگ بندی و اهداف متفاوت می تواند کمک کند.

نخست

قبلی

بعدی

آخر

صفحه 1 از 2

لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.

آخرین دیدگاه ها

برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.

مهدی

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم

۰۹:۵۵:۵۰ ۱۳۹۹/۰۴/۲۳

سلماسی

در:

پاسخ به سوالات و حل مشکلات وبلاگ نویسان

سلام ایا اگر از وبسایت شخصی کسی بازدید کنیم صاحب وبسایت شماره ی ما را می بیند

۲۱:۳۱:۵۳ ۱۳۹۹/۰۴/۲۲

mahdi

در:

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

سلام استاد اگه براتون زحمتی نیست یه نگاه دیگه بهش بندازید ، الان ریموو ادیت درست هستن فقط برای نمایش کلیشون که وقتی رفرش میکنیم...

۱۹:۱۳:۱۵ ۱۳۹۹/۰۴/۲۲

mahdi

در:

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

سلام استاد عزیز ، میتونید یه نمونه که فقط با جاوا اسکریپت کار شده نه با فریمورکاش بهم معرفی کنید ببینم؟ من هرچی گشتم پیدا...

۱۴:۴۶:۲۴ ۱۳۹۹/۰۴/۲۲

mahdi

در:

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم، دو تا سوال دارم ممنون میشم راهنماییم...

۱۲:۰۵:۰۷ ۱۳۹۹/۰۴/۲۲

اریا

در:

توابع کار با آرایه در PHP - بخش اول

سلام و درود بزرگوار چه دستوری باید بنویسیم تا فقط مقدارهای خاصی از ارایه بتونیم نمایش بدیم. مثلا یک ارایه 6 خونه ای...

۱۶:۴۷:۳۱ ۱۳۹۹/۰۴/۲۰

کافه کتاب

در:

نحوه تنظیم لیست با تگ ul li در CSS

سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون

۱۴:۵۱:۴۳ ۱۳۹۹/۰۴/۲۰

سجاد

در:

نحوه متحرک ساختن متن با تگ marquee در HTML

دمتون گرم. خیلی زحمت کشیدید

۱۳:۴۳:۱۱ ۱۳۹۹/۰۴/۲۰

KhashayarPrk

در:

آموزش کاربردی عبارات با قاعده (Regular Expressions)

سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.

۱۳:۱۳:۴۷ ۱۳۹۹/۰۴/۲۰

Oliver

در:

ایجاد جدول با تگ table در HTML

چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم

۱۶:۰۷:۱۷ ۱۳۹۹/۰۴/۱۸

محمد

در:

ایجاد لینک دانلود مدت دار با PHP و MySQL

با عرض سلام ببخشید چطوری میتونم واسه اشتراک کاربر انقضا بزارم مثلا یک ماه داخل دیتابیس ردیف تایم رو درست کردم البته تاریخ رو تبدیل...

۱۹:۱۴:۵۹ ۱۳۹۹/۰۴/۱۵

آیدا

در:

نحوه تنظیم لیست با تگ ul li در CSS

سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...

۲۲:۴۷:۴۴ ۱۳۹۹/۰۴/۱۴

علی

در:

نحوه ایجاد لینک در HTML

سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...

۰۹:۳۰:۴۹ ۱۳۹۹/۰۴/۱۴

sina2000

در:

نحوه نمایش متن و تصاویر اتفاقی در PHP و MySQL

با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...

۱۵:۰۳:۵۱ ۱۳۹۹/۰۴/۱۳

محمد امین

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...

۱۸:۲۸:۲۴ ۱۳۹۹/۰۴/۱۱

ترنم

در:

ساخت منوی کشویی با تگ ul li و CSS

سلام وقتتون بخیر ببخشید من کدهای مربوط منو و زیر منو رو نوشتم ولی موقع اجرا منوی اصلی رو میاره ولی زیر منوها رو...

۱۱:۰۶:۲۹ ۱۳۹۹/۰۴/۱۱

در:

پاسخ به سوالات و حل مشکلات وبلاگ نویسان

سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟

۲۰:۳۱:۰۸ ۱۳۹۹/۰۴/۰۷

amir

در:

حذف مقادیر از MySQL با دستور DELETE

سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...

۰۱:۴۸:۰۵ ۱۳۹۹/۰۴/۰۷

محمدباقر حسیبیان

در:

آموزش MySQL، سیستم مدیریت پایگاه داده

من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...

۱۶:۴۲:۳۸ ۱۳۹۹/۰۴/۰۶

...

در:

چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟

سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...

۱۷:۲۶:۴۲ ۱۳۹۹/۰۴/۰۵

مجتبی

در:

استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP

سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟

۱۳:۰۴:۲۳ ۱۳۹۹/۰۴/۰۴

متین

در:

اعتبار سنجی فرم های وب با جاوا اسکریپت

سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.

۰۱:۵۰:۰۵ ۱۳۹۹/۰۴/۰۴

mahdi

در:

چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟

سلام استاد عزیز و گرامی امیدوارم که حالتون خوب باشه ، اگه براتون ممکنه لطفا یه آموزش خوب در زمینه وردپرس بهم معرفی کنید ،...

۲۱:۴۸:۱۳ ۱۳۹۹/۰۴/۰۳

امید

در:

آشنایی با HTML، زبان پایه کدنویسی وب

در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد

۱۹:۰۶:۵۶ ۱۳۹۹/۰۴/۰۳

ali

در:

مخفی کردن عناصر وب با CSS

با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...

۱۸:۴۷:۲۲ ۱۳۹۹/۰۴/۰۳

علی

در:

IP چیست و چه کاربردی دارد؟

سلام و تشکر از زحمات ارزشمند شما احتراما بنده امروز از یک شماره تلفن ثابت از طریق یک رایانه و یک موبایل به طور...

۱۸:۰۱:۱۰ ۱۳۹۹/۰۴/۰۳

oscar

در:

کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)

درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...

۱۵:۵۹:۳۲ ۱۳۹۹/۰۴/۰۲

علی

در:

کاربرد متاتگ refresh در صفحات وب (HTML)

با سلام چطور میشه فقط یک صفحه مورد نظرمون رفرش بشه نه همه صفحات سایت

۰۰:۰۳:۴۱ ۱۳۹۹/۰۳/۳۱

Farzad

در:

محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess

الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...

۱۸:۵۶:۲۱ ۱۳۹۹/۰۳/۳۰

Farzad

در:

محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess

سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...

۱۳:۳۳:۴۰ ۱۳۹۹/۰۳/۳۰

شیما طیبی

در:

فوت و فن وبلاگ نویسی حرفه ای چیست؟!

سلام خیلی مطلب مفیدی بود . همیشه به وبلاگ نویسی به چشم یه کار خسته کننده نگاه میکردم ولی خب یه مقدار نظرم تغییر کرد....

۲۳:۵۲:۳۲ ۱۳۹۹/۰۳/۲۹

احسان

در:

توابع (Functions) در جاوا اسکریپت (JavaScript)

سلام من یک کد اسکریپت دارم که به صورت عددی تبدیل شده است. میخواستم بپرسم چطوری میتونم اسکریپت به حالت اولیه نوشته شده برگردانم و...

۲۱:۰۲:۱۳ ۱۳۹۹/۰۳/۲۷

علی

در:

محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess

ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...

۰۰:۳۷:۴۶ ۱۳۹۹/۰۳/۲۷

محمد

در:

دستور switch و case در PHP

سلام مجدد ببخشید طبق فرمایش شما من در دیتابیس جدولی ساخته بودم فقط مشکلم اینجاست چطوری میتونم توسط کوکی یا سیشن با تابع دیت انقضا...

۲۲:۳۸:۰۳ ۱۳۹۹/۰۳/۲۵

محمد

در:

دستور switch و case در PHP

با عرض سلام ببخشید چطوری میشه واسه اشتراک خریدن زمان ۱ ماهه گذاشت که بعد از گذشت ۱ ماه پیام بده دوباره اشتراک تهیه کنید...

۱۳:۱۳:۵۵ ۱۳۹۹/۰۳/۲۵

در انتظار بررسی: ۴

آگهی

آگهی

آموزش برنامه‌نویسی PHP

آموزش جی کوئری jQuery

● آموزش‌های رایگان