Mukauta Blogger.com-blogin otsikko-osaa
Viimeisessä opetusohjelmassa räätälöimme Linkit-osiota BloggeriisiTM weblog. Nyt räätälöimme otsikon osiota blogin yläosassa. Otsikko sisältää blogin otsikon ja kuvauksen. Aiomme muuttaa tekstin kirjasintyypin tai fontin ja lisätä värillisen taustan.

Kuten edellisessä opetusohjelmassa, teemme nämä parannukset vaihtamalla muutama rivi mallin HTML-koodista. Napsauta sivun yläosassa olevan valikon Template-välilehteä, joka vie sinut Muokkaa nykyistä mallia -osioon. Löydät mallin HTML-koodin alla olevasta ruudusta. Teemme muutaman muutoksen CSS-tyylikoodiin. (Jos haluat lisätietoja CSS-tyylisivuista, seuraa alla olevaa linkkiä.) Vieritä koodia alaspäin, kunnes tulet CSS-tyylitunnisteen Otsikko-osioon. Kuten näette, tyylitunniste on erittäin pitkä ja tyylitunnisteen otsikko-osassa on kuusi osaa.

  1. @media kaikki
  2. @media kämmenlaite
  3. #blogin otsikko
  4. # blogin otsikko a
  5. # blogin otsikko a: leiju
  6. #kuvaus

  • Koodin ensimmäinen osa (@media kaikki) hallitsee otsikon ominaisuuksia, mukaan lukien leveys, marginaali ja reunan koko. Toinen osa (@media handheld) perii nämä ominaisuudet ensimmäisestä osasta ja muuttaa myös otsikon leveyden 90 prosenttiin kannettavien näyttöjen tapauksessa. Koska haluamme uuden taustavärin käytetyksi molemmissa tapauksissa, lisäämme ensimmäiseen osaan taustavärin koodirivin (@media kaikki). Tämä uusi koodirivi on lihavoitu alla. Alla olevassa esimerkissä olemme käyttäneet vaaleanharmaata väriä, mutta voit käyttää kaikkia haluamiasi värejä.

    @media kaikki {
    #header {
    taustaväri: # EFE3EF;
    ...

  • Seuraavaksi vaihdamme otsikon kirjasintyypin suosittuun, rento tyylilajiin nimeltään Comic Sans MS. Tietysti voit vapaasti käyttää mitä tahansa fonttia. Mallin CSS-koodin seuraavat kolme osaa (# blogin otsikko, # blogin otsikko a, # blogin otsikko a: leiju) hallitsevat blogin otsikon ominaisuuksia. Ensimmäinen osa hallitsee yleisiä ominaisuuksia ja kaksi muuta osaa hallitsevat tekstin ulkoasua, kun se toimii hyperlinkinä. Asetaksesi otsikon kirjasinlajin tai fontin kaikille esiintymisille, lisäämme kirjasinperheen CSS-koodin ensimmäiseen osaan (# blog-title). Koska fontinimessämme on välilyöntejä, se on myös sijoitettava lainausmerkkeihin (“comic sans ms”).

    #blogin otsikko {
    kirjasinperhe: "comic sans ms";
    ...

  • Lopuksi työskentelemme CSS-koodin kanssa blogisi kuvaamiseksi (#description). Tämä on alkuperäisen kuuden viimeinen osa. Kuten alla näet, kaikki CSS-koodi, joka hallitsee kuvaustekstin kirjasinominaisuuksia, luetellaan yhdessä yhdellä rivillä. Ainoa mitä meidän on tehtävä, on lisätä ”comic sans ms” fonttiluettelon eteen, mikä tekee Comic Sans MS: stä kuvaustekstin oletusfontin.

    #kuvaus {
    ...
    fontti: 78% / 1.4em "sarjakuva sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
    ...
    }

Kun olet valmis, napsauta Esikatselu-painiketta esikatsellaksesi muutoksia ja sulje sitten selainikkuna palataksesi edelliselle verkkosivulle. Napsauta Tallenna mallimuutokset -painiketta. Kun näet vahvistusviestin, joka osoittaa, että muutokset on tallennettu, napsauta Julkaise uudelleen -painiketta. Varmista, että blogiisi on päivitetty napsauttamalla Näytä blogi -välilehteä sivun yläosan valikossa. Saatat joutua päivittämään blogin verkkosivun nähdäksesi muutokset.





Näyttökuvat uusitaan Google Inc.:n luvalla. GoogleTM, BloggerTM ja BlogSpotTM ovat joko Google Inc: n rekisteröityjä tavaramerkkejä tai tavaramerkkejä Yhdysvalloissa ja / tai muissa maissa.


Video-Ohjeita: Blender Tutorial 2.8: Robot Eyes [VFX] (Maaliskuu 2024).