آموزش طراحی باکس تبلیغات ۱۲۵*۱۲۵
آموزش طراحی باکس تبلیغات ۱۲۵*۱۲۵
سلام خدمت شما کاربراب وب سایت پاسخ وردپرس درخدمت شما با جلسه ۴۰ آموزش HTML5 و CSS3
آموزش طراحی پروزه نهایی طراحی قالب HTML5 و CSS3 جلسه ۱۰ آموزش طراحی باکس تبلیغات ۱۲۵*۱۲۵
و طراحی باکس تبلیغات متنی در سایدبار پس با من همراه باشید .
آموزش طراحی باکس تبلیغات
برای شروع کد های html زیز را داخل فایل index.html بعد از کد های باکس نرم افزار های مورد نیاز که توی جلسات قبلی
آموزش دادیم قرار دهید .
کد های html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<aside class="ads-125 software"> <header class="title"> <h3>محل تبلیغات شما</h3> <i class="fa fa-cloud-download"></i> </header> <div class="ads-content-125"> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> </div> </aside> |
دانلود تصویر استفاده در قالب
دقت داشته باشید من از کلاس که برای باکس نرم افزار های موردنیاز داده بود کپی گرفتم که هم استایل عنوانش مثل باکس نرم افزار های مورد نیاز است
بعد از قرار دادن کدها بالا داخل فایل index.html فایل داخل مرورگر اجرا نمایید نتیجه کار مثل تصویر زیر خواهید بود.
برای این یکم استال برای باکس بدیم کد های css زیر را داخل فایل style.css بعد از کد های باکس نرم افزار های مورد نیاز قرار دهید .
کد های css
|
1 2 3 4 5 6 7 8 9 |
/*start ads 125*/ .ads-content-125{ text-align: center; padding: 20px 0 10px; } .ads-content-125 img{ margin-bottom: 10px; margin-left: 2px; } |
بعد از قرار دادن کد های بالا نتیجه کار به صورت زیر خواهد بود .
نتیجه کار
بعد از طراحی باکس تبلیغات ۱۲۵*۱۲۵ حلا نبوت این که باکس تبلیغات متنی را طراحی کینم برای این بعد از کد های باکس تبلیغات ۱۲۵ کد های html
زیر داخل فایل index.html خود قرار دهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<aside class="ads-125 software"> <header class="title"> <h3>محل تبلیغات شما</h3> <i class="fa fa-cloud-download"></i> </header> <div class="ads-content-125"> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> <a href="#" title="محل تبلیغات شما"><img src="images/ads.gif" alt="محل تبلیغات شما"></a> </div> </aside> /*start ads 125*/ .ads-content-125{ text-align: center; padding: 20px 0 10px; } .ads-content-125 img{ margin-bottom: 10px; margin-left: 2px; } <aside class="ads-text-sidebar-right"> <header class="title-ads-text"> <h3>تبلیغات متنی شما</h3> </header> <div class="text-ads"> <ul> <li><a href="#" title="مکان تبلیغات شما"> <span class="ads-name"> مکان تبلیغات شما</span> <span class="ads-desc">مکانی ارزان با بازدهی بالا</span> <span class="ads-address">https://replywp.com</span> </a></li> <li><a href="#" title="پاسخ وردپرس"> <span class="ads-name"> پاسخ وردپرس</span> <span class="ads-desc">آموزش طراحی قالب HTML5 و CSS3 در پاسخ وردپرس</span> <span class="ads-address">https://replywp.com</span> </a></li> <li><a href="#" title="مکان تبلیغات شما"> <span class="ads-name"> مکان تبلیغات شما</span> <span class="ads-desc">مکانی ارزان با بازدهی بالا</span> <span class="ads-address">https://replywp.com</span> </a></li> <li><a href="#" title="پاسخ وردپرس"> <span class="ads-name"> پاسخ وردپرس</span> <span class="ads-desc">آموزش طراحی قالب HTML5 و CSS3 در پاسخ وردپرس</span> <span class="ads-address">https://replywp.com</span> </a></li> <li><a href="#" title="مکان تبلیغات شما"> <span class="ads-name"> مکان تبلیغات شما</span> <span class="ads-desc">مکانی ارزان با بازدهی بالا</span> <span class="ads-address">https://replywp.com</span> </a></li> <li><a href="#" title="پاسخ وردپرس"> <span class="ads-name"> پاسخ وردپرس</span> <span class="ads-desc">آموزش طراحی قالب HTML5 و CSS3 در پاسخ وردپرس</span> <span class="ads-address">https://replywp.com</span> </a></li> </ul> </div> </aside> |
بعد از قرار دادن کد های بالا اگه داخل مرورگر اجرا نمایید نتیجه کار به صورت زیرخواهید بود .
خوب دوستان عزیز این جلسه از آموزش طراحی قالب html و css به پایان رسید .
تا یکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدار.
هیچ دیدگاهی برای این محصول نوشته نشده است.