Az újoncok a CSS-ben játszanak némi fekete technológiával

fanxiaolin84 · Közzétéve 2017. 12. 04. 20:24:39

Jaj
1. Mozgatni az egeret a weboldalra, és eltűnik = =
*{ kurzor: nincs!fontos; }2. Egyszerű szövegelmosódási effekt
*{ szín: átlátszó; text-shadow: #111 0 0 5px; }
3. Több szegély
.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); magasság: 200px; margó: 50px automata; szélesség: 400px}
4. Szerkesszd valós időben a CSS-t
<!DOCTYPE html><html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body></html>
5. Egyszerű műveletek a CSS-ben
.div{ szélesség: kalkulus (100% - 500px); }
6、határ-sugár
Mert alapvetően sokan így használják:
.div { szegélysugár: 4px; }
Egy kicsit magasabb kategóriás megoldás ilyen:
.div { szegélysugár: 4px 6px 6px 4px; }
Azonban így használják az ultimate black technológiát:
.div { szegélysugar: 5px 5px 3px 2px / 5px 5px 1px 3px; }

szélsősugár 8 értéket rendelhetünk:
A vágás eleje a vízszintes irányt befolyásolja, a hátsó vágás pedig a függőleges irányt.
Minden szám négy különböző irányt jelöl.

7、outline-offset
Amikor CSS-t írsz bemenet alatt, ismerkedsz a következő állításokkal:
input { vázlat : nincs; }input:fókusz { vázlat : nincs; Így lehet eltávolítani az alapértelmezett kék vezetékkeretet a bemeneti bemeneti dobozból.
Van egy körvonal-eltolás tulajdonság is a CSS-ben, ahol beállíthatod az alapértelmezett vezetékkeret távolságát:
input { körvonal-eltolás: 4px ; }(Webes front-end tanulási cserecsoport: 328058344 Ne beszélgessünk, ne lépj be, hacsak nem tetszik! Állítsd be az attribútum értékének méretét, és láthatod a körvonal távolságváltozását.
Végül bemutatok egy demót a nagy fehérről a tények előtt
<!doctype html><html> <head> <meta charset="utf-8"> <title>Baymax</title> <link rel=stylesheet href="demo2.css"/> </head> <style> body { háttér: #595959; } #baymax{ /* középre van állítva*/ margó: 0 automatikus; /*magasság*/ magasság: 600px; /*rejtse túlcsordulás*/ túlcsordulás: rejtve; } #head{ magasság: 64px; szélesség: 100px; /*Definiáljuk a lekerekített sarok alakját százalékként*/szegélysugar: 50%; /*háttér*/ háttér: #fff; A marzs: 0 automata; margó-alul: -20px; /*Állítsd be az alsó keret stílusát*/ keret-alját: 5px fix #e0e0e0; /*attribútum határozza meg az elemek halmozási sorrendjét; A magasabb stack-sorrendű elemek mindig az alacsonyabb stack orderrel rendelkező elemek előtt állnak*/ z-index: 100; /*Generálj relatív pozícionált elemeket*/ pozíció: relatív elemeket; } #eye, #eye2{ szélesség: 11px; magasság: 13 px; Háttér: #282828; határsugar: 50%; pozíció: relatív állapot; Felül: 30px; bal: 27 fős profil; /*rotate az elemet*/transformáció: forgat(8°); } #eye2{ /*Szimmetrikusan forgatni*/ transzformáció: forgat(-8°); balra: 69px; felül: 17px; } #mouth{ szélesség: 38px; magasság: 1,5 px; Háttér: #282828; pozíció: relatív állapot; balra: 34px; felül: 10px; } /*törzs és has*/ #torso, #belly{ margin: 0 automat; } magasság: 200px; szélesség: 180px; Háttér: #fff; határsugar: 47%; /*Szegély beállítása*/ szegély: 5px szilárd #e0e0e0; border-top: nincs; z-index: 1; } #belly{ magasság: 300px; szélesség: 245px; margó-felül: -140px; z-index: 5; } #cover{ szélesség: 190px; Háttér: #fff; magasság: 150px; A marzs: 0 automata; pozíció: relatív állapot; Felül: -20px; határsugar: 50%; } /*szív*/ #heart{ width:25px; magasság: 25 px; határsugar: 50%; pozíció: relatív pozíció; /*Árnyékeffektek hozzáadása a keret körül*/ box-shadow:2px 5px 2px #ccc beszúrás; jobbra:-115px; top: 40px; z-index:111; border:1px szilárd #ccc; } /*kar*/ #left-kar, #right-kar{ magasság: 270px; szélesség: 120px; határsugar: 50%; Háttér: #fff; A marzs: 0 automata; pozíció: relatív állapot; Csúcs: -350px; balra: -100px; transzformáció: forgatás (20°); z-index: -1; } #right-kar{ transzformáció: forgat(-20°C); bal: 100px; csúcs: -620px; } /*ujj*/ #l-nagyujj, #r-nagyujj{ magasság: 50px; szélesség: 20px; határsugar: 50%; Háttér: #fff; pozíció: relatív állapot; Felül: 250px; bal oldalra: 50px; transzformáció: forgat(-50 fok); } #r-bigfinger{ balra: 50px; transzformáció: forgatás (50°); } #l-kisujj, #r-kisujj{ magasság: 35 px; szélesség: 15px; határsugar: 50%; Háttér: #fff; pozíció: relatív állapot; Csúcs: 195px; bal: 66 PX; transzformáció: forgatás (-40°C); } #r-smallfinger{ háttér: #fff; transzformáció: forgatás (40 fok), Csúcs: 195px; balra: 37px; } /*comb*/ #left-láb, #right-láb{ magasság: 170px; szélesség: 90px; határsugar: 40% 30% 10px 45%; Háttér: #fff; pozíció: relatív állapot; Csúcs: -640px; bal: -45px; transformáció: forgat(-1 fokus) forgásszögben; z-index: -2; A marzs: 0 automata; } #right-láb{ háttér: #fff; Határsugar: 30%, 40%, 45%, 10px; A marzs: 0 automata; Csúcs: -810px; bal oldalra: 50px; transzformáció: forgat(1 fok) forgás; </style><body> } <div id="baymax">  <div id="fej"> <div id="eye"></div> <div id="eye2"></div> <div id="mouth"></div> </div>  <div id="torso"> <div id="heart"></div> </div>  <div id="has"> <div id="fedő"></div> </div>  <div id="bal kar"> <div id="l-nagyujj"></div> <div id="l-kisujj"></div> </div>  <div id="jobbkar"> <div id="r-bigfinger"></div> <div id="r-littlefinger"></div> </div>  <div id="bal láb"></div>  <div id="right-leg"></div> </div></body><html>

QWERTYU · Közzétéve 2017. 12. 05. 9:10:05

A kód szerkeszthető

Admin · Közzétéve 2017. 12. 05. 9:21:19

Dabai jó

Rendeztem a kódot

A bejelentkezés látható.

[CSS/DIV] Az újoncok a CSS-ben játszanak némi fekete technológiával

Pontszám

Megtekintett szakaszok