| كود بلغة HTML |
<div id="Header">
<div id="right"><img src="../../My Documents/Unnamed Site 3/normal_eyelash_ps012thulth13.jpg" width="151" height="79" /></div>
<div id="left"><img src="../../My Documents/Unnamed Site 3/ABES58.jpg" width="202" height="80" /></div>
<h1><strong>منتدي روضة القرأن النسائي</strong></h1>
</div>
|
اولا نفهم كل نقطه يتم وضع الHtml زي ما كنا نضعها سابقا عادي جدا
في البدايه نقوم بعمل كود header للراس الصفحه
<div id="Header"></div>
داخل هذ الكود نقوم بالتقسيم كمانريد ووضع ما نريد
قسمته الي 3 اجزاء جزء يمين حدد حجمه ووضعت صوره
وجزء شمال قسمت مساحته وضعت صوره
| كود بلغة HTML |
<div id="right"><img src="../../My Documents/Unnamed Site 3/normal_eyelash_ps012thulth13.jpg" width="151" height="79" /></div>
<div id="left"><img src="../../My Documents/Unnamed Site 3/ABES58.jpg" width="202" height="80" /></div>
|
ووضعت الكتابه في المنتصف
| كود بلغة HTML |
<h1><strong>منتدي روضة القرأن النسائي</strong></h1>
|
وده كده جزء الهيدر ولكن ليس هذا الجزء فقط هذا الجزء لا يظهر الكلام مرتب منظم للتنظيم جزء css
| كود بلغة HTML |
<style type="text/css">
#Header {
background-color: #060;لون الخلفيه تكتبي اي رقم للون
background-image: url(../../My%20Documents/Unnamed%20Site%203/7hob.com1366666474458.jpg);اذا الخلفيه صوره تضعيها كصوره
height: 100px;طول الهيدر
width: 800px;عرض الهيدر
margin-top: auto;تنسيق الاعلي
margin-right: 50px;المسافه التي تترك من اليمين
margin-bottom:50;المسافه التي تترك من اسفل
margin-left: 0px;المسافه التي تترك من الجمب اليسار
border: medium double #03C; عرض الاطار
}
#left {
float: left;الجزء الشمال للهيدر
height:80px;ارتفاعه
width: 200px;عرضه
border: medium double #039;الاطار المحدد له
}
#right {
float: right;الجزء اليمين
height: 80px;ارتفاعه
width: 150px;عرضه
margin-right: 0px; اليمينالمسافه المتروكه من
margin-left: 0px;
border-top-width: medium;الاطار المحدد من كل جمب ممكن ان يعمل كطريقه الاطار في اليسار لا يوجد فرق
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
}
|