سورس سافت | سورس پروژه | دانلود پروژه | سورس کد


م
ن
و
سورس سافت

ادامه مطلب

آموزش ساخت فوتر زیبا در html



آموزش ساخت فوتر زیبا در html

آموزش ساخت فوتر زیبا در html

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

آموزش طراحی فوتر زیبا در html :

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

فایل index.html :

<html>
<head> <link rel=“stylesheet” type=“text/css” href=“style.css”></head>
<body>
<div class=‘contentone’></div>
<div class=‘footer’>
<div class=‘footerContent’>
مشاهده <a href=‘https://sourcesoft.ir/’>سورس سافت</a>.
</div>
</div>
</body>
</html>

فایل style.css :

*{
     margin: 0px;
     padding: 0px;
     color: #fff;
}    
body{
     width: 100%;
}    
.contentone{
     backgroundcolor: #333;
     height: 770px;
}
.footer{
     width: 100%;
     position: fixed;
     marginbottom: 0px;
     height: 80px;
     backgroundcolor: #1A1A1A;
     display: block;
}   
.footerContent{
     width: 80%;
     margin: auto;
     padding: 5px;
     textalign: center;
     borderleft: 1px solid #fff;
     borderright: 1px solid #fff;
}

نکته : جهت ویرایش کدها نیازی به استفاده از برنامه حجیم نیست، با کمک نوت پد پلاس میتونید کدها را به راحتی ویرایش کنید.

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

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


لینک کوتاه مطلب :
https://sourcesoft.ir/?p=203

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

علیرضا نجاتی 136 نوشته در سورس سافت دارد . مشاهده تمام نوشته های

دیدگاه ها


یک پاسخ به “آموزش ساخت فوتر زیبا در html”

  1. مریم گفت:

    ممنونم عالی بود

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

logo-samandehi