بیشترین بازدید

طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
ساخت وب سرویس با استفاده از PHP و SOAP

به عنوان توسعه دهنده نرم افزار، توانایی توسعه نرم افزار و سرویس برای محدوده گسترده ای از پلتفرم ها یک مهارت ضروری است. اما برای تحقق این موضوع نمی توان انتظار داشت که همه از یک پلتفرم یا یک زبان برنامه نویسی استفاده کنند یا اینکه همه پلتفرم ها و زبان ها را پوشش داد، این یک کار نشدنی است. اگر تنها یک استاندارد وجود داشت که به ما اجازه می داد تا کدهای نرم افزارمان را یکبار بنویسیم و دیگران با نرم افزارهای خودشان به آسانی از طریق شبکه با آن ارتباط برقرار می کردند چقدر عالی می شد. خب خوشبختانه وجود دارد و نامش هم SOAP است. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

برای ثبت اطلاعات کاربران در پایگاه داده سایت، باید با استفاده از PHP اطلاعات ارسال شده توسط کاربر را دریافت کنیم و با استفاده از دستورات MySQL ذخیره کنیم. جهت اجرای کدهای PHP و MySQL در ویندوز باید نرم افزار WAMP یا XAMP را در سیستم خود نصب کنید. با استفاده از این نرم افزار یک لوکال هاست مجازی در سیستم شما شبیه سازی می شود تا کدهای PHP را اجرا و پایگاه داده MySQL را ایجاد کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
ساخت وب سرویس RESTful با استفاده از PHP

Representational State Transfer یک سبک معماری در وب سرویس است که در آن از آدرس ها برای دستیابی به منابع استفاده می شود. داده ها و توابع در معماری RESTful منابع نامیده می شوند به این جهت که داده ها و توابع در واقع آنچیزی هستند که ما می خواهیم از طریق سرویس به آن متصل شویم. در این پست می خواهیم نشان دهیم که چطور می توان یک وب سرویس RESTful را بدون استفاده از هیچ نوع Framework خاصی در PHP ایجاد کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
آموزش نصب و استفاده از Composer

Composer ابزاری برای مدیریت وابستگی در پروژه های PHP می باشد. زمانی که شما تصمیم می گیرید تا یک پروژه PHP را ایجاد کنید قطعا با مسائلی برخورد خواهید کرد که راه حل آنها استفاده از کتابخانه ها یا پکیج های موجودی است که برای این مساله ها ارائه شده اند زیرا با این کار در فاکتور های مهمی همچون زمان و هزینه صرفه جویی کرده اید و به عبارت دیگر چرخ را از نو اختراع نمی کنید. از این دست مسائل می توان به: اعتبار سنجی کاربر مدیریت پایگاه داده مسیریابی درخواست اشاره کرد. اما در این میان کتابخانه ها یا پکیج های موجود هم دارای وابستگی های خاص خود هستند و به عنوان توسعه دهنده PHP شما باید انرژی مضاعفی را برای یافتن و تطبیق این وابستگی ها صرف کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
ساخت WSDL با استفاده از PHP

در قسمت قبل ایجاد یک اپلیکیشن سازگار را با استفاده از پروتکل SOAP بررسی کردیم. همینطور نشان دادیم که ساخت سرور و کلاینت SOAP با کتابخانه NuSOAP چقدر آسان است اما در این قسمت می خواهیم WSDL را که در هنگام کار با SOAP حتما استفاده خواهد شد را توضیح دهیم. در اینجا ما در ارتباط با فایل های WSDL و اینکه چطور می توان از آنها استفاده کرد بحث خواهیم کرد همچنین به شما نشان می دهیم که به چه صورت می توان فایل WSDL را با NuSOAP ایجاد کنید و آن را با مثال های سرور و کلاینت SOAP که در قسمت قبل ایجاد کردیم ترکیب کنیم. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟

سوالات

اضافه کردن یک ستون جدید به جدول موجود در Migration لاراول

چطور می توانم یک ستون به جدولی که از قبل با استفاده از فریموورک لاراول ایجاد شده است اضافه کنم؟من فایل Migration رو به صورت زیر ویرایش کردم:<?php public function up() { Schema::create('users', function ($table) { $table->integer("paid"); }); }در ترمینال هم دستور php artisan migrate:install و migrate رو اجرا کردم، اما ستون اضافه نشده است.چطور می توانم ستون مورد نظرم را اضافه کنم؟
چک کردن موجود بودن یک رکورد در Laravel

