cssطراحی سایت

جلسه ۷۱: نتیجه در CSS

نتیجه

از آخرین درس ، من برای ایجاد چند تغییر در لوازم پیش رفتم.

<html>

 <head>

   <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />

 </head>

 <body>

    <div class=”aside”>

      <i class=”fa fa-bars”></i>

      <i class=”fa fa-home”></i>

      <i class=”fa fa-search”></i>

      <i class=”fa fa-volume-up”></i>

      <i class=”fa fa-user”></i>

      <i class=”fa fa-spotify”></i>

      <i class=”fa fa-cog”></i>

      <i class=”fa fa-soundcloud”></i>

  </div>

  <div class=”main”>

    <div class=”main__header”>

      <div class=”img”>

      <img src=”http://bit.ly/2sc2NJd”/> <!–Album art–>

      </div>

        <section class=”details”> <!–other details of the album–>

              <div>

                <p>CattyBoard Top ۱۰۰ Single Charts (۱۱٫۰۶٫۳۶)</p>

                <p class=”sm–hide”>Unknown Artist</p>

                <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

              </div>

             <div> <!–Music controls–>

                <i class=”fa fa-play”> &nbsp;Play all</i>

                <i class=”fa fa-plus”> &nbsp;Add to</i>

                <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

              </div>

        </section>

    </div>

    <div class=”main__body”>

        <div>

              <p>1. One Dance</p>

              <p class=”sm–hide”>Crake feat CatKid &amp; Cyla</p>

              <p class=”sm-text-right”>2:54</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

        </div>

        <div>

              <p>2. Panda</p>

              <p class=”sm–hide”>Cattee</p>

              <p class=”sm-text-right”>4:06</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

        </div>

        <div>

              <p>3. Can’t Stop the Feeling!</p>

              <p class=”sm–hide”>Catin Cimberlake</p>

              <p class=”sm-text-right”>3:56</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

         </div>

         <div>

              <p>4. Work From Home</p>

              <p class=”sm–hide”>Cat Harmony feat Colla</p>

              <p class=”sm-text-right”>3:34</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

         </div>

    </div>

  </div>

  <div class=”footer”></div>

 </body>

</html>

CSS:
/* =========
 basic reset 
========== */
body {
  padding: 0;
  margin: 0;
}

/*=============================
  default grid set up -> mobile first
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-rows: 1fr 90px;
      grid-template-columns: 1fr;
      grid-template-areas: "content"
                           "footer";
    }

.main {
  background-color: #2c3e50;
  grid-area: content;
}

.footer {
  background-color: #c0392b;
  grid-area: footer;
}

.aside {
  color: rgba(255,255,255,0.8);
  background-color: #7f8c8d;
  grid-area: sidebar;
}

/* hide the icons */
.aside i {
  display: none;
}

/*
  main
*/

 img {
  max-width: 100%;
}

.main__header {
  display: grid;
  color: rgba(255,255,255,0.9);
  grid-template-areas: "img"
                       "dtls"; 
  margin-bottom: 10px;
  padding: 20px;
}

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
} 

.main__body > div {
  padding: 8px;
  display:flex;
}

.main__body > div p{
  flex: 0 0 25%;
}
/*===============
  clean ups.
===============*/

.details {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;  
}

.details div:nth-child(1){
  margin-bottom: auto;
}

.details div:nth-child(2){
  margin-top: 0;
}
.details div:nth-child(2) i.fa{
  font-size: 0.9em;
  padding: 0 0.7em;
  font-weight: 300;
}

.details div:nth-child(1) p:first-child{
  font-size: 1.8em;
  margin: 0 0 10px;
}

.details div:nth-child(1) p:not(:first-child){
  font-size: 0.9em;
  margin: 2px 0;
}

