انشاء هيدر وفوتر بأكواد جاهزة html&css

#header {

   height: 213px;

   background-image:url('التمدد');

   background-repeat: repeat-x;

}

#header .right{

   height: 213px;

   width: 333px;

   background-image:url('هيدر يمين');

   float: right;

   background-repeat: no-repeat;

   

}

#header .left {

   height: 213px;

   width: 434px;

   float: left;






   background-image:url('هيدر شمال');

}

<div id="header"> 

<div class="right"></div> 

<div class="left"></div> 

</div> 

#do {

   height: 79px;

   background-image:url('تمدد الفوتر');

   background-repeat: repeat-x;

}

#do .right{

   float: right;

   height: 79px;

   width: 126px;

   background-image:url('فوتر يمين');

   background-repeat: no-repeat;

}

#do .left{

   float: left;

   height: 79px;

   width: 143px;

   background-image:url('الفوتر شمال');

   background-repeat: no-repeat;

}

#do .middle {

   background-image:url('فوتر الوسط ليس من الضروري وضعه');

   height:79px;

   width: 257px;

   margin-right: auto;

   margin-left: auto;

}

<div id="do">

<div class="right"></div>

<div class="left"></div>

<div class="middle"></div>

</div>