من تازه کار با فریممورک Laravel رو شروع کردم. چطور می توانم بررسی کنم که یک رکورد موجود است یا خیر؟$user = User::where('email', '=', Input::get('email'));چطور می می تونم بررسی کنم که user$ شامل رکورد هست یا نه؟
لاراول 4: چطور می توان در Blade آدرس صفحه را دریافت کرد؟

من از لاراول نسخه 4 استفاده می کنم، چطور می توانم آدرس یک صفحه را دریافت کنم و در if@ استفاده کنم. می دونم که می توانم با استفاده از کد PHP زیر این کار را انجام دهم:<?php echo URL::current(); ?>اما در blade چطور می توان این کار را انجام داد؟
چطور می توان چندین شرط Where در Eloquent لاراول در نظر گرفت؟

من از Query Builder لاراول برای ایجاد گزارش استفاده می کنم و گزارشم دارای چندین شرط می باشد.شرط ها را به صورت زیر اعمال کردم اما به نظرم راه جالبی نیست.$results = User::where('this', '=', 1) ->where('that', '=', 1) ->where('this_too', '=', 1) ->where('that_too', '=', 1) ->where('this_as_well', '=', 1) ->where('that_as_well', '=', 1) ->where('this_one_too', '=', 1) ->where('that_one_too', '=', 1) ->where('this_one_as_well', '=', 1) ->where('that_one_as_well', '=', 1) ->get();آیا راه بهتری برای اعمال شرط ها وجود دارد؟
چطور می توان گزارش SQL که Query Builder لاراول آن را ایجاد می کند مشاهده کرد؟

کد زیر را در نظر بگیرید:DB::table('users')->get();من می خوام کد SQL که Query Builder بالا اجرا می کند را دریافت کنم به عنوان مثال در کد بالا کد SQL:SELECT * FROM usersتوسط Query builder اجرا می شود.
Eloquent: شمارش و تشخیص خالی بودن

آیا راهی برای تشخیص اینکه مجموعه بازگشتی از گزارش:$result = Model::where(...)->get() خالی است یا اینکه تعداد عناصر موجود در آن چقدر است وجود دارد؟من در حال حاضر از:!$result استفاده می کنم آیا راه درستی است؟در مورد:count($result)آیا همه موارد را پوشش می دهد؟ به عنوان مثال اگر result خالی باشد؟
لاراول 5: نمایش HTML در Blade

من یک رشته به صورت زیر دارم که شامل تگ HTML می باشد:$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'و می خواهم با استفاده از Blade نمایش بدم:{{$text}}اما خود رشته را چاپ می کند و تگ های HTML را رندر نمی کند. چطور می توانم HTML را با Blade در لاراول 5 نمایش بدم؟
ReactJSX: استفاده از Props بین کوتیشن

چطور می توان در JSX از یک مقدار props به عنوان مقدار attribute استفاده کرد؟به عنوان مثال:<img className="image" src="images/{this.props.image}" />و خروجی HTML آن به صورت زیر است:<img class="image" src="images/{this.props.image}">
ارتباط بین دو کامپوننت در React

اپلیکیشن من شامل یک لیست با فیلتر های آن و یک button برای تغییر layout می باشد. در حال حاضر از سه کامپوننت:</list></Filters></TopBar>استفاده می کنم. می خوام زمانی که تنظیمات در </Filters> تغییر کرد متدی در کامپوننت </list> برای بروزرسانی view اجرا شود.چطور میتونم بین این سه کامپوننت ارتباط برقرار کنم؟ آیا باید از مدل داده global برای انجام این کار استفاده کنم؟
Show یا Hide کردن عنصر در React

من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم. می خوام زمانی که کلیک کردم، div مربوط به نتایج نمایش داده شود.var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body);

طراحی صفحه اول سایت تبلیغات CSS

در این قسمت، ویژیگی های تگ های موجود در صفحه HTML را با استفاده از CSS تغییر خواهم داد تا هریک در موقعیت مناسب خود قرار گرفته و به ظاهر مورد نظرم دست پیدا کنم.

در ادامه مطلب همراه من باشید.

ویژیگی مهمی که در این قسمت با آنها آشنا خواهیم شد و استفاده خواهیم کرد عبارتند از:

display: هر تگ در html به صورت های مختلفی به نمایش در می آید به عنوان مثال: تگ p به صورت block نمایش داده می شود، به این معنی که هنگامی که عنصر p در صفحه قرار می گیرد، عنصر یا تگ دیگر نمی تواند در کنار تگ p قرار بگیرد و به پایین این تگ انتقال پیدا می کند. برای مثال دیگر می توان به تگ span اشاره کرد که به صورت inline نمایش داده می شود بدین معنی که این تگ در یک خط قرار می گیرد، و عناصر هم جوارش قادر خواهند بود تا در یک سطح کنارش قرار بگیرند البته تا جایی که محدودیت عرض به آنها اجازه بدهد. در CSS با استفاده از ویژگی display می توان حالات مختلف نمایش را به تگ ها اعمال کرد باز هم به عنوان مثال: می توان به تگ a، حالت نمایش block را اختصاص داد که به صورت یک تگ block نمایش داده شود یا یک تگ div را با اختصاص دادن مقدار table به این ویژیگی به صورت table نمایش داد.

float: از این ویژیگی برای کنار هم قرار دادن عناصر استفاده می شود، همانطور که از معنی این کلمه پیداست (شناور) با توجه به مقداری که برای این ویژیگی در نظر گرفته شده است عناصر از چپ یا راست شناور می شوند.

clear: این ویژیگی در ارتباط با ویژیگی float است و باعث لغو ویژیگی float می شود، به عنوان مثال هنگامی که به یک تگ ویژیگی float را اختصاص می دهید عناصر هم جوار تگ، به صورت شناور در کنارش قرار خواهند گرفت در صورتی که به تگ هم جوار خصوصیت clear با یکی از مقادیر ممکن اختصاص یابد متناسب با مقدار اختصاص یافته ویژیگی float لغو می شود.

width: با استفاده از این ویژیگی می توان عرض یک تگ یا عنصر را معین کرد.

height: با استفاده از این ویژیگی می توان ارتفاع یک تگ یا عنصر را معین کرد.

قبل از توضیح راجع به ویژیگی های margin و padding به تصویر زیر دقت فرمایید:

margin: فضای خالی بین عنصر و حاشیه مرورگر یا فضای خالی بین عناصر را مشخص می کند، همانطور که در تصویر مشاهده می کنید اندازه این ویژیگی در 4 جهت تگ قابل تغییر می باشد.

border: حاشیه یک تگ یا عنصر را مشخص می کند همانند margin، اندازه این ویژیگی در 4 جهت قابل تغییر می باشد.

padding: فضای خالی بین border و محتوای یک عنصر را مشخص می کند، همانند دو ویژیگی بالا اندازه ها در 4 جهت قابل تغییر می باشد.

در ادامه ویژیگی های هر Selector (گزینشگر) را در کدهای CSS بررسی می کنم.

در نظر داشته باشید که هر جایی که صفحه index.html را ایجاد کردید همواره در کنارش پوشه های منابع صفحه همچون: style، image یا font را ایجاد کنید و فایل های مورد نیاز صفحه را در جای مناسب قرار دهید. در اینجا من در کنار فایل index.html که کدهای html را در خود جای داده است پوشه style و image را ایجاد کردم و فایل CSS را در پوشه style و تصاویر را در پوشه image قرار دادم.

در پوشه image، برای سایت یک تصویر در نظر گرفتم که از لینک زیر قابل دانلود می باشد:

icon.png

در ابتدا آدرس فایل CSS را توسط تگ link در قسمت head به صورت زیر ضمیمه صفحه می کنم:

<head>
   <title>Advertising</title>
   <link rel="stylesheet" href="style/style.css">
</head>

همچنین به خاطر استفاده از کاراکترهای فارسی باید نوع کد گذاری مجموعه کاراکترهای صفحه را هم برابر با UTF-8 قرار بدم که توسط تگ meta و خصوصیت charset در قسمت head به صورت زیر قابل انجام می باشد:

<head>
   <title>Advertising</title>
   <meta charset="utf-8"> 
   <link rel="stylesheet" href="style/style.css"> 
</head>

حالا فایل CSS من ضمیمه صفحه شده و قادر خواهم بود تا تغییرات موردنظرم را بر عناصر تشکیل دهنده صفحه HTML اعمال کنم.

"هر ویژیکی جدیدی که در گزینشگرهای CSS آمده را بررسی می کنم و از توضیح ویژیگی هایی که در گزینشگرهای قبل راجع به آن توضیح دادم صرف نظر کردم"

در ابتدا ویژیگی های body را به صورت زیر اضافه می کنم:

body{
   margin: 0px;
   background-color: #f7deb5;
   font-size:13px;
   font-family: tahoma;
}

margin: حاشیه بین body و کادر مرورگر را مشخص می کند که من برابر 0 قرار دادم و فضای خالی بین body و مرورگر از بین می رود.

background-color: رنگ پس زمینه صفحه را مشخص می کند که با کد رنگ، مقادیر rgb یا رنگ های از پیش تعریف شده همچون: black, white, red, blue قابل تنظیم می باشد که من در اینجا با کد رنگ f7dbe5، رنگ پس زمینه را تغییر دادم.

font-size: با استفاده از این ویژیگی اندازه فونت صفحه را به 13px تغییر دادم، واحد های دیگری همچون: em, rem قابل استفاده می باشد.

font-family: با استفاده از این ویژیگی می توان نوع فونت را معین کرد، انواع فونت هایی همچون: tahoma، arial و ... البته در نسخه سوم و جدید CSS امکان پیوست فونت به صفحه فراهم شده است، همچنین می توان دو ویژیگی بالا را به صورت خلاصه شده به صورت زیر نوشت:

font:13px tahoma;

قاعده خلاصه نویسی در CSS بسیار کارآمد وساده است به جای اینکه خط های متمادی را برای قسمت های مختلف یک ویژیگی اضافه کنیم می توانیم ویژیگی را به صورت خلاصه شده در یک خط ویرایش کنیم.

ویژیگی های کلاس top:

.top{
   width: 100%;
   height: 35px;
   border-bottom: 2px solid #B6B6B6;
   background-color: #D1D1D1;
}

width: با استفاده از این ویژیکی عرض عنصر دارای کلاس top را برابر 100% در نظر گرفتم، یکی دیگر از مقادیر اندازه در CSS درصد می باشد. عرض این عنصر با استفاده از این واحد، متناسب با مقدار وارد شده و عرض عنصر پدر، که در این جا body می باشد معین می شود در واقع با توجه به اینکه مقدار 100% را برای این ویژیگی در نظر گرفتم تمامی عرض body را اشغال می کند، هنگامی که مرورگر تغییر اندازه می یابد متناسب با تغییر، عرض عنصر هم تغییر پیدا می کند.

height: ارتفاع عنصر که با واحد px یا پیکسل تنظیم شده است.

border-bottom: با استفاده از این ویژیگی حاشیه پایین عنصر را معین کردم، مقادیر به ترتیب:

ضخامت حاشیه
نوع حاشیه (خط ممتد، خط غیر ممتد، نقطه چین)
رنگ حاشیه

در div با کلاس top، یک تصویر را با استفاده از تگ img به صورت زیر قرار دادم:

<div class="top">
   <img src="images/icon.png">
</div>

حال برای دسترسی به عنصر img و تغییر ویژیگی ها در CSS، از گزینشگر نام (نام تگ) به صورت زیر استفاده کردم:

.top img{
   float: left;
   margin: 5px 16px;
}

همانطور که ملاحظه می کنید به صورت سلسله مراتب قادر خواهید بود تا عناصر موجود در صفحه HTML را انتخاب کنید.

float: با استفاده از این ویژیگی و مقداری که برای آن در نظر گرفتم، عنصر img از سمت چپ در عنصر پدر شناور می شود (در سمت چپ عنصر با کلاس top قرار می گیرد)

margin: فضای خالی بین حاشیه بیرونی عنصر، و عنصر پدر را تعیین می کند. همانطور که در بالا ملاحظه می کنید ویژیگی خلاصه نویسی شده است، مقدار اول، فضای بالا و پایین عنصر، و مقدار دوم، فضای چپ و راست عنصر را تعیین کرده است.

داخل تگ div با کلاس top، یک تگ ul به همراه دو زیر مجموعه که با تگ li مشخص می گردند به صورت زیر اضافه کردم:

<div class="top">
   <img src="images/icon.png">
   <ul> 
      <li><a>درباره ما</a>
      </li> <li><a>ورود</a></li> 
   </ul> 
</div>

ul که مخفف کلمات unordered lists به معنای لیست های نا مرتب می باشد یک لیست بدون ترتیب می باشد که در کنار آیتم های آن از علامت هایی همچون:

یک دیسک (disc)
دایره تو خالی (circle)
مربع (square)
حروف یونانی (upper-roman)

و ... استفاده کرد.

همچون تگ img می توان به صورت زیر به تگ ul دسترسی داشت:

.top ul{
   float:right;
   margin:8px 0px;
   list-style-type: none;
}

list-style-type: با استفاده از این ویژیگی می توان نوع لیست را با توجه به مقادیر ممکن تغییر داد.

.top ul li{
   float:right;
   margin-right: 30px;
}