/*=============================
  larger screens
===============================*/
@media only screen and (min-width:600px) {
  body {
    grid-template-columns: 40px 1fr;    
    grid-template-areas: "sidebar  content"
                           "footer  footer";
  }
  
  .aside {
     display: grid;
     justify-items: center;
     align-items: center;
  }
  
  /* show the icons */
  .aside i {
    display: block;
  }
  
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}

/* ===============
Mobile: Phones
==================*/
@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 

  .sm-text-right {
    text-align: right;
  }
  .main__header {
    justify-items: center;
  }
  .main__header > .details {
    text-align: center;
  }  
  .img > img {
    width: 150px
  }
  .main__body > div p{
    flex: 0 0 50%;
  }
}

پاکسازی نهایی

من پیش رفته ام تا حتی تغییرات زیبایی بیشتری را در کد قبلی قبلی ایجاد کنم. من سعی کردم نتیجه نهایی را که دنبال آن بودیم ، مدل کنم. لطفاً روی برگه ها کلیک کنید تا ببینید چه چیزی تغییر کرده است.

خدایا! من نمی فهمم چه کردی

با این پروژه خاص ، سعی می کنم سناریوی دنیای واقعی را مدل کنم. حقیقت این است که ، هر چقدر سعی کنم همه چیز را توضیح دهم ، وقتی شغلی پیدا می کنید یا مجبورید روی پروژه ها کار کنید ، من در کنار شما نیستم! یا باید به درس های گذشته این دوره مراجعه کنید یا شاید کمی تحقیق کنید. چرا اکنون آن را شروع نمی کنیم؟ اگر تغییراتی ایجاد کردم که باعث می شود متوجه نشوید ، برخی از درسهای قبلی را بررسی کنید. اگر چیزی از هیچ یک از دروس قبلی مشخص نیست ، حتماً در مورد آن در Slack از من سوال کنید. من مایلم کمک کنم در واقع ، من بسیار خوشحال خواهم شد که کمک کنم. 😀 آنجا خیلی صحبت می کنیم. خوب ، وارد کد شوید. اینو حل کن. تو می توانی!

<html>

 <head>

   <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />

   <link href=”https://fonts.googleapis.com/css?family=Lato” rel=”stylesheet”>

  </head>

 <body>

    <div class=”aside”>

      <i class=”fa fa-bars”></i>

      <i class=”fa fa-home”></i>

      <i class=”fa fa-search”></i>

      <i class=”fa fa-volume-up”></i>

      <i class=”fa fa-user”></i>

      <i class=”fa fa-spotify”></i>

      <i class=”fa fa-cog”></i>

      <i class=”fa fa-soundcloud”></i>

  </div>

  <div class=”main”>

    <div class=”main__header”>

      <div class=”img”>

      <img src=”http://bit.ly/2sc2NJd”/> <!–Album art–>

      </div>

        <section class=”details”> <!–other details of the album–>

              <div>

                <p>CattyBoard Top ۱۰۰

                  <span class=”sm–hide”> Single Charts (۱۱٫۰۶٫۳۶)</span>

                </p>

                <p class=”sm–hide”>Unknown Artist</p>

                <p class=”sm–hide”>2016 . Charts . ۱۰۰ songs</p>

              </div>

             <div> <!–Music controls–>

                <i class=”fa fa-play”> &nbsp;Play all</i>

                <i class=”fa fa-plus”> &nbsp;Add to</i>

                <i class=”fa fa-ellipsis-h”>&nbsp;&nbsp;More</i>

              </div>

        </section>

    </div>

    <div class=”main__body”>

        <div>

              <p>1. One Dance</p>

              <p class=”sm–hide”>Crake feat CatKid &amp; Cyla</p>

              <p class=”sm-text-right”>2:54</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

        </div>

        <div>

              <p>2. Panda</p>

              <p class=”sm–hide”>Cattee</p>

              <p class=”sm-text-right”>4:06</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

        </div>

        <div>

              <p>3. Can’t Stop the Feeling!</p>

              <p class=”sm–hide”>Catin Cimberlake</p>

              <p class=”sm-text-right”>3:56</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

         </div>

         <div>

              <p>4. Work From Home</p>

              <p class=”sm–hide”>Cat Harmony feat Colla</p>

              <p class=”sm-text-right”>3:34</p>

              <p class=”sm–hide”><span>CATTY CLOUD SYNC</span></p>

         </div>

    </div>

  </div>

  <div class=”footer”></div>

 </body>

</html>

/* =========
 basic reset 
========== */
body {
  padding: 0;
  margin: 0;
}
/*=============================
  default grid set up -> mobile first
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-rows: 1fr 90px;
      grid-template-columns: 1fr;
      grid-template-areas: "content"
                           "footer";
      font-family: 'Lato', sans-serif;
      color: #222;
      font-size: 0.8em;
    }

.main {
  grid-area: content;
}
.footer {
  background-color: royalblue;
  grid-area: footer;
}

.aside {
  background-color: #f2f2f2;
  grid-area: sidebar;
}

/* hide the icons */
.aside i {
  display: none;
}

/*
  main
*/

 img {
  max-width: 100%;
}

.main__header {
  display: grid;
  background-color: #4e4e4e;
  color: rgba(255,255,255,0.9);
  grid-template-areas: "img"
                       "dtls"; 
  margin-bottom: 10px;
  padding: 20px;
}

.main__header > .img {
  grid-area: img;
}
.main__header > .details {
  grid-area: dtls;
} 
.main__body {
  padding: 8px;
  background-color: #fff;
}
.main__body > div {
  padding: 8px;
  display:flex;
}
.main__body > div:nth-child(2n) {
    background-color: #f2f2f2;
}

.main__body > div p{
  flex: 0 0 25%;
}

/*===============
  clean ups.
===============*/
.details {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;  
}

.details div:nth-child(1){
  margin-bottom: auto;
}

.details div:nth-child(2){
  margin-top: 0;
}

.details div:nth-child(2) i.fa{
  font-size: 0.9rem;
  padding: 0 0.7rem;
  font-weight: 300;
}

.details div:nth-child(1) p:first-child{
  font-size: 1.8rem;
  margin: 0 0 10px;
}

.details div:nth-child(1) p:not(:first-child){
  font-size: 0.9rem;
  margin: 2px 0;
}

/*=============================
  larger screens
===============================*/

@media only screen and (min-width:600px) {
  body {
    grid-template-columns: 40px 1fr;    
    grid-template-areas: "sidebar  content"
                           "footer  footer";
  }
  
  .aside {
     display: grid;
     justify-items: center;
     align-items: center;
  }
  
  /* show the icons */
  .aside i {
    display: block;
  }
  
   .main__header {
    grid-template-columns: 250px 1fr;
    grid-template-areas: "img dtls"
  } 
}
/* ===============
Mobile: Phones
==================*/
@media screen and (max-width: 600px) {
  .sm--hide {
    display: none;
  } 

  .sm-text-right {
    text-align: right;
  }
  .main__header {
    justify-items: center;
  }
  .main__header > .details {
    text-align: center;
  }  
  .img > img {
    width: 150px
  }
  .main__body > div p{
    flex: 0 0 50%;
  }
}
متوجه خواهید شد که من پاورقی را خالی گذاشته ام. این قرار است یک تمرین برای شما باشد. خوب نیست؟ 😀 توصیه من استفاده از فلکس باکس است. این درک شما را از همکاری هر دو فناوری تقویت می کند. پیش بروید و مورد grid را بسازید ، پاورقی را یک ظرف فلکس کنید. اگر به برخی از نشانه های دیگر نیاز دارید ، به من اطلاع دهید.

زنده باد grid

فقط با چند ویژگی grid ، شما یک طرح جهانی واقعی ساخته اید. این بسیار چشمگیر است. شما همچنین مهارت بی نظیر ساخت لایه های Crid Grid با Flexbox را نیز یاد گرفته اید. تبریک می گویم

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا