• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wygład css ładne stylizowanie strony

Aruba Cloud - Virtual Private Server VPS
0 głosów
292 wizyt
pytanie zadane 22 kwietnia 2024 w HTML i CSS przez niezalogowany
https://meymar.serv00.net/blogMistake.html witam mam takie coś bo robię bloga oczywiście to szkic na razie ale muszę się nauczyć ładnie stylizować strony pomoże ktoś ?

 

Z góry dziękuję

1 odpowiedź

+3 głosów
odpowiedź 22 kwietnia 2024 przez VBService Ekspert (256,600 p.)
edycja 22 kwietnia 2024 przez VBService

Polecam

 

 

BTW,

nie ma potrzeby podawać type="text/css" wystarczy zapis

<link rel="stylesheet" href="stylBloga.css">

możesz używać takiego zapisu dla kodowania strony

<meta charset="UTF-8">

dobrze jest umieści taki zapis w przypadku treści na stronie w języku polskim

<html lang="pl">

Podstawowa struktura dokumentu HTML ]

 

nie mieszaj polskiego nazewnictwa dla atrybutu id z angielskim nazewnictwem, zdecyduj się na jeden sposób, zalecane jest używanie języka angielskiego.

<div id="contener">    
    <div id="tytuł">      
      Blog M      
    </div>
    
    <div id="rest">22/4/2024 00:22:22</div>    
    <div id="login">      
       LOGIN:      
    </div>
    <div id="artykuły">      
      <div class="artykuł"> </div>
      ...
    </div>
    
    <div id="stopka">
      ...     
    </div>    
  </div>

w przypadku używania polskiego lepiej unikaj używania polskich znaków diaktrytycznych

<div id="tytuł">      
  Blog M      
</div>

    ...

<div id="artykuły"> 
  <div class="artykuł"> </div> 
  ...
</div>

tytuł -> tytul, artykuły -> artykuly, ... itd.

 

polisz-inglisz wink

<div id="contener">

kontener lub container

 

Jak dobrać kolory na stronę internetową?

 

Wywoływanie kodu javascript w oparciu o zdarzenie staraj się zapisywać z poziomu kodu js-a, a nie z html-a.

<body onload="odliczanie()">
window.onload = mojaFunkcja1;
window.addEventListener('load', mojaFunkcja2);

function mojaFunkcja1(e) {
  console.log(e.type, 'mojaFunkcja1'); // dla prezentacji
}

function mojaFunkcja2() {
  console.log('mojaFunkcja2'); // dla prezentacji
}

// lub

window.onload = function() {
  // ... kod
};

window.addEventListener('load', function() {
  // ... kod
});

// lub

window.onload = () => {
  // ... kod
};

window.addEventListener('load', () => {
  // ... kod
});

Zdarzenia czyli różne rzeczy, które mogą się dziać w przeglądarce ]
Events - tematy dodatkowe

Jeżeli nie wstawiasz kodu html, staraj się używać .textContent

<body>
  <div id="container">
    <!-- ... -->

    <div id="rest"></div>

    <!-- ... -->    
  </div>

  <script>
    window.addEventListener('load', () => {
      setInterval(odliczanie, 1000);
    });

    function odliczanie()
    {
      const dzisiaj = new Date();
      const dzien = dzisiaj.getDate(),
            miesiac = dzisiaj.getMonth() + 1,
            rok = dzisiaj.getFullYear();

      const godzina = dzisiaj.getHours().toString().padStart(2, '0'),
            minuta = dzisiaj.getMinutes().toString().padStart(2, '0'),
            sekunda = dzisiaj.getSeconds().toString().padStart(2, '0');

      document.querySelector('#rest').textContent = 
        dzien + "/" + miesiac + "/" + rok + " " +
        godzina + ":" + minuta + ":" + sekunda;
    }
  </script>
</body>

 

komentarz 22 kwietnia 2024 przez niezalogowany
Witam wow długa odp mówię tak tak wiem o tych pierwszych rzeczach  ale tak mi wygodniej i tak zapomiałem i HTML Lang =pl coś takiego no i oczywiście dziękuję za pomoc
komentarz 22 kwietnia 2024 przez VBService Ekspert (256,600 p.)

Tu masz jeszcze błąd, spacja w adresie między https: a //

<link href="https: //fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

komentarz 22 kwietnia 2024 przez niezalogowany
Dziwne z google to skopiowałem
komentarz 22 kwietnia 2024 przez VBService Ekspert (256,600 p.)
edycja 22 kwietnia 2024 przez VBService

Do "tworzenia" układu strony (layout-u) staraj się wykorzystywać flex lub grid, lub oba razem. Float nie jest już zalecany do tego.

[ CSS Layouts: History from Float to Flexbox and Grid ]

:root {
  --main-color-container: 180deg;
  --main-color-title: 248.5deg;
  --main-color-articles: calc(var(--main-color-container) + 20deg);
  --main-color-article: calc(var(--main-color-articles) + 40deg);
  --main-color-footer: calc(var(--main-color-title) + 25deg);
}
body {
  margin: 0;
  padding: 0;
  background-color: black;  
}
.container,
.container div {
  box-sizing: border-box;
  border-radius: 6px;
}
.container {
  background-color: hsl(var(--main-color-container) 100% 94%);
  color: hsl(var(--main-color-container) 50% 47%);
  border: 2px solid hsl(var(--main-color-container) 70% 67%);

  width: 925px;
  margin: 5% auto;
  padding: 25px;
}
.title,
.rest-login-wrapper,
.articles,
.footer {
  width: 100%;
  margin: 50px auto 0; 
}
.title {
  background-color: hsl(var(--main-color-title) 80% 68%);
  color: hsl(var(--main-color-title) 40% 34%);
  border: 2px solid hsl(var(--main-color-title) 60% 54%);

  text-align: center;
  font-family: "Noto Serif", serif;
  font-size: 70px;
  
  height: 115px;
  margin: 15px auto 0;                                             
}
.rest-login-wrapper {
  display: flex;
  justify-content: space-between;
}
#rest,
#login {
  height: 115px;
  padding: 8px;
}
#rest {
  background-color: darkorange;
  border: 2px solid tomato;      
  color: darkslategray;

  width: 412px;  
  font-size: 35px;
}
#login {
  border: 2px solid darkolivegreen;
  background-color: slategray;
  color: darkred;

  width: 302px;
  font-size: 18px;
}
.articles {
  background-color: hsl(var(--main-color-articles) 100% 94%);
  color: hsl(var(--main-color-articles) 50% 47%);
  border: 2px solid hsl(var(--main-color-articles) 70% 67%);
  /*
  border: 3px solid darkcyan;
  background-color: white;
  */  
  padding: 10px;
}
.article {
  background-color: hsl(var(--main-color-article) 100% 94%);
  color: hsl(var(--main-color-article) 50% 47%);
  border: 2px solid hsl(var(--main-color-article) 70% 67%); 
  /*
  border: 2px solid black;
  background-color: whitesmoke;
  */
  width: 100%;
  height: 85px;  
}
.article + .article {
  margin: 10px 0 0;
}
.footer {
  background-color: hsl(var(--main-color-footer) 80% 68%);
  color: hsl(var(--main-color-footer) 40% 34%);
  border: 2px solid hsl(var(--main-color-footer) 60% 54%);

  height: 115px;  
}
<body>
  <div class="container">    
    <div class="title">      
      Blog M      
    </div>

    <div class="rest-login-wrapper">
      <div id="rest">
        22/4/2024 12:50:08
      </div>
      <div id="login">      
        LOGIN:      
      </div>
    </div>

    <div class="articles">
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
      <div class="article"> </div>
    </div>

    <div class="footer"></div>
  </div>
</body>

[ :root ]  [ var(--zmienna) ]  [ calc() ]  [ box-sizing ]  [ hsl() ]

1
komentarz 22 kwietnia 2024 przez niezalogowany
Ach jestem młody a jednak staroświecki
1
komentarz 22 kwietnia 2024 przez Sefinek Obywatel (1,710 p.)

@VBService, polisz-inglisz, rozbawiło mnie to nawet :D

1
komentarz 24 kwietnia 2024 przez batmat1903 Początkujący (340 p.)

@VBService, świetne treści podlinkowałeś - nie znałem, a przydadzą się bardzo! Pozdrawiam

Podobne pytania

0 głosów
1 odpowiedź 968 wizyt
pytanie zadane 23 października 2019 w HTML i CSS przez Squbany221 Użytkownik (650 p.)
0 głosów
2 odpowiedzi 688 wizyt
pytanie zadane 4 grudnia 2018 w HTML i CSS przez NeQ Początkujący (470 p.)
0 głosów
1 odpowiedź 914 wizyt
pytanie zadane 21 grudnia 2018 w HTML i CSS przez jared Gaduła (3,600 p.)

93,335 zapytań

142,328 odpowiedzi

322,406 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...