همانطور که در بالا مشاهده می کنید به صورت سلسله مراتب به تگ های li در ul موجود، در کلاس tag دسترسی پیدا کرده و برخی ویژیگی های آن را تغییر دادم، در اینجا قصد دارم که li های موجود به صورت افقی از سمت راست در کنار هم قرار بگیرند که با دو تکه کد پیشین این کار را انجام دادم.

تا اینجا تگ div با کلاس top و محتوای داخلش، با استفاده از CSS به شکل زیر در آمده است:

حال باید ویژیگی های div با کلاس content را تغییر دهیم، کدهای CSS این کلاس به صورت زیر می باشد:

.content{
   display: table;
   width: 940px;
   height: auto;
   padding-top: 1px;
   margin: 50px auto;
}

display: با استفاده از این ویژیگی تعیین می کنیم که عنصر مورد نظر به چه صورتی به نمایش گذاشته شود، در اینجا من مقدار table را به این ویژیگی اختصاص دادم که ارتفاع عنصر مورد نظرم به صورت table افزایش پیدا کند.

height: ارتفاع عنصر را مشخص می کند که من مقدار auto را به این ویژیگی اختصاص دادم که همانطور که از معنی آن پیداست، تنظیم این مقدار برای این ویژیگی باعث افزایش خودکار ارتفاع عنصر می شود.

حال به عنصر content، تگ های دیگری به صورت زیر اضافه می کنم:

<div class="content">
   <div class="search">
      <table> 
         <tr><td><input type="submit" value="جست و جو"></td><td><span>نام کالا</span><input type="radio" value="1"><span>قیمت</span><input type="radio" value="1"></td><td><input type="text" placeholder="جست و جو"></td><td><span>دسته بندی: ورزشی</span></td>
         </tr> 
      </table> 
   </div> 
   <div class="side">
      <span>دسته بندی</span> 
      <ul> 
         <li><a>ورزشی</a></li>
         <li><a>دیجیتال</a></li>
         <li><a>صنایع دستی</a></li>
      </ul> 
   </div> 
   <div class="ads">
   </div>
</div>

تگ div با کلاس search را برای قرار دادن امکانات دریافت ورودی از کاربر اضافه کردم. در این تگ یک جدول با استفاده از تگ table ایجاد کردم و در داخل table با استفاده از تگ tr و td یه ترتیب سطرها و ستون ها را اضافه کردم، هر td یک سلول در جدول در نظر گرفته می شود.

با استفاده از تگ input فیلدهای ورودی را برای دریافت اطلاعات مربوط به جست و جو در تگ td در جدول اضافه کردم.

input type = text: این تگ input یک کادر متنی را ایجاد می کند، یکی از صفت های کاربردی این نوع، place holder می باشد که یک متن را به عنوان hint یا اشاره ای کوتاه به آنچه که باید در کادر وارد شود به صورت پیش فرض و البته متمایز با متن ورودی (به صورت کمرنگ تر) در نظر می گیرد.

input type = radio: این تگ input یک دکمه رادیویی را ایجاد می کند.

input type = submit: این تگ input یک دکمه برای ارسال اطلاعات ورودی ها در فرم به سمت سرور استفاده می شود.

در زیر ویژیگی های مربوط به div با کلاس search را تغیر دادم:

.search{
   width: 911px; 
   height: 35px;
   margin: 14px 15px;
   border-radius:2px;
   background-color: #326A95;
}

border-radius: از این ویژیگی برای گرد کردن گوشه های تگ یا عنصر مورد نظر استفاده می شود، که در اینجا به اندازه 2px چهار گوشه عنصر گرد شده است.

با اسفاده از کد CSS زیر موقعیت جدول را معین کردم:

.search table{
   float: right;
   margin: 2px 24px;
}

همچنین ویژیگی های margin-left و color تمامی span های موجود در جدول را با استفاده از کد زیر ویرایش کردم:

.search table span{
   margin-left:15px;
   color:#FFF;
}

حال برخی از ویژیگی های تگ های input را به صورت زیر تغییر می دهیم:

.search table input[type=text]{
   width: 400px;
   padding-right: 4px;
   direction: rtl;
}
.search table input[type=radio]{
   margin:0px 25px 0px 8px;
} 
.search table input[type=submit]{
   margin-right: 25px;
}

با استفاده از type و مقدار مشخص شده برای آن می توان به انواع تگ های input دسترسی داشت.

direction: با استفاده از این ویژیگی می توان جهت نوشتن را مشخص کرد که در اینجا برابر با rtl یا right-to-left قرار دادم که به معنی از راست به چپ می باشد.

