Propietat de visualització CSS

Propietat de visualització CSS

El propietat de visualització especifica el comportament de visualització d'un element (el tipus de quadre de representació). Defineix com es representa un element en el disseny, determinant el seu posicionament i la seva interacció dins del flux i l'estructura del document.

Sintaxi:

display: value; 

Valors de propietat:

Valor Descripció
en linia S'utilitza per mostrar un element com a element en línia.
bloc S'utilitza per mostrar un element com a element de bloc
continguts S'utilitza per desaparèixer el recipient.
flexionar S'utilitza per mostrar un element com a contenidor flexible a nivell de bloc.
graella S'utilitza per mostrar un element com a contenidor de graella a nivell de bloc.
bloc en línia S'utilitza per mostrar un element com a contenidor de blocs de nivell en línia.
flexió en línia S'utilitza per mostrar un element com a contenidor flexible de nivell en línia.
quadrícula en línia S'utilitza per mostrar un element com a contenidor de graella de nivell en línia.
taula en línia S'utilitza per mostrar una taula de nivell en línia
element de llista S'utilitza per mostrar tots els elements
  • element.
  • atropellament S'utilitza per mostrar un element en línia o a nivell de bloc, depenent del context.
    taula S'utilitza per establir el comportament de tots els elements. per a tots els elements.
    subtítol de la taula S'utilitza per establir el comportament de tots els elements.
    grup-taula-columna S'utilitza per establir el comportament de tots els elements.
    grup-capçalera-taula S'utilitza per establir el comportament de tots els elements.
    grup de peu de taula S'utilitza per establir el comportament de tots els elements.
    taula-fila-grup S'utilitza per establir el comportament de tots els elements.
    taula-cel·la S'utilitza per establir el comportament com per a tots els elements.
    taula-columna S'utilitza per establir el comportament de tots els elements.
    taula-fila S'utilitza per establir el comportament com
    cap S'utilitza per eliminar l'element.
    inicial S'utilitza per establir el valor predeterminat.
    tu heretes S'utilitza per heretar propietats dels elements dels seus pares.

    Exemple: Aquest exemple utilitza 3 divs per demostrar la propietat de visualització CSS.

    HTML
          CSS Mostra el títol de propietat> <style>#geeks1 { alçada: 100px;  amplada: 200 píxels;  fons: verd verd;  visualització: bloc;  } #geeks2 { alçada: 100px;  amplada: 200 píxels;  fons: cian;  visualització: bloc;  } #geeks3 { alçada: 100px;  amplada: 200 píxels;  fons: verd;  visualització: bloc;  } .gfg { marge esquerre: 20px;  mida de la lletra: 42px;  pes de la lletra: negreta;  color: #009900;  } .geeks { font-size: 25px;  marge esquerre: 30 píxels;  } .principal { marge: 50px;  alineació de text: centre;  } estil> cap> <body>  <div>techcodeview.comdiv> <div>visualització: bloc; propietatdiv> <div>  <div id='geeks1'>Bloc 1div> <div id='geeks2'>Bloc 2div> <div id='geeks3'>Bloc 3div> div> cos> html>> </pre>  </code>  <h2> <span>Propietat de visualització CSS ​​Exemples </span> </h2> <h3>  <b>  <strong>1. Ús del bloc de visualització </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Aquesta propietat s'utilitza com a propietat per defecte de div. Aquesta propietat col·loca el div un darrere l'altre verticalment. L'alçada i l'amplada del div es poden canviar mitjançant la propietat del bloc si no s'esmenta l'amplada, aleshores el div sota la propietat del bloc ocuparà l'amplada del contenidor. </span> </p>  <p dir='ltr'>  <b>  <strong>Exemple: </strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior. </span> </p>  <pre>#geeks1 {  background: teal;  display: block; } #geeks2 {  background: cyan;  display: block; } #geeks3 {  background: green;  display: block; } </pre> <p dir='ltr'>  <b>  <strong>Sortida: </strong>  </b>  <span>  </span> </p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt='Mostra la propietat del bloc'> <h3>  <b>  <strong>2. Ús de la pantalla en línia </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Aquesta propietat és la propietat per defecte de les etiquetes d'ancoratge. S'utilitza per col·locar el div en línia, és a dir, de manera horitzontal. La propietat de visualització en línia ignora l'alçada i l'amplada establertes per l'usuari. </span> </p>  <p dir='ltr'>  <b>  <strong>Exemple: </strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior. </span> </p>  <pre>#geeks1 {  background: teal;  display: inline; } #geeks2 {  background: cyan;  display: inline; } #geeks3 {  background: green;  display: inline; } </pre> <p dir='ltr'>  <b>  <strong>Sortida: </strong>  </b>  <span>  </span> </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt='Mostra la sortida d'exemple de propietat en línia'> </p>  <h3>  <b>  <strong>3. Ús de Display Inline-block </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Aquesta característica utilitza les dues propietats esmentades anteriorment, block i inline. Per tant, aquesta propietat alinea el div en línia, però la diferència és que pot editar l'alçada i l'amplada del bloc. Bàsicament, això alinearà el div tant en bloc com en línia. </span> </p>  <p dir='ltr'>  <b>  <strong>Exemple: </strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior. </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>Sortida: </strong>  </b>  <span>  </span> </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt='Mostra la sortida d'exemple de bloc en línia'> </p>  <h3>  <b>  <strong>4. Ús de Mostrar cap: </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Aquesta propietat amaga el div o el contenidor que utilitzen aquesta propietat. Utilitzar-lo en un dels div deixarà clar el funcionament. </span> </p>  <p dir='ltr'>  <b>  <strong>Exemple: </strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior. </span> </p>  <pre>#geeks2 {  background: cyan;  display: none; } </pre> <p dir='ltr'>  <b>  <strong>Sortida: </strong>  </b>  <span>Mostra cap propietat a </span>  <b>  <strong>bloc 2 </strong>  </b>  </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt='mostrar cap propietat'> </p>  <p dir='ltr'>  <b>  <strong>Navegadors compatibles: </strong>  </b>  </p>  <p dir='ltr'> <span>Els navegadors compatibles amb el </span>  <b>  <strong>Propietat de visualització </strong>  </b>  <span>s'enumeren a continuació: </span> </p>  <ul> <li value='1'>  <span>Google Chrome </span>  </li> <li value='2'>  <span>Edge </span>  <span>  </span>  </li> <li value='3'>  <span>Firefox </span>  </li> <li value='4'>  <span>Òpera </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>
                                    Comparteix                              </h4>
                                 
                                  <div class="flex flex-wrap justify-center gap-3">
                                     <!-- Twitter -->
                                     <a href="https://twitter.com/intent/tweet?text=Propietat de visualització CSS&url=https://www.techcodeview.com/ca/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/ca/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/ca/css-display-property&title=Propietat de visualització 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">
                            Potser T'Agradarà                     </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="group">
                                  <a href="/ca/are-you-accused-cheating-sat-act-131442" 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/blog/61/are-you-accused-cheating-sat-act.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Estàs acusat d'enganyar el SAT/ACT? Què fer" 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="/ca/are-you-accused-cheating-sat-act-131442">Estàs acusat d'enganyar el SAT/ACT? Què fer </a>
                                  </h4>
                             </div> <div class="group">
                                  <a href="/ca/introduction-javascript" 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/javascript-basics/35/introduction-javascript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Introducció a JavaScript" 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="/ca/introduction-javascript">Introducció a JavaScript </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>
                    Articles Més Populars             </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="/ca/pell-number">
    						 <img src="https://techcodeview.com/img/dsa/35/pell-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Número de Pell" 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="/ca/pell-number" class="hover:text-tech-500 transition-colors line-clamp-3">Número de Pell </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="/ca/mysql-create-database">
    						 <img src="https://techcodeview.com/img/mysql-tutorial/67/mysql-create-database.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL Crea una base de dades" 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="/ca/mysql-create-database" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL Crea una base de dades </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="/ca/react-tutorial">
    						 <img src="https://techcodeview.com/img/it-problems-solutions/50/react-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Reacciona Tutorial" 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="/ca/react-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Reacciona Tutorial </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="/ca/luhn-algorithm">
    						 <img src="https://techcodeview.com/img/cryptography/51/luhn-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="algorisme de Luhn" 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="/ca/luhn-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">algorisme de Luhn </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="/ca/ap-chemistry-syllabus-1311638">
    						 <img src="https://techcodeview.com/img/blog/84/ap-chemistry-syllabus.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Programa de Química AP: què cobreix?" 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="/ca/ap-chemistry-syllabus-1311638" class="hover:text-tech-500 transition-colors line-clamp-3">Programa de Química AP: què cobreix? </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="/ca/top-25-c-projects-with-source-code-2023">
    						 <img src="https://techcodeview.com/img/c-projects/31/top-25-c-projects-with-source-code-2023.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Els 25 millors projectes C amb codi font el 2023" 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="/ca/top-25-c-projects-with-source-code-2023" class="hover:text-tech-500 transition-colors line-clamp-3">Els 25 millors projectes C amb codi font el 2023 </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="/ca/inorder-traversal-binary-tree">
    						 <img src="https://techcodeview.com/img/binary-tree/47/inorder-traversal-binary-tree.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Travessia en ordre de l'arbre binari" 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="/ca/inorder-traversal-binary-tree" class="hover:text-tech-500 transition-colors line-clamp-3">Travessia en ordre de l'arbre binari </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="/ca/soldier-and-his-military-dog-reunited-after-being-injured-in-afghanistan">
    						 <img src="https://techcodeview.com/img/trending/17/soldier-and-his-military-dog-reunited-after-being-injured-in-afghanistan.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Un soldat i el seu gos militar es van reunir després de ser ferits a l'Afganistan" 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="/ca/soldier-and-his-military-dog-reunited-after-being-injured-in-afghanistan" class="hover:text-tech-500 transition-colors line-clamp-3">Un soldat i el seu gos militar es van reunir després de ser ferits a l'Afganistan </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="/ca/sql-server-describe-table">
    						 <img src="https://techcodeview.com/img/sql-server-tutorials/64/sql-server-describe-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Taula de descripció de SQL Server" 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="/ca/sql-server-describe-table" class="hover:text-tech-500 transition-colors line-clamp-3">Taula de descripció de SQL Server </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="/ca/how-many-nanometers-meter-131194">
    						 <img src="https://techcodeview.com/img/blog/79/how-many-nanometers-meter.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quants nanòmetres hi ha un metre?" 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="/ca/how-many-nanometers-meter-131194" class="hover:text-tech-500 transition-colors line-clamp-3">Quants nanòmetres hi ha un metre? </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="/ca/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">
                    Bloc
                 </a> <a href="/ca/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">
                    Conversió De Java
                 </a> <a href="/ca/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">
                    Matemàtiques
                 </a> <a href="/ca/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">
                    Col·leccions Java
                 </a> <a href="/ca/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">
                    Diferències
                 </a> <a href="/ca/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">
                    Cadena De 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">Articles D'Interès </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/picked/84/difference-between-primary.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferència entre successió primària i secundària" 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="/ca/picked/">Escollit </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/difference-between-primary">Diferència entre successió primària i secundària </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/daa-tutorial/62/dijkstras-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algoritme de Dijkstra" 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="/ca/daa-tutorial/">Tutorial Daa </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/dijkstras-algorithm">Algoritme de Dijkstra </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/misc/53/check-whether-arithmetic-progression-can-be-formed-from-the-given-array.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comproveu si la progressió aritmètica es pot formar a partir de la matriu donada" 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="/ca/misc/">Misc </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/check-whether-arithmetic-progression-can-be-formed-from-the-given-array">Comproveu si la progressió aritmètica es pot formar a partir de la matriu donada </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/math-concepts/13/difference-between-log.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diferència entre Log i Ln" 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="/ca/math-concepts/">Matemàtiques-Conceptes </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/difference-between-log">Diferència entre Log i Ln </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/blog/97/how-get-your-high-school-transcript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Com obtenir el vostre expedient de batxillerat" 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="/ca/blog/">Bloc </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/how-get-your-high-school-transcript-131546">Com obtenir el vostre expedient de batxillerat </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-basics/92/java-main-method-public-static-void-main.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mètode Java main() – public static void main(String[] args)" 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="/ca/java-basics/">Conceptes Bàsics De Java </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/ca/java-main-method-public-static-void-main">Mètode Java main() – public static void main(String[] args) </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 Tots Els Drets Reservats | 
                     <a href="//www.techcodeview.com/da/">techcodeview.com </a> | 
                     <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat </a> | 
                     <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres </a> | 
                     <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa </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>