الرئيسيةالتسجيلدخولاليوميةس .و .جبحـثالأعضاءالمجموعات

شاطر | 
 

 كود =دول متكامل بخلفية ملونة

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل 
كاتب الموضوعرسالة
admin
Admin
avatar
}

المساهمات : 81

الموقع : ليبيا الحبيبة

العمل/الترفيه : وزارة الثقافة



مُساهمةموضوع: كود =دول متكامل بخلفية ملونة   الجمعة ديسمبر 08, 2017 6:28 am

الكود:
<!DOCTYPE html>
<title>My Example</title>
<style>
body {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav article ads"
    "footer footer footer";
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }
#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle {
  grid-area: article;     
  }
#mainNav {
  grid-area: nav;
  }
#siteAds {
  grid-area: ads;
  }
header, footer, article, nav, div {
  padding: 20px;
  background: gold;
}
</style>
<body>
  <header id="pageHeader">Header</header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>



الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://turat.ahlamontada.com
 
كود =دول متكامل بخلفية ملونة
استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
 ::   :: خاص-
انتقل الى: