bobSilon
دوشنبه 30 دی 1392, 00:16 صبح
سلام
اول از همه اینکه باید html رو بلد باشید. چون با html ساختار صفحه رو ایجاد میکنیم. یعنی به مرورگر میگیم که
صفحه ما به عنوان مثال یک هدر یا سر صفحه داره که توش عنوان سایت و توضیحاتی درباره سایت گذاشتیم. مثل این کد:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>صفحه تست، برای فروم برنامه نویس</title>
</head>
<body>
<header>
<h1>هدر یا سر صفحه سایت</h1>
<p>توضیحاتی در مورد سایت</p>
</header>
<nav role='navigation'>
<ul>
<li><a href="#">صفحه اصلی</a></li>
<li><a href="#">اخبار</a></li>
<li><a href="#">مقالات</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</nav>
<div class="mainContents">
<h2>هنوان مطلب</h2>
<p>لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است. از آنجایی که طراحان عموما نویسنده متن نیستند و وظیفه رعایت حق تکثیر متون را ندارند و در همان حال کار آنها به نوعی وابسته به متن می‌باشد آنها با استفاده از محتویات ساختگی، صفحه گرافیکی خود را صفحه‌آرایی می‌کنند تا مرحله طراحی و صفحه‌بندی را به پایان برند.
</p>
</div>
</body>
</html>
برای اینکه بتونید ظاهر سایت رو کنترل کنید و اونطور که میخواید عناصر داخل صفحه رو بچینید، باید برید دنبال css که آموزش
برای css تو وب زیاده. با خوندن اونها متوجه میشید که با کمک انتخابگرهای css میتونید به عناصر داخل صفحه دسترسی داشته
باشید و اونارو هرطور که دوست داشته باشید، استایل بدید و اینکه مکان دقیقشون رو تو صفحه تعریف کنید. بعنوان مثال برای
شکل دادن به صفحه ساده که توسط کد بالا ایجاد میشه، از دستور زیر استفاده میکنیم:
body{
direction: rtl;
text-align: justify;
}
header{
width: 80%;
height: 140px;
margin: 0 auto;
padding: 20px;
color: #fefefe;
border-bottom: 4px dashed #fefefe;
border-radius: 5px 5px 0 0;
background-color: #f55;
}
nav{
width: 80%;
height: 50px;
margin: 0 auto;
}
nav ul li{
position: relative;
display: inline-block;
padding: 10px;
list-style: none;
float: right;
margin: 0 3px;
font-size: 1.05em;
border-radius: 3px;
background-color: #444;
}
nav ul li:hover{
background-color: #a6a;
}
nav ul li a{
text-decoration: none;
color: #fefefe;
}
.mainContents{
width: 80%;
margin: 40px auto;
position: relative;
padding: 20px;
color: #fefefe;
border-radius: 0 0 5px 5px;
background-color: #a6a;
}
.mainContents h2{
position: absolute;
top: -40px;
padding: 10px;
border: 2px solid #fefefe;
border-radius: 5px;;
background-color: #a6a;
}
حالا اینکه میخواید کنترل مورد نظرتون تو موقعیتی که میخواید تو صفحه قرار بگیره باید
براش یک کلاس یا id تعریف کنید و بعد تو فایل css بهش موقعیت رو بدید.
خروجی کدهای بالا رو میتونید اینجا (http://codepen.io/bobsilon/pen/thcbL)ببینید.