::: در حال بارگیری لطفا صبر کنید :::Loading , please wait ...

انجمن کدستانMoisrex

MoisrexMoisrex.rozblog.com
زمان جاریtime : شنبه 16 تیر 1403 - 7:27 بعد از ظهر
نام کاربریusername : پسوردpassword : یاor عضویتregister | رمز عبور را فراموش کردمForgot your password?
شما در سایت ما ثبت نام نکرده اید و یا وارد اکانت کاربری خود نشده اید. از شما خواهشمند هستیم You are not log in to site. Please وارد شویدlogin یاor ثبت نام کنیدregister .
طراحی رسپانسیو با سی اس اس css3
تعداد بازدیدvisits : 498
majid آفلاین



ارسال هاAnswers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWirnings : -1
حمایت کردهThanks : 161
حمایت شدهThanked : 191
طراحی رسپانسیو با سی اس اس css3

خوب بریم سراغ آموزش به همراه مثال (بهتره برا آموزش فیلم آموزش طراحی قالب در 20 دقیقه کدستان رو دیده باشید)

http://moisrex.rozblog.com/post/3476/make-theme-in-20-minutes.html

حالا اموزش:

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

قالب زمانی که در مانیتورهای با پهنای بیشتر از ۱۰۲۴ باشد به صورت معمولی پهنای ۹۸۰ خواهد داشت. مدیا کوری برای چک کردن اینکه آیا محدوده ی دید کمتر از ۹۸۰ پیکسل است یا خیر استفاده شده است، سپس قالب به پهنای کنونی سازگار می شود و قالب پهنای متغییر پیدا خواهد کرد. اگر محدوده ی دید کمتر از 650 پیکسل باشد، قالب به صورت تک ستونه خواهد شد.

حال شما فایل های سی اس اس و اچ تی ام ال را دارید

html

کد:

">

خانه انجمن آرشيو ثبت نام ورود تماس باما

[Menu_Title][Menu_Code]

[Menu_Title][Menu_Code] [Menu_Title][Menu_Code]

تمامي حقوق سايت محفوظ بوده و متعلق به مي باشد|طراح قالب

css

کد:

html::-webkit-scrollbar { width:12px; background-color:#f0f0f0;}html::-webkit-scrollbar-thumb { background-color: #33CCFF; width:12px; height:30px;}html::-webkit-scrollbar-thumb:hover { background-color: #0099FF;}::selection { background: #EFEFEF; color: #FF00CC; word-break: break-all;}::-moz-selection{ background: #EFEFEF; color: #FF00CC; word-break: break-all;}input,select {border-style: none; border-color: inherit; border-width: medium; background: #b4b4b4; color: #555; font-family: B Yekan,'B Yekan',tahoma; font-size: 11px; padding: 7px; margin-bottom: 4px; border-radius: 5px; -webkit-box-shadow: 0px 2px 0px #9f71c6,inset 0px 0px 1px rgba(255,255,255,0);}textare{border-style: none; border-color: inherit; border-width: medium; background: #b4b4b4; color: #555; font-family: B Yekan,'B Yekan',tahoma; font-size: 11px; padding: 7px; margin-bottom: 4px; border-radius: 5px; -webkit-box-shadow: 0px 2px 0px #9f71c6,inset 0px 0px 1px rgba(255,255,255,0);}button,input[type=button],input[type=submit]{ background:#9f71c6; border:1px #7e409e solid; border-bottom:3px #7e409e solid; border-radius:5px;font:12px b yekan; color:white;cursor:pointer;padding:5px 5px 5px 5px; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; -khtml-transition:all 0.2s ease; -webkit-transition:all 0.2s ease; transition:all 0.2s ease;}

body{ direction: rtl; font:12px B Yekan; padding: 0; margin: 0; background: #f5f5f5;

}a{ color:black; text-decoration: none;}a:hover{ color: #33CCFF;}.center{ width: 950px; border: 2px #c5c5c5 dashed; border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; margin: 30px 0; padding: 10px; background: #ececec;}.float_right{ float: right; width: 200px;}.clear{ clear:both;}.center_no_float{ width: 550px; float: right;}.left_float{ float: left; width: 200px;}/* menu */.menu{ padding: 6px; margin: 10px 5px;

}.menu img{ border: 2px #FF6633 dashed; opacity:0.8; border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -webkit-border-radius: 5px; -webkit-transition: all 0.6s ease-in-out; -moz-transition:all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; max-width: 450px;}.menu img:hover{ opacity:5.0; cursor: auto;}.title_menu{ text-align: right; font: 12px B Yekan; padding: 5px; background: #d3d3d3; background: -moz-linear-gradient(top, #ffc9600%, #ffa800 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc960), color-stop(100%,#ffa800)); border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; margin-bottom:5px;}.code_menu{ background: #fff; border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -webkit-border-radius: 3px; padding: 5px; text-align: right;}/* header */.header{ list-style: none; margin: 0px; padding: 0px; text-align: center;}.header li{ display: inline-block;}.header a{ padding: 10px; display: block; background: #eee; border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -o-border-radius:0 0 5px 5px; -ms-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border: 1px #ccc solid; border-top:none;}.header a:hover{ background: #28A6CA; background: -moz-linear-gradient(top, #43C4E9 0%, #28A6CA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43C4E9), color-stop(100%,#28A6CA)); color: white; text-shadow: 1px 1px 0px #28A6CA;}/* footer */.footer{ background: #66CCFF; width: 750px; border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; border: 1px #00CCFF solid; padding: 10px; color: #FF00FF;

}.footer a{ color: #FF3333;}.footer a:hover{ color: #FF9933;}

ابتدا:

استفاده از Media Queries به وسیله جاوا اسکریپت

اینترنت اکسپلورر ۸ و نسخه های پایین تر آن از CSS3 , Media Query پشتیبانی نمی کند،‌برای اینکه بتوانیم سایت واکنشگرای خود را به راحتی در مرورگر اکسپلورر هم بدون مشکل اجرا کنید،‌می توانید از این فایل جاوا اسکریپت css3-mediaqueries.js استفاده کنید.

نکته: کد زیر را باید در تگ head مربوط به صفحه html خود وارد کنید.

یک فایل css جدید برای Media Queries ایجاد کنید و به صورت زیر در صفحه HTML خود آدرس آن را وارد نمایید.

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

کد:
/************************************************************************************smaller than 980*************************************************************************************/@media screen and (max-width: 980px) {

/* pagewrap */ .center { width: 92%; }

.center_no_float { width: 56%; }

/* sidebar */ .left_float { width: 22%; } .float_right { width: 22%; } #sidebar .widget { padding: 8% 7%; margin-bottom: 10px; }

/* embedded videos */ .video embed, .video object, .video iframe { width: 100%; height: auto; min-height: 300px; }

}

/************************************************************************************smaller than 650*************************************************************************************/@media screen and (max-width: 650px) {

/* header */ #header { height: auto; }

/* content */ .center_no_float { width: auto; float: none; margin: 20px 0; }

/* sidebar */ .left_float { width: 100%; margin: 0; float: none; } .float_right { width: 100%; margin: 0; float: none; }

#sidebar .widget { padding: 3% 4%; margin: 0 0 10px; }

/* embedded videos */ .video embed, .video object, .video iframe { min-height: 250px; }

}

/************************************************************************************smaller than 560*************************************************************************************/@media screen and (max-width: 480px) {

/* disable webkit text size adjust (for iPhone) */ html { -webkit-text-size-adjust: none; }

/* main nav */ #main-nav a { font-size: 90%; padding: 10px 8px; }

}*************/img/**img { max-width: 100%; height: auto; width: auto\9; /* ie8 */}

خوب

اینم تصویری از نمایش در اندازه های کووچکتر:

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

لطفا نظراتتونو راجب اموزش بگید

اینم لینک دانلود فایل های اماده:

http://uplod.ir/bsp5kd99nj38/New_folder.zip.htm

تذکر:

این اموزش صرفا جهت اموزش کدنویسان و کاربران مبتدیست

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

***************

ببخشید آموزش عجله ای بود اگه مشکلی داشت بگید



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



جمعه 03 مرداد 1393 - 13:16
وب کاربرUser's blog ارسال پیامsend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شدهThanks : سپاس هاThanks (1) : sharifpour -
mrgraph آفلاین



ارسال‌هاAsnwers : 141
عضویتRegistration date : 9 /4 /1393
حمایت کردهthanks : 25
حمایت شدهThanked : 38
پاسخAnswer 1 : طراحی رسپانسیو با سی اس اس css3

خسته نباشی

عالی بود

جمعه 03 مرداد 1393 - 13:31
ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
حمایت شده حمایت شده: سپاس هاThanks (1) : majid -
admin آفلاین


مدیریت

ارسال‌هاAsnwers : 7209
عضویتRegistration date : 18 /10 /1390
حمایت کردهthanks : 4361
حمایت شدهThanked : 3281
پاسخAnswer 2 : طراحی رسپانسیو با سی اس اس css3

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

اگر همونو بذاری مشکل داره ولی وقتی شما میگی آموزش ...

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

خوب یا ندی بهتره ...

با تشکر


!Whatever you DISRESPECT, you'll never have the ability to ACCESS
جمعه 03 مرداد 1393 - 15:14
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
majid آفلاین



ارسال‌هاAsnwers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWarnings : -1
حمایت کردهthanks : 161
حمایت شدهThanked : 191
پاسخAnswer 3 : طراحی رسپانسیو با سی اس اس css3

نقل قول از moisrex

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

اگر همونو بذاری مشکل داره ولی وقتی شما میگی آموزش ...

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

خوب یا ندی بهتره ...

با تشکر

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

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

خدمت چیه؟اینکه با کمترین قیمت همون کاررو بکنه .

برا من فرقی نداره چیزی هم ازم کمنمیشه نگفتمم استفاده نکنید گفتم سو استفاده نکنید



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



جمعه 03 مرداد 1393 - 15:41
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
fakher آفلاین



ارسال‌هاAsnwers : 77
عضویتRegistration date : 21 /10 /1391
تعداد اخطارWarnings : -4
حمایت کردهthanks : 3
حمایت شدهThanked : 18
پاسخAnswer 5 : طراحی رسپانسیو با سی اس اس css3

بهتره داداش bootstrap یادبگیری


چهارشنبه 26 شهریور 1393 - 16:55
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport
majid آفلاین



ارسال‌هاAsnwers : 925
عضویتRegistration date : 16 /5 /1391
تعداد اخطارWarnings : -1
حمایت کردهthanks : 161
حمایت شدهThanked : 191
پاسخAnswer 6 : طراحی رسپانسیو با سی اس اس css3

داداش شما بزار ما خوشحال میشیم چیزی یاد بگیریم



بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی



چهارشنبه 26 شهریور 1393 - 16:58
وب کاربرUser's blog ارسال پیامSend p.m. نقل قولReply سپاس گزارمThanks گزارشReport



moisrex
درباره ماAbout us لینک های ماOur links کلمات کلیدیKeywords
انجمن تخصصی کدستان ، ساخته شده توسط فردی با نام مستعار Moisrex می باشد.This forum designed by a person who called Moisrex.

ایمیلE-mail : Moisrex @ Gmail.com
کدستان,انجمن کدستان,کدنویسی,انجمن پشتیبانی,فروم,رزبلاگ,آموزش کدنویسی,درخواست کد
تمامی حقوق این انجمن مربوط به همین انجمن می باشد | طراحی قالبCopyright (c) By Moisrex , All rights reserved | Desiger : Moisrex