Ouch
1. Perkelkite pelę į tinklalapį ir jis dingo = =
*{ žymeklis: nėra!svarbu; }2. Paprastas teksto suliejimo efektas
*{ spalva: skaidri; teksto šešėlis: #111 0 0 5px; }![]()
3. Kelios sienos
.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2); aukštis: 200px; paraštė: 50px automatinis; plotis: 400px}![]()
4. Redaguokite CSS realiuoju laiku
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>![]()
5. Paprastos operacijos CSS
.div{ plotis: calc(100% - 500px); }![]()
6 、 sienos spindulys
Nes iš esmės daugelis žmonių jį naudoja tokiu būdu:
.div { krašto spindulys: 4px; }![]()
Šiek tiek aukštesnės klasės yra toks:
.div { krašto spindulys: 4px 6px 6px 4px; }![]()
Tačiau taip naudojama aukščiausia juoda technologija:
.div { krašto spindulys: 5px 5px 3px 2px / 5px 5px 1px 3px; }![]()
sienos spindulys Jam gali būti priskirtos 8 reikšmės:
Pasvirojo brūkšnio priekis veikia horizontalią kryptį, o pasvirojo brūkšnio galas - vertikalią kryptį.
Kiekvienas skaičius reiškia keturias skirtingas kryptis.
7 、 Kontūro poslinkis
Rašydami CSS pagal įvestį, būsite susipažinę su šiais teiginiais:
input { kontūras : nėra; }input:focus { kontūras : nėra; Štai kaip pašalinti numatytąjį mėlyną vielinį rėmą iš įvesties laukelio.
CSS taip pat yra kontūro-poslinkio ypatybė, kurioje galite nustatyti numatytojo vielinio rėmo atstumą:
input { kontūro poslinkis: 4px ; }(Žiniatinklio mokymosi mainų grupė: 328058344 Jokių smulkmenų, neįeikite, nebent jums tai patinka! Sureguliuokite atributo vertės dydį ir pamatysite kontūro atstumo pokytį.
Galiausiai, aš pateiksiu demonstraciją didelis baltas prieš faktus
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> kūnas { fonas: #595959; } #baymax{ /* nustatytas į centrą*/ paraštė: 0 automatinis; /*aukštis*/ aukštis: 600px; /*slėpti perpildymą*/ perpildymas: paslėptas; } #head{ aukštis: 64px; plotis: 100px; /*Apibrėžkite užapvalinto kampo formą procentais*/kraštinės spindulys: 50%; /*fonas*/ fonas: #fff; paraštė: 0 automatinis; paraštės apačioje: -20px; /*Nustatykite apatinės kraštinės stilių*/ border-bottom: 5px vientisas #e0e0e0; /*atributas nustato elementų krovimo tvarką; Elementai su aukštesne krūvos tvarka visada bus priešais elementus su žemesne krūvos tvarka*/ z indeksas: 100; /*Generuoti santykinius elementus*/ padėtis: santykinė; } #eye, #eye2{ plotis: 11px; aukštis: 13px; fonas: #282828; sienos spindulys: 50 %; pareigos: giminaitis; viršuje: 30px; kairėje: 27px; /*pasukti elementą*/transformuoti: pasukti (8 laipsnių); } #eye2{ /*Suktis simetriškai*/ transformuoti: pasukti(-8deg); kairėje: 69px; viršuje: 17px; } #mouth{ plotis: 38px; aukštis: 1,5 px; fonas: #282828; pareigos: giminaitis; kairėje: 34px; viršuje: 10px; } /*Liemuo ir pilvas*/ #torso, #belly{ margin: 0 auto; } aukštis: 200px; plotis: 180px; fonas: #fff; sienos spindulys: 47 %; /*Nustatyti kraštinę*/ kraštinę: 5px vientisas #e0e0e0; border-top: nėra; z indeksas: 1; } #belly{ aukštis: 300px; plotis: 245px; paraštės viršuje: -140px; z indeksas: 5; } #cover{ plotis: 190px; fonas: #fff; aukštis: 150px; paraštė: 0 automatinis; pareigos: giminaitis; viršuje: -20px; sienos spindulys: 50 %; } /*širdis*/ #heart{ plotis:25px; aukštis:25px; sienos spindulys:50%; padėtis:santykinė; /*Pridėkite šešėlių efektus aplink kraštinę*/ dėžutės šešėlis:2px 5px 2px #ccc įdėklas; dešinėje:-115px; viršuje:40px; z indeksas:111; kraštinė:1px kietas #ccc; } /*ranka*/ #left ranka, #right ranka{ aukštis: 270px; plotis: 120px; sienos spindulys: 50 %; fonas: #fff; paraštė: 0 automatinis; pareigos: giminaitis; viršuje: -350px; kairėje: -100px; transformuoti: pasukti (20 laipsnių); z indeksas: -1; } #right-arm{ transformuoti: pasukti(-20deg); kairėje: 100px; viršuje: -620px; } /*finger*/ #l-bigfinger, #r-bigfinger{ aukštis: 50px; plotis: 20px; sienos spindulys: 50 %; fonas: #fff; pareigos: giminaitis; viršuje: 250px; kairėje: 50px; transformuoti: pasukti (-50 laipsnių); } #r-bigfinger{ kairėje: 50px; transformuoti: pasukti (50 laipsnių); } #l-smallfinger, #r-smallfinger{ aukštis: 35px; plotis: 15px; sienos spindulys: 50 %; fonas: #fff; pareigos: giminaitis; viršuje: 195px; kairėje: 66px; transformuoti: pasukti (-40deg); } #r-smallfinger{ fonas: #fff; transformuoti: pasukti (40 laipsnių); viršuje: 195px; kairėje: 37px; } /*šlaunies*/ #left kojos, #right kojos{ aukštis: 170px; plotis: 90px; krašto spindulys: 40% 30% 10px 45%; fonas: #fff; pareigos: giminaitis; viršuje: -640px; kairėje: -45px; transformuoti: pasukti (-1 laipsnis); z indeksas: -2; paraštė: 0 automatinis; } #right-leg{ fonas: #fff; krašto spindulys:30% 40% 45% 10px; paraštė: 0 automatinis; viršuje: -810px; kairėje: 50px; transformuoti: pasukti (1 laipsnis); </style><body> } <div id="baymax"> <!-- Apibrėžkite galvą, įskaitant dvi akis, burną --> <div id="head"> <div id="eye"></div> <div id="eye2"> <</div>div id="mouth"></div> </div> <!-- Apibrėžkite kamieną, įskaitant širdį --> <div id="torso"> <div id="heart"></div> </div> <!-- Apibrėžkite pilvą, pilvą, įskaitant dangtelį (ir liemens jungtį) --> <div id="pilvas"> <div id="cover"></div> </div> <!-- Apibrėžkite kairę ranką, įskaitant du pirštus, vieną didelį ir vieną mažą --> <div id="left-arm"> <div id="l-bigfinger"></div> <div id="l-smallfinger"></div> </div> <!-- Apibrėžkite dešinę ranką, kurioje taip pat yra vienas didelis ir vienas mažas pirštai --> <div id="right-arm"> <div id="r-bigfinger"></div> <div id="r-smallfinger"></div> </div> <!-- apibrėžti kairę koją --> <div id="left-leg"></div> <!-- apibrėžti dešinę koją --> <div id="dešinė koja"></div> </div></body><html>![]()
|
Paskelbta 2017-12-04 20:24:39
|
|
|
|
Paskelbta 2017-12-05 09:10:05
|
Paskelbta 2017-12-05 09:21:19
