Proprietà di visualizzazione CSS

Proprietà di visualizzazione CSS

IL proprietà di visualizzazione specifica il comportamento di visualizzazione di un elemento (il tipo di riquadro di rendering). Definisce come viene rappresentato un elemento nel layout, determinandone il posizionamento e l’interazione all’interno del flusso e della struttura del documento.

Sintassi:

display: value; 

Valori delle proprietà:

Valore Descrizione
in linea Viene utilizzato per visualizzare un elemento come elemento in linea.
bloccare Viene utilizzato per visualizzare un elemento come elemento di blocco
Contenuti Serve per far scomparire il contenitore.
flettere Viene utilizzato per visualizzare un elemento come contenitore flessibile a livello di blocco.
griglia Viene utilizzato per visualizzare un elemento come contenitore della griglia a livello di blocco.
blocco in linea Viene utilizzato per visualizzare un elemento come contenitore di blocchi a livello in linea.
inline-flex Viene utilizzato per visualizzare un elemento come contenitore flessibile a livello in linea.
griglia in linea Viene utilizzato per visualizzare un elemento come contenitore della griglia a livello in linea.
tabella in linea Viene utilizzato per visualizzare una tabella a livello in linea
voce-elenco Viene utilizzato per visualizzare tutti gli elementi in
  • elemento.
  • correre in Viene utilizzato per visualizzare un elemento in linea o a livello di blocco, a seconda del contesto.
    tavolo Viene utilizzato per impostare il comportamento come per tutti gli elementi. per tutti gli elementi.
    didascalia Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    gruppo-colonne-della-tabella Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    gruppo-intestazione-tabella Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    gruppo-footer-tabella Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    gruppo-riga-tabella Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    cella della tabella Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    colonna della tabella Viene utilizzato per impostare il comportamento come per tutti gli elementi.
    riga della tabella Viene utilizzato per impostare il comportamento come
    nessuno Viene utilizzato per rimuovere l'elemento.
    iniziale Viene utilizzato per impostare il valore predefinito.
    erediti Viene utilizzato per ereditare la proprietà dagli elementi dei suoi genitori.

    Esempio : Questo esempio utilizza 3 div per dimostrare la proprietà display CSS.

    HTML
          CSS Visualizza titolo proprietà> <style>#geeks1 {altezza: 100px;  larghezza: 200px;  sfondo: verde acqua;  blocco di visualizzazione;  } #geeks2 { altezza: 100px;  larghezza: 200px;  sfondo: ciano;  blocco di visualizzazione;  } #geeks3 { altezza: 100px;  larghezza: 200px;  sfondo: verde;  blocco di visualizzazione;  } .gfg { margine sinistro: 20px;  dimensione carattere: 42px;  peso carattere: grassetto;  colore: #009900;  } .geeks { dimensione carattere: 25px;  margine sinistro: 30px;  } .main { margine: 50px;  allineamento testo: centro;  } stile> testa> <body>  <div>techcodeview.comdiv> <div>blocco di visualizzazione; proprietàdiv> <div>  <div id='geeks1'>Blocca 1div> <div id='geeks2'>Blocca 2div> <div id='geeks3'>Blocca 3div> div> corpo> html> </pre>  </code>  <h2> <span>Esempi di proprietà di visualizzazione CSS </span> </h2> <h3>  <b>  <strong>1. Utilizzo del blocco display </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Questa proprietà viene utilizzata come proprietà predefinita di div. Questa proprietà posiziona i div uno dopo l'altro verticalmente. L'altezza e la larghezza del div possono essere modificate utilizzando la proprietà block. Se la larghezza non è menzionata, il div sotto la proprietà block occuperà la larghezza del contenitore. </span> </p>  <p dir='ltr'>  <b>  <strong>Esempio: </strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra. </span> </p>  <pre>#geeks1 {  background: teal;  display: block; } #geeks2 {  background: cyan;  display: block; } #geeks3 {  background: green;  display: block; } </pre> <p dir='ltr'>  <b>  <strong>Produzione: </strong>  </b>  <span>  </span> </p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt='proprietà del blocco di visualizzazione'> <h3>  <b>  <strong>2. Utilizzo della visualizzazione in linea </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Questa proprietà è la proprietà predefinita dei tag di ancoraggio. Viene utilizzato per posizionare il div in linea, ovvero in modo orizzontale. La proprietà di visualizzazione in linea ignora l'altezza e la larghezza impostate dall'utente. </span> </p>  <p dir='ltr'>  <b>  <strong>Esempio: </strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra. </span> </p>  <pre>#geeks1 {  background: teal;  display: inline; } #geeks2 {  background: cyan;  display: inline; } #geeks3 {  background: green;  display: inline; } </pre> <p dir='ltr'>  <b>  <strong>Produzione: </strong>  </b>  <span>  </span> </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt='visualizza l'output di esempio della proprietà in linea'> </p>  <h3>  <b>  <strong>3. Utilizzo del blocco Display Inline </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Questa funzionalità utilizza entrambe le proprietà menzionate sopra, blocco e in linea. Quindi, questa proprietà allinea il div in linea ma la differenza è che può modificare l'altezza e la larghezza del blocco. Fondamentalmente, questo allineerà il div sia in modalità blocco che in linea. </span> </p>  <p dir='ltr'>  <b>  <strong>Esempio: </strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra. </span> </p>  <pre>#geeks1  {  background: teal;  display: inline-block; }  #geeks2 {  background: cyan;  display: inline-block;  }  #geeks3 {  background: green;  display: inline-block; } </pre> <p dir='ltr'>  <b>  <strong>Produzione: </strong>  </b>  <span>  </span> </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt='visualizza l'output di esempio del blocco in linea'> </p>  <h3>  <b>  <strong>4. Utilizzo di Visualizza nessuno: </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Questa proprietà nasconde il div o il contenitore che utilizza questa proprietà. Usandolo su uno dei div renderà il lavoro più chiaro. </span> </p>  <p dir='ltr'>  <b>  <strong>Esempio: </strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra. </span> </p>  <pre>#geeks2 {  background: cyan;  display: none; } </pre> <p dir='ltr'>  <b>  <strong>Produzione: </strong>  </b>  <span>Non visualizzare alcuna proprietà attiva </span>  <b>  <strong>blocco 2 </strong>  </b>  </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt='non visualizzare alcuna proprietà'> </p>  <p dir='ltr'>  <b>  <strong>Browser supportati: </strong>  </b>  </p>  <p dir='ltr'> <span>I browser supportati da </span>  <b>  <strong>Proprietà di visualizzazione </strong>  </b>  <span>sono elencati di seguito: </span> </p>  <ul> <li value='1'>  <span>Google Chrome </span>  </li> <li value='2'>  <span>Bordo </span>  <span>  </span>  </li> <li value='3'>  <span>Firefox </span>  </li> <li value='4'>  <span>musica lirica </span>  </li> <li value='5'>  <span>Safari </span>  </li> </ul>  <br>  <br> </span> </td> </tr> </tbody> </table>
                         </div>
    
                         <!-- Article Footer with Prominent Share Buttons -->
                         <div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
                              <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
                                  <h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
                                     <i class="fa fa-share-alt text-tech-500"> </i>
                                    Condividere                              </h4>
                                 
                                  <div class="flex flex-wrap justify-center gap-3">
                                     <!-- Twitter -->
                                     <a href="https://twitter.com/intent/tweet?text=Proprietà di visualizzazione CSS&url=https://www.techcodeview.com/it/css-display-property" 
                                       target="_blank" rel="noopener noreferrer" 
                                       class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
                                         <i class="fa fa-twitter text-lg"> </i>
                                         <span class="hidden sm:inline">Twitter </span>
                                     </a>
    
                                     <!-- Facebook -->
                                     <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/it/css-display-property" 
                                       target="_blank" rel="noopener noreferrer"
                                       class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
                                         <i class="fa fa-facebook text-lg"> </i>
                                         <span class="hidden sm:inline">Facebook </span>
                                     </a>
                                    
                                     <!-- LinkedIn -->
                                     <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/it/css-display-property&title=Proprietà di visualizzazione CSS" 
                                       target="_blank" rel="noopener noreferrer"
                                       class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
                                         <i class="fa fa-linkedin text-lg"> </i>
                                         <span class="hidden sm:inline">LinkedIn </span>
                                     </a>
                                  </div>
                              </div>
                         </div>
                    </article>
    
                    <!-- Comments Placeholder / Random Articles -->
                    <div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
                         <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
                            Potrebbe Piacerti                     </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="group">
                                  <a href="/it/time-space-complexity-analysis-binary-search-algorithm" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                     <img loading="lazy" src="https://techcodeview.com/img/picked/27/time-space-complexity-analysis-binary-search-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Analisi della complessità temporale e spaziale dell'algoritmo di ricerca binaria" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                  </a>
                                  <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                     <a href="/it/time-space-complexity-analysis-binary-search-algorithm">Analisi della complessità temporale e spaziale dell'algoritmo di ricerca binaria </a>
                                  </h4>
                             </div> <div class="group">
                                  <a href="/it/do-i-need-mouse-pad" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
                                     <img loading="lazy" src="https://techcodeview.com/img/computer/31/do-i-need-mouse-pad.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ho bisogno di un tappetino per il mouse?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                                  </a>
                                  <h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
                                     <a href="/it/do-i-need-mouse-pad">Ho bisogno di un tappetino per il mouse? </a>
                                  </h4>
                             </div>
                         </div>
                    </div>
                 </div>
    
                 <!-- SECONDARY COLUMN (SIDEBAR) -->
                 <!-- Aside Column -->
     <div class="lg:col-span-4 space-y-8">
    	
    	 <!-- Best Articles Widget -->
    	 <div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
    		 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
    			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
                     <span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
                    Articoli Più             </h2>
    		 </div>
    		
    		 <!-- Owl Carousel Preserved Container -->
    		 <div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
    			 <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/computer-hardware">
    						 <img src="https://techcodeview.com/img/picked/52/computer-hardware.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Computer hardware" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/computer-hardware" class="hover:text-tech-500 transition-colors line-clamp-3">Computer hardware </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/psat-score-needed-national-merit-scholarship-1311078">
    						 <img src="https://techcodeview.com/img/blog/66/psat-score-needed-national-merit-scholarship.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Punteggio PSAT necessario per la borsa di studio al merito nazionale" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/psat-score-needed-national-merit-scholarship-1311078" class="hover:text-tech-500 transition-colors line-clamp-3">Punteggio PSAT necessario per la borsa di studio al merito nazionale </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/how-long-does-it-take-send-sat-scores-1311622">
    						 <img src="https://techcodeview.com/img/blog/28/how-long-does-it-take-send-sat-scores.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quanto tempo ci vuole per inviare i punteggi SAT?" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/how-long-does-it-take-send-sat-scores-1311622" class="hover:text-tech-500 transition-colors line-clamp-3">Quanto tempo ci vuole per inviare i punteggi SAT? </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/b-tree-visualization">
    						 <img src="https://techcodeview.com/img/ds-tutorial/04/b-tree-visualization.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="B Visualizzazione dell'albero" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/b-tree-visualization" class="hover:text-tech-500 transition-colors line-clamp-3">B Visualizzazione dell'albero </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/my-successful-harvard-application-131924">
    						 <img src="https://techcodeview.com/img/blog/88/my-successful-harvard-application.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="La mia domanda di successo ad Harvard (app comune completa + supplemento)" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/my-successful-harvard-application-131924" class="hover:text-tech-500 transition-colors line-clamp-3">La mia domanda di successo ad Harvard (app comune completa + supplemento) </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/how-get-iphone-emojis-android">
    						 <img src="https://techcodeview.com/img/android-tutorial/83/how-get-iphone-emojis-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Come ottenere emoji per iPhone su Android" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/how-get-iphone-emojis-android" class="hover:text-tech-500 transition-colors line-clamp-3">Come ottenere emoji per iPhone su Android </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/what-is-nginx">
    						 <img src="https://techcodeview.com/img/nginx-tutorial/68/what-is-nginx.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cos'è NGINX?" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/what-is-nginx" class="hover:text-tech-500 transition-colors line-clamp-3">Cos'è NGINX? </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/supervised-unsupervised-learning">
    						 <img src="https://techcodeview.com/img/it-problems-solutions/94/supervised-unsupervised-learning.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Apprendimento supervisionato e non supervisionato" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/supervised-unsupervised-learning" class="hover:text-tech-500 transition-colors line-clamp-3">Apprendimento supervisionato e non supervisionato </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/mysql-describe-table">
    						 <img src="https://techcodeview.com/img/mysql-tutorial/98/mysql-describe-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="TABELLA DESCRITTIVA MySQL" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/mysql-describe-table" class="hover:text-tech-500 transition-colors line-clamp-3">TABELLA DESCRITTIVA MySQL </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE --> <!-- ARTICLE -->
    			 <article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
    				 <div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
    					 <a href="/it/generative-adversarial-network">
    						 <img src="https://techcodeview.com/img/python/98/generative-adversarial-network.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rete avversaria generativa (GAN)" class="w-full h-full object-cover">
    					 </a>
    				 </div>
    				 <div class="flex-1 min-w-0">
    					 <h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
                             <a href="/it/generative-adversarial-network" class="hover:text-tech-500 transition-colors line-clamp-3">Rete avversaria generativa (GAN) </a>
                         </h4>
    				 </div>
    			 </article>
    			 <!-- /ARTICLE -->
    		 </div>
    		
    
             <!-- Categories -->
    		 <div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
    			 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categoria </h2>
    		 </div>
    		 <div class="flex flex-wrap gap-2">
                 <a href="/it/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                    Blog
                 </a> <a href="/it/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                    Conversione Java
                 </a> <a href="/it/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                    Matematica
                 </a> <a href="/it/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                    Collezioni Java
                 </a> <a href="/it/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                    Differenze
                 </a> <a href="/it/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
                    Stringa Java
                 </a>
             </div>
    
             <!-- Interesting Articles Widget -->
    		 <div class="mt-8">
    			 <div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
    				 <h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Articoli Interessanti </h2>
    			 </div>
    			
    			 <div id="owl-carousel-4" class="owl-carousel owl-theme">
    				 <!-- ARTICLE -->
    				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
    					 <div class="absolute inset-0">
    						 <img src="https://techcodeview.com/img/blog/84/expert-strategy-guide.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Guida strategica esperta: domanda SAT del giorno" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
    					 </div>
    					 <div class="absolute bottom-0 left-0 p-4">
    						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/it/blog/">Blog </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/expert-strategy-guide-1311268">Guida strategica esperta: domanda SAT del giorno </a> </h4>
    					 </div>
    				 </article>
    				 <!-- /ARTICLE --> <!-- ARTICLE -->
    				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
    					 <div class="absolute inset-0">
    						 <img src="https://techcodeview.com/img/linux-unix-tools/37/find-command-linux-unix-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Trova comandi in Linux/Unix con esempi" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
    					 </div>
    					 <div class="absolute bottom-0 left-0 p-4">
    						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/it/linux-unix-tools/">Strumenti Linuxunix </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/find-command-linux-unix-with-examples">Trova comandi in Linux/Unix con esempi </a> </h4>
    					 </div>
    				 </article>
    				 <!-- /ARTICLE --> <!-- ARTICLE -->
    				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
    					 <div class="absolute inset-0">
    						 <img src="https://techcodeview.com/img/ms-excel-tutorial/97/how-calculate-age-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Come calcolare l'età in Excel?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
    					 </div>
    					 <div class="absolute bottom-0 left-0 p-4">
    						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/it/ms-excel-tutorial/">Esercitazione Su Ms Excel </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/how-calculate-age-excel">Come calcolare l'età in Excel? </a> </h4>
    					 </div>
    				 </article>
    				 <!-- /ARTICLE --> <!-- ARTICLE -->
    				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
    					 <div class="absolute inset-0">
    						 <img src="https://techcodeview.com/img/geeks-premier-league-2022/28/three-tier-client-server-architecture-distributed-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Architettura client-server a tre livelli in un sistema distribuito" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
    					 </div>
    					 <div class="absolute bottom-0 left-0 p-4">
    						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/it/geeks-premier-league-2022-cat/">Geeks-Premier-League-2022 </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/three-tier-client-server-architecture-distributed-system">Architettura client-server a tre livelli in un sistema distribuito </a> </h4>
    					 </div>
    				 </article>
    				 <!-- /ARTICLE --> <!-- ARTICLE -->
    				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
    					 <div class="absolute inset-0">
    						 <img src="https://techcodeview.com/img/linux-tutorial/43/kill-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Uccidi il comando" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
    					 </div>
    					 <div class="absolute bottom-0 left-0 p-4">
    						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/it/linux-tutorial/">Tutorial Su Linux </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/kill-command">Uccidi il comando </a> </h4>
    					 </div>
    				 </article>
    				 <!-- /ARTICLE --> <!-- ARTICLE -->
    				 <article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
    					 <div class="absolute inset-0">
    						 <img src="https://techcodeview.com/img/java/89/javax-servlet-http-cookie-class-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Classe Javax.servlet.http.Cookie in Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                             <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
    					 </div>
    					 <div class="absolute bottom-0 left-0 p-4">
    						 <div class="text-xs text-tech-400 font-bold mb-1"> <a href="/it/java/">Giava </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/it/javax-servlet-http-cookie-class-in-java">Classe Javax.servlet.http.Cookie in Java </a> </h4>
    					 </div>
    				 </article>
    				 <!-- /ARTICLE -->
    			 </div>
    		 </div>
    	 </div>
     </div>
     <!-- /Aside Column -->         </div>
            </div>
         </div>
    
     <footer class="site-footer">
             <div class="container">
                 <span class="footer-links">
                    Copyright ©2026 Tutti I Diritti Riservati | 
                     <a href="//www.techcodeview.com/sr/">techcodeview.com </a> | 
                     <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer </a> | 
                     <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo </a> | 
                     <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza </a> 
                 </span>
             </div>
         </footer>
     
         <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
         <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>    
         <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>     
    	 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
    	 <script>
        !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
            #toTopBtn {
                position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            }
            #toTopBtn:hover { background-color: #0284c7; }
        `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
         </script>
     </body>
     </html>