Site-uri și aplicații pentru web

Aplicații (5)


Stilizarea unui document html (II)

Exercițiul 1

Preluaţi fişierul creat la laboratorul nr. 4, D:\postuniv\web\blog\index.html şi continuaţi îmbunătăţirea aspectului acestuia, modificând pe rând părţile rămase nestilizate, astfel:

  • Ștergeți culoarea de fundal și borderul aferente clasei pagina.
  • Poziţionaţi elementele main şi asside unul lângă celălat:
  •   main{
       background-color :#FFE97F;
       width: 65%;
       border:1px solid #FFF600;
       padding: 0.1rem;
       float: left;
      }
    
      aside {
       background-color :#93ACFF;
       width: 30%;
       border:1px solid #3060FF;
       padding: 0.1rem;
       overflow: hidden;
       float:right;
      } 
    


  • Ștergeţi culoarea de fundal şi border-ul elementelor main şi asside, apoi centraţi conţinutul din asside.
    • stilul pentru elementul main devine:
     
    main{
     width: 65%;
     padding: 0.1rem;
     float:left;
    } 
    
    • stilul pentru elementul aside devine:
     
    aside {
     width: 30%;
     padding: 0.1rem;
     overflow: hidden;
     margin: 0 auto;
     float:right;
    } 
    
    • verificați ca structura paginii index.html să fi identică cu următoarea schemă:



    • stilizaţi footer-ul:
     
    footer {
     background-color:#364956; 
     width: 100%;
     position:relative;
     top: 50%;
     margin-bottom: 7px;
     color: #FFF;
    } 
    
    • adăugaţi atât containerului #continut cât şi clasei .pagina proprietatea overflow: hidden;
     
    overflow: hidden; 
    

    REZULTAT:




  • redimensionaţi şi restilizaţi elementele main, aside, article şi clasa .dreapta pentru o aşezare cât mai aproape de modelul de la care s-a pornit:
  •    main{
       width: 65%;
       padding: 0.1rem;
       float:left;
       padding-top:50px;
       position: relative;
      }
    
      aside {
       width: 30%;
       padding: 0.1rem;
       float:right;
       overflow: hidden;
       margin: 0 auto;
       padding-top:50px;
      }
    
      article {
       background-color:#FFF;
       width: 100%;
       border:1px solid #cdcdcd;
       position: relative;
      }
    
      .dreapta {
       background-color: #FFF;
       width: 100%;
       border:1px solid #cdcdcd;
      }
    

  • Ștergeţi culoarea de fundal şi border-ul din #continut.


  • adăugaţi un bloc roşu cu scris alb şi poziţionaţi-l pe article astfel:
  •   .ora {
       background-color:#EA141F;
       color: white;
       position: absolute;
       left: 1.5rem;
       top: -0.6rem;
       width: 100px;
       height: 1.5rem;
       text-align: center;
       line-height: 1.5rem;
      } 
    

    Observaţie: Blocul (article) în interioriul căruia va fi acest nou bloc roşu trebuie să fie poziţionat: position: relative;

  • Modificări în fişierul .html:
  •       <main>
             <article>
                 <p class="ora">4.16 pm</p>
                 <h1>Fotografia favorita de azi </h1>
                 <h3>Postat de mine  .  .  . comentarii</h3>
                 <img src= "imagini/foto1.jpg" height="200px" width="200px"> 
                 <p>Este o postare veselă cu favorita mea ...de azi;</p>
             </article>
           </main>   
    



  • adăugaţi un stil pentru elementul img din article şi redimensionaţi imaginea afişată la 125x125 px:
  •  article img {
      float:left;
      margin-right:1.3rem ;
      margin-left: 1.3rem;
      border: 4px solid #dcdcdc;
      border-radius:6px;
     } 
    
  • în fişierul html:
  • <img src= "imagini/foto1.jpg" height="125px" width="125px">
  • impuneţi în fişierul stil.css stilizarea elementelor h1 şi adăugați elementului p din article clasa postare :
  • article h1 {
     padding: 0.8rem;
    }
    
    .postare {
     font-family: Arial, Helvetica, Sans-serif;
     font-size: 15px;
     line-height: 24px;
     text-align: justify;
     margin: 1rem;
    }
    
  • adăugaţi încă o postare, dar adăugaţi proprietatea "margin-bottom:25px;" la definirea elementului article pentru distanţarea articolelor:




  • TOP

Exercițiul 2

Adăugaţi în partea dreaptă un bloc având titlul "Postări populare" şi conţinând o succesiune de 5 articole. Pentru acesta:

  • descarcaţi imaginile i1.jpg...i5.jpg de pe pagina cursului şi salvaţi-le în directorul imagini
  • încadraţi într-un element section secţiunea conţinând postări populare.
  • Pentru stilizarea noului bloc section adăugaţi clasa .dreapta:

      .dreapta { 
     background-color: #FFF; 
     width: 100%; 
     border:1px solid #cdcdcd; 
     border-radius:8px; /*rotunjire chenar*/
    }  
    
    

    Modificări în fişierul .html:

      <aside>
        <article> 
         <p>Formular de căutare</p>
        </article>
    
      
        <article> 
          <p>Like us</p>
        </article>
    
      <section class="dreapta">
    
       <h1>Postari populare</h1>
    
            <p><img src="imagini/i1.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    
           <p><img src="imagini/i2.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    
           <p><img src="imagini/i3.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    
           <p><img src="imagini/i4.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    
          <p><img src="imagini/i5.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </section>
    
     </aside>
    
  • folosiţi aceeaşi stilizare pentru imaginile din section ca şi pentru cele din article.
  •   article img, section img{ 
     float:left; 
     margin-right:1.3rem; 
     margin-left: 1.3rem; 
     border: 4px solid #dcdcdc; 
      border-radius:6px; 
    } 
      
  • definiţi stilul elementului h1 din articolele postate în dreapta:
  •   .dreapta h1 { 
     font-size:20px; 
     margin: 0 10px 10px 10px; 
     padding: 9px; 
     color: #444; 
     font-size: 20px; 
     line-height: 25px; 
     border-bottom: 1px solid #d2d2d2; /*linia de sub postari populare*/
     font-family: 'Monda', sans-serif; 
     font-weight: bold; 
     text-decoration: none; 
     text-transform: capitalize; 
    } 
    
  • creaţi clasa "dreapta" pentru stilizarea paragrafelor din noul bloc section:
  •  .dreapta p{ 
      font-family: 'Arial', sans-serif;
     font-size:0.6rem; 
     clear: both; 
     margin-bottom: 1rem; 
     padding-bottom: 0.5rem; 
     padding-right: 0.5rem; 
     padding-top: 0.5rem; 
     text-align:justify;
    } 
    


    Pentru a finaliza stilizarea zonei aside vom crea clasa formular, pe care o referim elementului article.

    .formular{
      line-height: 1.2rem;
      height: 1.2rem; 
      padding-left: 8px;
      border-radius: 6px;
    }
    .formular p{
      font-family: 'Arial', sans-serif;
      font-size: 0.8rem;
    }
    
    
    <article class="formular"> 
         <p>Formular de căutare</p>
        </article>
      
        <article class="formular">
          <p>Like us</p>
        </article>
    
    



    TOP

    Exercițiul 3

    Stilizați selectorul global p aparținând elementului footer.

      footer p{
        text-align:center;
        font-size: 1rem;
        padding: 4px 0px;
        
    }
    

    În vederea ameliorării aspectului paginii create, scoateți elementul footer după închiderea clasei pagina, obținând astfel o simetrie față de div-ul #navcontaioner.

     </div> <!--de la continut -->
    
    </div> <!--de la pagina -->
    
    <footer> <!--pt a obtine afisare 100% -->
      <p>Posted by: Me</p> 
      <p><small>Copyright @ 2021</small></p> 
    </footer>
    
    </body>
    </html>
    


    Stilizați legăturile aplicate elementului nav, folosind pseudoclasele specifice, astfel încăt să fie identice cu imaginea prezentată mai jos.

    Suprimați afișarea implicită a elementului a->anchor, din zona de navigare.

      text-decoration: none;/*suprimam sublinierea*/
    

    Creați clasa active pentru a marca stilizarea unei legături active, pe care să o atribuiți textului HOME.

      <li> <a class="active" href="index.html" style="margin-left: -1rem;">HOME</a> </li>  
      
    nav a:hover, nav a:active { 
      background-color: #ebebeb;/*la trecerea mouse-ului nav afiseaza fudalul de culoare rosie*/
      color:#000; 
    } 
    nav a.active{
      background-color: #EA141F;  
    }
    


    Puneți în comentariu (sau suprimați) proprietatea care impune întregului site ca mărimea fontului să fie de 10px.

            /*html {
                box-sizing: border-box;
                font-size: 62.5%;    =10px 
            }*/
          

    Impuneți pe prima linie a fișierului de stil, proprietatea specifică pentru CSS3, care va îmbunătății aspectul paginii, prin faptul că blocurile vor fi măsutate pe exteriorul border-ului. În acest fel, fontul întregului site va fi afișat la 16px, ceea ce corespunde cu mărimea implicită a fontului, afișată în browser.

         
    * { 
    box-sizing: border-box; /*  Dimensiunile width si height vor reprezenta marimea blocului masurata pe exteriorul border-ului.*/
    } 
    
    

    Pentru a ameliora aspectul din section class="dreapta" interveniți în fișierul de stil cu următoarele modificări:

    • Adăugați în clasa dreapta proprietatea padding-bottom: 10px; pentru a impune o distanță (căptușeală) între chenarul clasei dreapta și elementele pe care le conține: img și p
    • .dreapta { 
       background-color: #FFF; 
       width: 100%; 
       border:1px solid #cdcdcd; 
       border-radius:8px; 
      padding-bottom: 10px;
      }  
      
    • Adăugați în fișierul de stil clasa clearfix, cu scopul de a controla elementele care se revarsă din containerul care le conține, în cazul nostru din clasa dreapta
    •   .clearfix {
        overflow: auto;
      }
      
    • Referiți clasa clearfix paragrafelor din <section class="dreapta">.
    •    <section class="dreapta">
      
         <h1>Postari populare</h1>
      
            <div class="clearfix">
              <p><img src="imagini/i1.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      
             <p><img src="imagini/i2.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      
             <p><img src="imagini/i3.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      
             <p><img src="imagini/i4.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      
            <p><img src="imagini/i5.jpg" height="72px" width="72px">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          </div>
      
        </section>
      
       </aside>
        


    Pentru a diferenția cele două elemente article pe care le-am folosit în această pagină, artibuiți clasa umbrit celor două elemente article din main.

    .umbrit {
     box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
    }
    
    .umbrit:hover {
     box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 8px 25px 0 rgba(0,0,0,0.19)!important;}
        
    



    TOP