Koti › Navigaattorit › Kuinka Apple muutti suunnittelun likaiseksi sanaksi

Kuinka Apple muutti suunnittelun likaiseksi sanaksi

Hei rakkaat lukijat a! Verkkosuunnittelu ja verkkokehitys kehittyvät erittäin nopeasti. Joka päivä näemme yhä enemmän uutuuksia, olivatpa ne sitten sovelluksia tai uusia palveluita, jotka tekevät verkkoelämästämme tuottavampaa ja mukavampaa. Ja web-suunnittelu on vain rajaton tila, jota rajoittavat vain "taiteilijan" (suunnittelijan) lahjakkuus ja taidot. Joten tänään puhumme VÄHEMMÄN- dynaaminen tyylinkuvauskieli, joka yksinkertaistaa CSS-tyylien kirjoittamista.

Mikä on VÄHEMMÄ?

LESS on CSS-lisäosa. Tämä tarkoittaa, että mikä tahansa CSS-koodi on kelvollinen VÄHEMMÄN, mutta VÄHEMMÄN lisäelementit eivät toimi tavallisessa CSS-koodissa. Tämä on hienoa, koska nykyinen CSS on jo toimiva VÄHEMMÄN koodi, mikä alentaa estettä uudelle teknologialle.

LESS lisää monia hyödyllisiä dynaamisia ominaisuuksia . Se esittelee muuttujia, operaatioita, elementtejä ja mixinejä. Mahdollisuus kirjoittaa tyylitaulukoita modulaarisesti säästää paljon vaivaa.

LESS tekee kirjoitustyyleistä paljon helpompaa. Esimerkiksi käyttämällä mixinejä luomme jotain funktioita, jotka voivat ottaa argumentteja. Seokset- voit sisällyttää kaikki luokan ominaisuudet toiseen luokkaan yksinkertaisesti sisällyttämällä luokan nimen yhden ominaisuuden arvoksi.

1
2
3
4
5
6
7
8
9
10
11

Pyöristetyt kulmat (@säde : 5px) (
border-radius : @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header(
.pyöristetyt kulmat;
}
#alatunniste (
.rounded-corners(10px) ;
}

Ja käännetty CSS näyttää tältä:

1
2
3
4
5
6
7
8
9
10

#header(
reunan säde : 5px ;
-webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
}
#alatunniste (
reunan säde : 10px ;
-webkit-border-radius: 10px ;
-moz-border-radius: 10px ;
}

Lataa etuliite-free.js-kirjasto ja linkitä se index.html:ään:

< script src= "prefix-free.js" type= "text/javascript" >

Tällä lopetamme valmistelun ja siirrymme suoraan Apple.com-tyylisen valikon luomiseen.

HTML-merkintä

Valikkoasetelma on melko yksinkertainen. Valikko perustuu järjestämättömään listaan. Avaa HTML-editori ja liitä seuraava koodi:

1
2
3
4
5
6
7
8
9

VÄHEMMÄN tyylejä

Tässä osiossa alamme koodata valikon VÄHEMMÄN kielellä. Niille, joille ohjelmointi on uusi, sekä kirjallisesti että VÄHEMMÄSSÄ syntaksissa, ei hätää, yritän laittaa kaiken hyllyille niin, että se on selvää. Ehkä jopa joku pitää tästä tavasta kirjoittaa tyylejä sivustolle, koska se on todella tuottavampaa.

Katsotaanpa, mistä osista valikko koostuu:

Kuten yllä olevasta kuvakaappauksesta näemme, Apple.com-navigaatiossa on seuraavat 6 pääosaa:

Varjoa käytetään;
raja;
Erotin valikon kohtien välillä;
tausta gradientti;
Himmennyksen vaikutus, kun hiirtä liikutetaan;
Valikkoteksti.

Tyyliä voidaan käyttää kahdella tavalla:

Crunch

Tärkeä: kun käytät ensimmäistä menetelmää, jotta styles.less sisällytetään ennen less.js-kirjastoa! Älä myöskään unohda yhdistää etuliitteetön.
Joten tyylitaulukko näyttää tältä:

1
2
3
4
5

Suosittu luokassa: