Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Laborator nr.3

    Încărcat de

    Eugeniu Zamfirov
    62 vizualizări16 pagini

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    62 vizualizări16 pagini

    Laborator nr.3

    Încărcat de

    Eugeniu Zamfirov

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 16

    Ministerul Educaţiei, Culturii şi Cercetării

    al Republicii Moldova
    Universitatea Tehnică a Moldovei
    Facultatea Electronică şi Telecomunicaţii
    Departamentul Telecomunicaţii şi Sisteme Electronice

    Lucrarea de laborator Nr.3


    La disciplina
    “Aplicații software scepializate ”
    Tema:Pozitionarea continutului pe pagina web.

    A efectuat: st.gr IMTC-181


    Zamfirov Eugeniu

    A verificat: l.univ. Alexei Arina

    Chișinău 2021
    I)Obiective:
    -pozitionarea continutului;

    - realizarea raportului pentru lucrarea de laborator.

    II)Pasii principali.

    1)In fisierul main.css,chiar sub stilurile noastre de grila ,adaugand clasificarea sub clasa group .

    2)Adaugam o clasa de logo la elemental <h1> .Apoi in css ,adaugam o noua sectiune de stiluri
    pentru antetul principal.

    3)Adaugam un element <br> ,sau o pauza de linie intre cuvintul REZERVATII si cuvintul
    NATURALE pentru a forta textul logo-ului sa se afiseze pe 2 linii .In cadrul CSS,adaugam un
    chenar .
    4)Se aplica stilurile de clasificare pe care le-am configurat anterior elementului <header>

    5)Adaugam clasei primary-footer la elementul >footer>.Creeam o noua sectiune in fisierul main.css


    pentru a precalifica elementul <small>

    6)Cream 2 clase col-1-3,pentru o treime si col-2-3 pentru 2 treimi in sectiunea fisierului main.css.Creeam
    noi selectori care vor impartasi afisarea si stilurile de proprietati.

    10)Punem putin spatiu intre fiecare dintre coloane.Folosim un nume de clasa grid pentru a identifica
    grila.
    III)Codul HTML si CSS

    HTML:

    <!DOCTYPE html>

    <html lang="ro">

    <head>

    <meta charset="utf-8">

    <title>

    Livrare Flori Hancesti

    </title>

    <link rel="stylesheet" href="assets/stylesheet/main.css">

    </head>

    <body>

    <header class="container group">


    <section class="container">

    <h1 class="logo">

    <a href="acasa.html">

    LIVRARE <br> FLORI <br> HANCESTI

    </a>

    </h1>

    </section>

    <nav>

    <a href="acasa.html">Acasa</a>

    <a href="buchete.html" target="_blank">Buchete</a>

    <a href="flori_camera.html" target="_blank">Flori de camera</a>

    <a href="cosuri.html" target="_blank">Cosuri</a>

    <a href="compozitii.html" target="_blank">Compozitii</a>

    <a href="contacte.html" target="_blank">Contacte</a>

    </nav>

    </header>

    <p></p>

    <section class="grid">

    <!--Buchete-->
    <section class="col-1-3">

    <a href="buchete.html" target="_blank">

    <h5>Buchete</h5>

    <h3>Orice floare se poate transforma in buchet</h3>

    </a>

    <p>Alege un buchet deja existent sau utilizeaza-ti toata imaginatia


    pentru crearea la ceva nou! </p1>

    </section>

    <!--Flori de camera-->

    <section class="col-1-3">

    <a href="flori_camera.html" target="_blank">

    <h5>Flori de camera</h5>

    <h3>Flori pentru interior sau exterior</h3>

    </a>

    <p>Cel mai larg asortiment in stoc sau la comanda </p>

    </section class="col-1-3">

    <!--Cosuri-->

    <section class="col-1-3">

    <a href="cosuri.html" target="_blank">

    <h5>Cosuri</h5>
    <h3>Doresti originalitate ,atunci comanda chiar acum un cos</h3>

    </a>

    <p>Cel mai larg asortiment in stoc sau la comanda </p>

    </section>

    <!--Compozitii-->

    <section class="col-1-3">

    <a href="compozitii.html" target="_blank">

    <h5>Compozitii</h5>

    <h3>Cumpara ceva original si nemaivazut pan acum</h3>

    </a>

    <p>Creaza ceva original doar bazandute doar pe imaginatie </p>

    </section>

    </section>

    <footer class="primary-footer container group">

    <small class="hero container"> &copy;LIVRARE FLORI HANCESTI 2021


    </small>

    <nav>

    <a href="acasa.html">Acasa</a>

    <a href="buchete.html" target="_blank">Buchete</a>

    <a href="flori_camera.html" target="_blank">Flori de camera</a>


    <a href="cosuri.html" target="_blank">Cosuri</a>

    <a href="compozitii.html" target="_blank">Compozitii</a>

    <a href="contacte.html" target="_blank">Contacte</a>

    </nav>

    </footer>

    </body>

    </html>

    CSS:

    html, body, div, span, applet, object, iframe,

    h1, h2, h3, h4, h5, h6, p, blockquote, pre,

    a, abbr, acronym, address, big, cite, code,

    del, dfn, em, img, ins, kbd, q, s, samp,

    small, strike, strong, sub, sup, tt, var,

    b, u, i, center,
    dl, dt, dd, ol, ul, li,

    fieldset, form, label, legend,

    table, caption, tbody, tfoot, thead, tr, th, td,

    article, aside, canvas, details, embed,

    figure, figcaption, footer, header, hgroup,

    menu, nav, output, ruby, section, summary,

    time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

    article, aside, details, figcaption, figure,

    footer, header, hgroup, menu, nav, section {

    display: block;

    body {

    line-height: 1;

    ol, ul {

    list-style: none;

    blockquote, q {

    quotes: none;

    }
    blockquote:before, blockquote:after,

    q:before, q:after {

    content: '';

    content: none;

    table {

    border-collapse: collapse;

    border-spacing: 0;

    /*

    ===============================

    Grid

    ===============================

    */

    *,

    *:before,

    *:after {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }
    .container {

    margin: 0 auto;

    padding-left: 30px;

    padding-right: 30px;

    width: 1 auto;

    /*

    ===================

    Typography

    ===================

    */

    h1, h3, h4 ,h5, p {

    margin-bottom: 22px;

    /*
    ====================

    Buttons

    ====================

    */

    .btn{

    border-radius : 5px;

    display: inline-block;

    margin: 0;

    .btn-alt{

    border: 1px solid #0E0640;

    padding: 10px 30px;

    background: #33FF99;

    /*

    ===============

    Home

    ===============
    */

    .hero{

    padding: 22px 80px 66px 80px;

    /*

    ==========================

    Clearfix

    ==========================

    */

    .group:before,

    .group:after{

    content: "";

    display: table;}

    .group:after{

    clear: both;}

    .group{

    clear: both;

    *zoom: 1;}
    /*

    ================

    Primary header

    ================

    */

    .logo{

    border-top: 4px solid #648880;

    padding: 40px 0 22px ;

    float:left;}

    /*

    ===============

    Primary footer

    ===============

    */

    .primary-footer{

    padding-bottom: 44px;

    padding-top: 44px;}

    .col-1-3{

    width: 23.33%;}

    .col-2-3{
    width: 76.66%;}

    .col-1-3,

    .col-2-3{

    display: inline-block;

    vertical-align: top;}

    .grid,

    .col-1-3,

    .col-2-3{

    padding-left: 15px;

    padding-right: 15px;}

    .container,

    .grid{

    margin: 0 auto;

    width: 1200px;}

    .container{

    padding-left: 30px;

    padding-right: 30px;}
    IV)Concluzie.

    În urmă efectuării lucrării de laborator am inceput a face unele clarificari in CSS. In isierul
    main.css am adaugat clasa group,si o noua sectiune de stiluri pentru antetul principal .Am
    observat ca alementul <header> prinde contur.

    Am primit o grila cu patru coloane ,dupa ce am utilizat toti pasii.

    In cocluzie pot afirma ca multe din trasaturile limbajului HTML, cum ar fi independenta fata
    de platforma, structurarea formatării și legaturile hypertext, fac din el un foarte bun format.

    Site-ul a inceput a arata mai bine din punct de vedere al structurii,ceea ce i-a oferit un aspect
    vizual mai placut .

    S-ar putea să vă placă și