CHIUSA CSS CSS
Esempio 1:
Creeremo il file HTML per progettare il nostro pulsante di chiusura. Il file CSS verrà creato in cui modelleremo il nostro pulsante di chiusura. Usiamo il codice Visual Studio per tutti questi. Quando creiamo il file HTML, nel codice Visual Studio, scriviamo il codice in questo file. Dobbiamo salvare il file HTML con l'estensione del file di ".HTML "e il file CSS con l'estensione di".CSS ". Proviamo il codice dato:
Il codice sopra è il codice HTML, quindi ecco il tipo di questo documento menzionato come "HTML". Usiamo i tag in HTML, quindi dobbiamo aprire tag di "" e "". Il meta è definito nel tag "" e imposta come "chatSet = UTF-8". Usando questo, possiamo usare molti caratteri. Per il collegamento al file CSS, usiamo "" qui e "Rel" descrive la relazione. "HREF" è per dare il nome del file CSS a cui dobbiamo unirci a questo file HTML. Colleghiamo lo stile "Buttonstyle.File CSS "utilizzando" ".
Ora chiudi il "" e apri il tag "". La classe "" è qui per la separazione dei dati dal Web. Dobbiamo progettare il pulsante in questo file HTML. Il tipo di pulsante è "pulsante" e la classe è denominata "btn-close". Quindi, Apri "" e questa classe Span è definita con il nome "Cross icon". Il "& time" visualizzerà la "x" per il pulsante di chiusura. Vicino "", "", "
e tag "".
Codice CSS:
Nella codifica CSS, diamo stile al nostro pulsante di chiusura che abbiamo creato nel file HTML. Innanzitutto, menziona la classe dei pulsanti che è "BTN-Close". Metti un punto prima di questo "btn-close" e aprire staffa. Imposta "margine", "bordo" e "imbottitura" su "0". Poiché il margine è per creare lo spazio, il bordo è per la creazione del bordo attorno al pulsante. L'imbottitura è per la creazione di spazi tra elementi, quindi impostiamo tutti questi come "0".
Vogliamo applicare "nero" come colore di sfondo in modo da posizionare "Black: nero" qui. Il "colore" descrive il colore del carattere o della croce. Il "raggio di confine" si è adeguato al "20%". La larghezza descrive la larghezza del pulsante di chiusura che è "40px" e l'altezza è anche "40px". Il "display" è "flessibile", quindi imposterà la lunghezza flessibile sul display. La proprietà "Flex-Flow" viene applicata qui alla "colonna NowRap". Dobbiamo giustificare il contenuto al centro. Quindi, la linea "Justify-Content: Center" la giustificherà al centro. Inoltre, allinea gli articoli al centro. Seleziona il "cursore" come "puntatore". La transizione viene applicata in quanto controllerà la velocità quando la proprietà CSS cambia. È impostato come "tutti i 150 ms".
Per l'output, dobbiamo usare il browser. Possiamo usare qualsiasi browser. Abbiamo installato un browser premendo "Ctrl+Shift+X" e installando "Apri nel browser". Quindi, per il rendering dell'uscita, premiamo "Alt+B" e l'uscita verrà visualizzata e il pulsante appare sullo schermo che viene mostrato di seguito.
Qui, puoi vedere che creiamo un semplice pulsante di chiusura. Nei prossimi esempi, creeremo più di un pulsante di chiusura e li progetteremo usando diversi colori e forme in CSS.
Esempio n. 2:
In questo esempio, creeremo più di un pulsante di chiusura e applicheremo colori diversi a questi pulsanti. Crea i pulsanti Chiudi nel file HTML.
In questo file HTML, creiamo più pulsanti di chiusura usando il tag "". Abbiamo chiamato la classe del pulsante come "pulsante" per la creazione del primo pulsante. Quindi, metti un simbolo "x" che viene visualizzato come il carattere "x" vicino. Abbiamo chiamato il secondo pulsante "pulsante pulsante 2". Il nome della classe del terzo pulsante è "pulsante pulsante3". E il quarto e il quinto pulsanti sono denominati rispettivamente "pulsante pulsante" e "pulsante pulsante". Dobbiamo chiudere il tag del pulsante ad ogni riga.
Codice CSS:
Nella prima riga, posizionare un punto e quindi digitare il nome del primo pulsante che è "pulsante" qui e iniziare a progettare il pulsante. Il colore dello "sfondo" del primo pulsante di chiusura è "#4Caf50" che è il codice di colore verde, quindi il primo pulsante di chiusura apparirà verde. Il prossimo "colore" è per impostare il colore di "x" su "bianco".
Ora, "imbottitura" è "15px" verticale e viene applicato verticale "32px". Il "align di testo" è impostato sul "Centro". Non abbiamo alcun testo scritto nel pulsante di chiusura, quindi impostiamo la proprietà "decorazione del testo" su "nessuno". Il "display" come "blocco inline" è per la visualizzazione di un contenitore in linea. Correggi la "dimensione del carattere" su "16px". E i margini verticali sono "4px" e il margine orizzontale è "2px". "Pointer" è usato come "cursore".
Ora, vogliamo cambiare i colori di sfondo del pulsante rimanente in modo da aggiungere solo il colore di sfondo ai pulsanti rimanenti. Chiudi la staffa del primo pulsante. Metti un punto e il nome del secondo pulsante e imposta il colore di sfondo. Il codice del colore di sfondo è "#008CBA" che viene visualizzato come "blu". Cambia il colore di tutti i pulsanti con la stessa proprietà e salvalo. Vedi l'output, tutti i pulsanti vicini sono di colori diversi.
Esempio # 3:
Usiamo il nostro precedente file HTML che abbiamo creato nell'esempio 2 e modifichiamo semplicemente il codice CSS. Quindi, applicare forme diverse al pulsante Chiudi qui in questo esempio.
Codice CSS:
Abbiamo impostato il colore di sfondo per il primo pulsante come "verde". L'imbottitura è "20px" e questo si applicherà a tutti e quattro i lati. La "dimensione del carattere" viene modificata in "16px". Il margine è "4px" verticale e orizzontale "2px". La nuova proprietà che abbiamo aggiunto nei pulsanti rimanenti è la proprietà "raggio di confine". Questo cambierà gli angoli del pulsante in una forma rotonda. E applicare anche colori diversi a tutti i pulsanti.
Il "raggio di confine" per il primo pulsante è impostato come "2px" e il colore del suo "sfondo" è "rosso". Il secondo pulsante "Border-Radius" è "4px" e il "colore di sfondo" è "blu". Il terzo, il quarto e il quinto pulsanti "radius di confine" sono rispettivamente "8px", "12px" e "50%". Inoltre, i colori dello sfondo per questi pulsanti sono rispettivamente "gialli", "viola" e "arancione". Controlla l'output e guarda come vengono visualizzati questi pulsanti di chiusura sul browser.
Nell'output sopra, puoi notare che gli angoli dei pulsanti ravvicinati sono arrotondati. Tutti i pulsanti vicini sono di forme diverse. L'ultimo pulsante di chiusura è un pulsante di chiusura a forma di cerchio. Applichiamo tutti questi stili nel nostro file CSS.
Conclusione:
Questa guida è fornita per sapere come creare il pulsante di chiusura in HTML e CSS. Qui, abbiamo progettato e disegnato diversi pulsanti ravvicinati. Abbiamo anche fornito il codice HTML e CSS e l'output di tutti i codici. Hai imparato l'uso di HTML e CSS in questa guida e sarai in grado di creare i pulsanti ravvicinati ogni volta che ne hai bisogno nei tuoi progetti o siti Web. Abbiamo anche spiegato i codici qui e abbiamo dimostrato tre diversi esempi per te.