پس از تگ div با کلاس search، تگ div با کلاس side قرار گرفته است، این تگ را برای نمایش دسته بندی های مختلف تبلیغات در سایت اضافه کردم، هر دسته بندی در یک تگ li در ul قرار گرفته است.

در زیر کدهای CSS قسمت side را مشاهده می کنید:

.side{
   float: right;
   width: 230px;
   height: auto;
   margin: 5px 14px 15px;
   border: 1px solid #BDBDBD;
   border-radius: 2px;
   background-color:#FEFEFE;
}

نکته ای که در کدهای بالا حائز اهمیت است، ویژیگی border است که به صورت یکتا آمده است، بدین صورت حاشیه برای 4 جهت عنصر با مقادیر وارد شده تنظیم می شود.

یک تگ span با محتوای "دسته بندی" در قسمت side قرار دادم که عنوانی است برای قسمت side، در زیر کدهای CSS این تگ را مشاهده می کنید:

.side span{
   display: block;
   width: 70px;
   font-weight: bold;
   margin: 3px auto;
}

با استفاده از display:block نحوه نمایش تگ span را که به صورت inline می باشد را به block تغییر دادم، و یک عرض معین را برای این تگ تنظیم کردم و با اختصاص دادن مقدار auto به قسمت دوم مقدار ویژیکی margin تگ span را به وسط عنصر پدر انتقال دادم.

در داخل تگ side یک تگ ul قرار دادم که کدهای CSS بدین صورت است:

.side ul{
   float: right;
   margin:15px 15px;
   list-style-type: none;
} 
.side ul li{
   margin-bottom: 25px;
   text-align: right;
}

text-align: تراز افقی محتوای تگ را معین می کند که در اینجا right قرار گرفته است و متن موجود در تگ li که محتوای این تگ می باشد، از سمت راست تراز شده است.

margin-bottom یا فضای خالی پایین تگ های li در ul موجود، همانطور که در کد بالا مشاهده می کنید برابر با 25px قرا گرفته است. این اندازه حاشیه پایین بین عناصر li را مشخص می کند اما در مورد تگ آخر، قصد دارم margin-bottom را تغییر بدهم، در CSS با استفاده از last-child به صورت زیر می توانم به فرزند آخر یک عنصر دسترسی پیدا کنم:

.side ul li:last-child{
   margin-bottom: 10px;
}

در اینجا آخرین li موجود در ul که در قسمت side قرار گرفته است انتخاب شده است و مقدار margin-bottom آن را تغییر دادم.

تگ div با کلاس ads در سمت چپ عنصر side قرار گرفته است و در آینده تبلیغات در این تگ div نمایش داده می شود، ویژیگی های CSS آن به شرح زیر است:

.ads{
   float: left;
   width: 650px;
   height: 500px;
   margin: 5px 14px 15px;
   border: 1px solid #BDBDBD;
   border-radius: 2px;
   background-color: #FEFEFE;
}

همانطور که در بالا می بینید با استفاده از ویژیگی float و مقدار left این تگ از سمت چپ تگ content شناور می شود.

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

<div class="footer">
   <span>سایت تبلیغات</span> 
</div>

یک تگ span را با محتوای "سایت تبلیغات" به قسمت footer اضافه کردم.

در زیر برخی ویژگی های مربوط به این دو تگ را تغییر دادم:

.footer{
   clear: both;
   width: 100%;
   height: 35px;
   border-top:2px solid #B6B6B6;
   background-color:#D1D1D1;
}
.footer span{
   display: block;
   width: 77px;
   margin:9px auto 0px;
}

clear: این ویژیگی باعت لغو ویژیگی float می شود، در اینجا مقدار both را برای این ویژیگی قرار دادم که باعث لغو ویژیگی float در هر دو طرف left و right می شود.

نکته ای که در کد CSS گزینشگر footer span حائز اهمیت است خلاصه نویسی ویژیگی margin به صورت 3 تایی است، مقادیر به ترتیب:

margin-top
margin-left + margin-right
margin-bottom

با توجه به مقدار auto، تگ span در وسط footer قرار می گیرد.

آموزش سایت تبلیغاتی

HTML

CSS

مطالب مرتبط

نظر شما

برای ثبت دیدگاه در سایت ثبت نام کنید

بیشترین بازدید

طراحی صفحه ثبت نام و ورود کاربران HTML و CSS

با توجه به اینکه در سایت تبلیغات، کاربران جهت ارائه آگهی های خود باید ثبت نام کنند در این قسمت برای ارسال اطلاعات به سمت سرور، با استفاده از تگ های موجود در HTML فرمی را جهت ثبت نام و ورود کاربران ایجاد خواهیم کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
ساخت وب سرویس با استفاده از PHP و SOAP

به عنوان توسعه دهنده نرم افزار، توانایی توسعه نرم افزار و سرویس برای محدوده گسترده ای از پلتفرم ها یک مهارت ضروری است. اما برای تحقق این موضوع نمی توان انتظار داشت که همه از یک پلتفرم یا یک زبان برنامه نویسی استفاده کنند یا اینکه همه پلتفرم ها و زبان ها را پوشش داد، این یک کار نشدنی است. اگر تنها یک استاندارد وجود داشت که به ما اجازه می داد تا کدهای نرم افزارمان را یکبار بنویسیم و دیگران با نرم افزارهای خودشان به آسانی از طریق شبکه با آن ارتباط برقرار می کردند چقدر عالی می شد. خب خوشبختانه وجود دارد و نامش هم SOAP است. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
طراحی صفحه ثبت نام و ورود کاربران PHP و MySQL

برای ثبت اطلاعات کاربران در پایگاه داده سایت، باید با استفاده از PHP اطلاعات ارسال شده توسط کاربر را دریافت کنیم و با استفاده از دستورات MySQL ذخیره کنیم. جهت اجرای کدهای PHP و MySQL در ویندوز باید نرم افزار WAMP یا XAMP را در سیستم خود نصب کنید. با استفاده از این نرم افزار یک لوکال هاست مجازی در سیستم شما شبیه سازی می شود تا کدهای PHP را اجرا و پایگاه داده MySQL را ایجاد کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
ساخت وب سرویس RESTful با استفاده از PHP

Representational State Transfer یک سبک معماری در وب سرویس است که در آن از آدرس ها برای دستیابی به منابع استفاده می شود. داده ها و توابع در معماری RESTful منابع نامیده می شوند به این جهت که داده ها و توابع در واقع آنچیزی هستند که ما می خواهیم از طریق سرویس به آن متصل شویم. در این پست می خواهیم نشان دهیم که چطور می توان یک وب سرویس RESTful را بدون استفاده از هیچ نوع Framework خاصی در PHP ایجاد کرد. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
آموزش نصب و استفاده از Composer

Composer ابزاری برای مدیریت وابستگی در پروژه های PHP می باشد. زمانی که شما تصمیم می گیرید تا یک پروژه PHP را ایجاد کنید قطعا با مسائلی برخورد خواهید کرد که راه حل آنها استفاده از کتابخانه ها یا پکیج های موجودی است که برای این مساله ها ارائه شده اند زیرا با این کار در فاکتور های مهمی همچون زمان و هزینه صرفه جویی کرده اید و به عبارت دیگر چرخ را از نو اختراع نمی کنید. از این دست مسائل می توان به: اعتبار سنجی کاربر مدیریت پایگاه داده مسیریابی درخواست اشاره کرد. اما در این میان کتابخانه ها یا پکیج های موجود هم دارای وابستگی های خاص خود هستند و به عنوان توسعه دهنده PHP شما باید انرژی مضاعفی را برای یافتن و تطبیق این وابستگی ها صرف کنید. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟
ساخت WSDL با استفاده از PHP

در قسمت قبل ایجاد یک اپلیکیشن سازگار را با استفاده از پروتکل SOAP بررسی کردیم. همینطور نشان دادیم که ساخت سرور و کلاینت SOAP با کتابخانه NuSOAP چقدر آسان است اما در این قسمت می خواهیم WSDL را که در هنگام کار با SOAP حتما استفاده خواهد شد را توضیح دهیم. در اینجا ما در ارتباط با فایل های WSDL و اینکه چطور می توان از آنها استفاده کرد بحث خواهیم کرد همچنین به شما نشان می دهیم که به چه صورت می توان فایل WSDL را با NuSOAP ایجاد کنید و آن را با مثال های سرور و کلاینت SOAP که در قسمت قبل ایجاد کردیم ترکیب کنیم. در ادامه مطلب همراه من باشید. چیست و چه کاربردی دارد؟

سوالات

اضافه کردن یک ستون جدید به جدول موجود در Migration لاراول

چطور می توانم یک ستون به جدولی که از قبل با استفاده از فریموورک لاراول ایجاد شده است اضافه کنم؟من فایل Migration رو به صورت زیر ویرایش کردم:<?php public function up() { Schema::create('users', function ($table) { $table->integer("paid"); }); }در ترمینال هم دستور php artisan migrate:install و migrate رو اجرا کردم، اما ستون اضافه نشده است.چطور می توانم ستون مورد نظرم را اضافه کنم؟
چک کردن موجود بودن یک رکورد در Laravel

من تازه کار با فریممورک Laravel رو شروع کردم. چطور می توانم بررسی کنم که یک رکورد موجود است یا خیر؟$user = User::where('email', '=', Input::get('email'));چطور می می تونم بررسی کنم که user$ شامل رکورد هست یا نه؟
لاراول 4: چطور می توان در Blade آدرس صفحه را دریافت کرد؟

من از لاراول نسخه 4 استفاده می کنم، چطور می توانم آدرس یک صفحه را دریافت کنم و در if@ استفاده کنم. می دونم که می توانم با استفاده از کد PHP زیر این کار را انجام دهم:<?php echo URL::current(); ?>اما در blade چطور می توان این کار را انجام داد؟
چطور می توان چندین شرط Where در Eloquent لاراول در نظر گرفت؟

من از Query Builder لاراول برای ایجاد گزارش استفاده می کنم و گزارشم دارای چندین شرط می باشد.شرط ها را به صورت زیر اعمال کردم اما به نظرم راه جالبی نیست.$results = User::where('this', '=', 1) ->where('that', '=', 1) ->where('this_too', '=', 1) ->where('that_too', '=', 1) ->where('this_as_well', '=', 1) ->where('that_as_well', '=', 1) ->where('this_one_too', '=', 1) ->where('that_one_too', '=', 1) ->where('this_one_as_well', '=', 1) ->where('that_one_as_well', '=', 1) ->get();آیا راه بهتری برای اعمال شرط ها وجود دارد؟
چطور می توان گزارش SQL که Query Builder لاراول آن را ایجاد می کند مشاهده کرد؟

کد زیر را در نظر بگیرید:DB::table('users')->get();من می خوام کد SQL که Query Builder بالا اجرا می کند را دریافت کنم به عنوان مثال در کد بالا کد SQL:SELECT * FROM usersتوسط Query builder اجرا می شود.
Eloquent: شمارش و تشخیص خالی بودن

آیا راهی برای تشخیص اینکه مجموعه بازگشتی از گزارش:$result = Model::where(...)->get() خالی است یا اینکه تعداد عناصر موجود در آن چقدر است وجود دارد؟من در حال حاضر از:!$result استفاده می کنم آیا راه درستی است؟در مورد:count($result)آیا همه موارد را پوشش می دهد؟ به عنوان مثال اگر result خالی باشد؟
لاراول 5: نمایش HTML در Blade

من یک رشته به صورت زیر دارم که شامل تگ HTML می باشد:$text = '<p><strong>Lorem</strong> ipsum dolor <img src="images/test.jpg"></p>'و می خواهم با استفاده از Blade نمایش بدم:{{$text}}اما خود رشته را چاپ می کند و تگ های HTML را رندر نمی کند. چطور می توانم HTML را با Blade در لاراول 5 نمایش بدم؟
ReactJSX: استفاده از Props بین کوتیشن

چطور می توان در JSX از یک مقدار props به عنوان مقدار attribute استفاده کرد؟به عنوان مثال:<img className="image" src="images/{this.props.image}" />و خروجی HTML آن به صورت زیر است:<img class="image" src="images/{this.props.image}">
ارتباط بین دو کامپوننت در React

اپلیکیشن من شامل یک لیست با فیلتر های آن و یک button برای تغییر layout می باشد. در حال حاضر از سه کامپوننت:</list></Filters></TopBar>استفاده می کنم. می خوام زمانی که تنظیمات در </Filters> تغییر کرد متدی در کامپوننت </list> برای بروزرسانی view اجرا شود.چطور میتونم بین این سه کامپوننت ارتباط برقرار کنم؟ آیا باید از مدل داده global برای انجام این کار استفاده کنم؟
Show یا Hide کردن عنصر در React

من تازه شروع به یادگیری React کردم و دنبال راهی هستم که بتونم یک عنصر روی صفحه را show یا hide کنم. می خوام زمانی که کلیک کردم، div مربوط به نتایج نمایش داده شود.var Search= React.createClass({ handleClick: function (event) { console.log(this.prop); }, render: function () { return ( <div className="date-range"> <input type="submit" value="Search" onClick={this.handleClick} /> </div> ); } }); var Results = React.createClass({ render: function () { return ( <div id="results" className="search-results"> Some Results </div> ); } }); React.renderComponent(<Search /> , document.body);