قالب بلوجر خطوة خطوة(تنسيق css):

لغة السي أس أس لغة تنسيقية، أي أن دورها في الصفحات الموجودة على شبكة الانترنت يتمثل في التنسيق واظهار المحتوي بشكل جميل ومبهرج(ههه).

لا يحتاج النبوغ في هذه اللغة لجهد كبير لقلة قواعدها وسهولة استيعابها عندنا نحن البشر. لكن النتائج التي يمكن أن يقدمها كل فرد منا تختلف من شخص لآخر. فإتقانك لهذه اللغة ومعرفتك لقواعدها لا يعني أن صفحاتك ستكون جميلة في أعين الآخرين (ربما لدوقك الفاسد أو أنك مميز عن الآخرين). لذلك نجد أن المبدعين في مثل هذا الصنف من اللغات جلهم مصممون.

تنسيق قالبنا: 

في الأسطر الآتية سنقوم بتنسيق قالبنا (قالب برموج). وللعلم هذا القالب ثابت (أي أن حجم عناصره لا ولن يتغير بتغير أبعاد النافدة التي تحتويه).

*{
    margin: 0;
    padding: 0;
}
html{
    direction: rtl;
}

body{
    margin: 0;
    padding: 0;
    background: url('pixels.png') repeat #F7941E;   
}

#page-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#outer-wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

/*header styles*/
#header{
    display: none
}

#crosscolPages{
    margin: 0;
    padding: 0;
    background: url('برموج.png');
    height: 280px;
}

#crosscolPages ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 121px;
    position: relative;
    right: 839px;
    border-radius: 0 0 10px 10px;
    background: #231F30;
    overflow: hidden;
}

#crosscolPages li{
    margin: 0;
    padding: 0;
    float: right;
}

#crosscolPages li a{
    display: block;
    margin: 0;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: fantasy;
}

#crosscolPages li a:hover{
    color: #F7941E;
}

/* navigation bar */
#crosscolLabels{
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: solid 1px #231F20;
}

#crosscolLabels ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#crosscolLabels li{
    float: right;
    /*background:#231F20;*/
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

#crosscolLabels p{
    margin: 0;
    padding: 0;
    color: #F7941E;
    padding: 5px 10px 5px 10px;
    font-family: fantasy;
    background:#231F20;
}
#crosscolLabels li a{
    display: block;
    padding: 5px 10px 5px 10px;
    text-decoration: none;
    color: #FFFFFF;
    font-family: sans-serif;
    font-size: 100%;
    background:#231F20;
}

#crosscolLabels li a:hover{
    background: none;
    color: #231F20;
    font-family: fantasy;
    
}

#line-under-header{
    height: 16px;
    background: #231F20;
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 265px;
}
#line-under-footer{
    height: 75px;
    background: #231F20;
    width: 100%;
    z-index: -1;
    margin-top: -75px;
    padding: 0;
}

/*========= التنسيقات الخاصةب الجسم الرئيسي الذي يحتوي الرسائل وغيرها من المكونات ====*/
#main-wrapper{
    width: 65%;
    float: right;
    margin-left: 10px;
    margin-top: 20px;
    background: #231F20;
    border-radius: 20px 20px 0 0;
    
}

/*======= النتسيقات الخاصة بالقائمة الجانبية =============================*/
#sidebar-wrapper{
    float:right;
    background: #231F20;
    margin-top: -30px;
    width: 30%;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    padding-bottom: 5px;
}

#sidebar-wrapper #search-bar{
    width: 90%;
    margin: auto;
}

#sidebar-wrapper #search-bar .search-box{
    width: 84.9%;
}

#sidebar-wrapper #most-readed-posts{
    width: 100%;
    margin: auto;
    text-align: center;
}

#sidebar-wrapper #most-readed-posts h2{
    font-size: 100%;
}
#sidebar-wrapper #most-readed-posts .most-readed-titles a{
    color: #F7941E;
    text-decoration: none;
    display: block;
    padding: 10px 0 10px 0;
}

#sidebar-wrapper #most-readed-posts .most-readed-titles a:hover{
    background: #F7941E;
    color: #231F20;
}

/*======== التنسيقات الخاصة بالرسائل=================*/

.posts{
    width: 96%;
    margin: auto;
    margin-top: 10px;
    background: #F7941E;
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid #F7941E;
}

.posts .post-header{
    background: #F15A29;
    overflow: hidden;
}

.posts .post-header ul{
    list-style: none;
    overflow: hidden;
}

.posts .post-header ul li{
    float: right;
}

.posts .post-header h2{
    font-family: "Courier New";
    clear: both;
    margin: 0;
    margin-left: 40px;
    display: inline;
    
}

.posts .post-header h2 a{
    text-decoration: none;
    color: inherit;
    
}
.posts .post-header h2 a:hover{
    color: white;
    
}
.posts .post-header .post-date{
    background: #F7941E;
    margin: 0;
    border-radius: 0 0 10px 10px;
    padding: 5px;
    margin-bottom: 5px;
    box-shadow: 0px 0px 2px 3px #333;
    
}

.post-body{
    background: white;
    padding: 5px;
    font-family: arial, sans-serif;
    font-size: 24px;
    line-height: 1.5;
}

/*======== التنسيقات الخاصة بالذي ===========*/
#footer{
    clear: both;
    background: #231F20;
    overflow:hidden;
}
#footer #copyright{
    float: right;
    width: 65%;
    text-align: center;
    margin-top: 30px;
    font-size: 120%;
    color: #FFF;
}
#footer #share-blog{
    overflow:hidden;
    float: left;
    width: 35%;
}
#footer ul{
    list-style: none;
}

#footer ul li{
    float: right;
}
#footer #share-blog ul li a{
    display: block;
    margin: 5px;
    margin-top: 10px;
    border-radius: 10px;
}
#footer #share-blog ul li a img{
    background: transparent;
    width: 65px;
    height: 53px;
    
}

Mohammed Essaid MEZERREG

14:23

إقـرأ المزيـد..

موقع edx

الموقع عبارة عن قاعدة أو برنامج للتعليم الإلكتروني عن بعد(e-learning)، حيث يقوم الموقع بالسماح للمعاهد العليا بتنظيم دروس عن بعد. من المعاهد والجامعات المتواجدة حاليا جامعة هارفارد، معهد ماساشوسات للتكنولوجيا، جامعة بروكلي. أما بالنسبة للدروس المتاحة أو المبرمجة لهذا العام وأثناء كتابتي لهذا المقال هي: برامج كخدمات(Software as a Service) من جامعة بروكلي ولنفس الجامعة درس في الذكاء الاصطناعي(Artificial Intelligence)، مقدمة في علوم الحاسب (الجزء1) لجامعة هارفارد ولمعهد MIT درسي الدارات والإلكترونيك(Circuits and Electronics) و مقدمة في علوم الحاسب والبرمجة.

Mohammed Essaid MEZERREG

06:38

إقـرأ المزيـد..