majid
![](http://8pic.ir/images/3uqed7o2c777cehdrt9o.png)
ارسال ها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 تذکر: این اموزش صرفا جهت اموزش کدنویسان و کاربران مبتدیست
بعضیا فکرمیکنن طراح شدن قالب میسازن میزارن برا فروش از کدها و آموزشهای اماده دیگر سایت ها استفاده میکنن استفاده از این آموزش در این راستا حرام است
*************** ببخشید آموزش عجله ای بود اگه مشکلی داشت بگید
بعضیا قدرت خدا با صفحه کلید و موس به دنیا میان و خدا دادی اوستان :دی
|