Lastnost prikaza CSS

Lastnost prikaza CSS

The lastnost prikaza določa prikazno vedenje elementa (vrsta polja upodabljanja). Določa, kako je element upodobljen v postavitvi, določa njegov položaj in interakcijo v toku in strukturi dokumenta.

Sintaksa:

display: value; 

Vrednosti lastnosti:

Vrednost Opis
v vrsti Uporablja se za prikaz elementa kot elementa v vrstici.
blok Uporablja se za prikaz elementa kot elementa bloka
vsebine Uporablja se za izginotje posode.
flex Uporablja se za prikaz elementa kot flex vsebnika na ravni bloka.
mreža Uporablja se za prikaz elementa kot vsebnika mreže na ravni bloka.
inline-block Uporablja se za prikaz elementa kot vsebnika blokov na ravni vrstice.
inline-flex Uporablja se za prikaz elementa kot flex vsebnika na ravni v vrstici.
inline-grid Uporablja se za prikaz elementa kot vsebnika mreže na ravni vrstice.
inline-table Uporablja se za prikaz tabele na ravni vrstice
element seznama Uporablja se za prikaz vseh elementov v
  • element.
  • utekanje Uporablja se za prikaz elementa v vrstici ali ravni bloka, odvisno od konteksta.
    tabela Uporablja se za nastavitev obnašanja kot za vse elemente. za vse elemente.
    tabela-napis Uporablja se za nastavitev obnašanja kot za vse elemente.
    tabela-stolpec-skupina Uporablja se za nastavitev obnašanja kot za vse elemente.
    skupina-glav-tabel Uporablja se za nastavitev obnašanja kot za vse elemente.
    tabela-noga-skupina Uporablja se za nastavitev obnašanja kot za vse elemente.
    tabela-vrstica-skupina Uporablja se za nastavitev obnašanja kot za vse elemente.
    tabela-celica Uporablja se za nastavitev vedenja kot za vse elemente.
    tabela-stolpec Uporablja se za nastavitev obnašanja kot za vse elemente.
    tabela-vrstica Uporablja se za nastavitev vedenja kot
    nič Uporablja se za odstranitev elementa.
    začetnica Uporablja se za nastavitev privzete vrednosti.
    podeduješ Uporablja se za dedovanje lastnine od elementov staršev.

    primer: Ta primer uporablja 3 dive za prikaz lastnosti prikaza CSS.

    HTML
          CSS Display propertytitle> <style>#geeks1 { višina: 100px;  širina: 200px;  ozadje: modrozelena;  zaslon: blok;  } #geeks2 { višina: 100px;  širina: 200px;  ozadje: cian;  zaslon: blok;  } #geeks3 { višina: 100px;  širina: 200px;  ozadje: zeleno;  zaslon: blok;  } .gfg { margin-left: 20px;  velikost pisave: 42px;  teža pisave: krepko;  barva: #009900;  } .geeks {velikost pisave: 25px;  rob-levo: 30px;  } .main { margin: 50px;  poravnava besedila: sredina;  } slog> glava> <body>  <div>techcodeview.comdiv> <div>zaslon: blok; propertydiv> <div>  <div id='geeks1'>Blok 1div> <div id='geeks2'>Blok 2div> <div id='geeks3'>Blokirajte 3div> div> body> html> </pre>  </code>  <h2> <span>Primeri lastnosti prikaza CSS </span> </h2> <h3>  <b>  <strong>1. Uporaba zaslonskega bloka </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Ta lastnost se uporablja kot privzeta lastnost div. Ta lastnost postavi div enega za drugim navpično. Višino in širino diva lahko spremenite z lastnostjo bloka, če širina ni omenjena, potem bo div pod lastnostjo bloka prevzel širino vsebnika. </span> </p>  <p dir='ltr'>  <b>  <strong>primer: </strong>  </b>  <span>Uporabite dani CSS v zgornjem primeru. </span> </p>  <pre>#geeks1 {  background: teal;  display: block; } #geeks2 {  background: cyan;  display: block; } #geeks3 {  background: green;  display: block; } </pre> <p dir='ltr'>  <b>  <strong>Izhod: </strong>  </b>  <span>  </span> </p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt='prikaz lastnosti bloka'> <h3>  <b>  <strong>2. Uporaba vgrajenega zaslona </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Ta lastnost je privzeta lastnost sidrnih oznak. To se uporablja za postavitev diva v vrstico, tj. vodoravno. Lastnost vgrajenega prikaza ignorira višino in širino, ki ju nastavi uporabnik. </span> </p>  <p dir='ltr'>  <b>  <strong>primer: </strong>  </b>  <span>Uporabite dani CSS v zgornjem primeru. </span> </p>  <pre>#geeks1 {  background: teal;  display: inline; } #geeks2 {  background: cyan;  display: inline; } #geeks3 {  background: green;  display: inline; } </pre> <p dir='ltr'>  <b>  <strong>Izhod: </strong>  </b>  <span>  </span> </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt='izpis primera lastnosti v vrstici'> </p>  <h3>  <b>  <strong>3. Uporaba Display Inline-block </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Ta funkcija uporablja obe zgoraj omenjeni lastnosti, blok in inline. Torej ta lastnost poravna div v vrstici, vendar je razlika v tem, da lahko ureja višino in širino bloka. V bistvu bo to poravnalo div tako v bloku kot v vrstici. </span> </p>  <p dir='ltr'>  <b>  <strong>primer: </strong>  </b>  <span>Uporabite dani CSS v zgornjem primeru. </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>Izhod: </strong>  </b>  <span>  </span> </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt='prikaz vgrajenega izhodnega bloka'> </p>  <h3>  <b>  <strong>4. Uporaba možnosti Display None: </strong>  </b>  <span>  </span> </h3> <p dir='ltr'> <span>Ta lastnost skrije div ali vsebnik, ki uporablja to lastnost. Če ga uporabite na enem od div, bo delo postalo jasno. </span> </p>  <p dir='ltr'>  <b>  <strong>primer: </strong>  </b>  <span>Uporabite dani CSS v zgornjem primeru. </span> </p>  <pre>#geeks2 {  background: cyan;  display: none; } </pre> <p dir='ltr'>  <b>  <strong>Izhod: </strong>  </b>  <span>Prikaži nobeno lastnost </span>  <b>  <strong>blok 2 </strong>  </b>  </p>  <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt='ne prikaže nobene lastnosti'> </p>  <p dir='ltr'>  <b>  <strong>Podprti brskalniki: </strong>  </b>  </p>  <p dir='ltr'> <span>Brskalniki, ki jih podpira </span>  <b>  <strong>Lastnost prikaza </strong>  </b>  <span>so navedeni spodaj: </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>Opera </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>
                                    Deli                              </h4>
                                 
                                  <div class="flex flex-wrap justify-center gap-3">
                                     <!-- Twitter -->
                                     <a href="https://twitter.com/intent/tweet?text=Lastnost prikaza CSS&url=https://www.techcodeview.com/sl/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/sl/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/sl/css-display-property&title=Lastnost prikaza 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">
                            Morda Vam Bo Všeč                     </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="group">
                                  <a href="/sl/what-is-electrical-energy-131708" 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/86/what-is-electrical-energy.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaj je električna energija? Primeri in razlaga" 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="/sl/what-is-electrical-energy-131708">Kaj je električna energija? Primeri in razlaga </a>
                                  </h4>
                             </div> <div class="group">
                                  <a href="/sl/what-does-act-stand-1311584" 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/31/what-does-act-stand.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kaj pomeni ACT? Popolna zgodba" 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="/sl/what-does-act-stand-1311584">Kaj pomeni ACT? Popolna zgodba </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>
                    Top Članki             </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="/sl/javascript-addeventlistener-with-examples">
    						 <img src="https://techcodeview.com/img/javascript-methods/82/javascript-addeventlistener-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="JavaScript addEventListener() s primeri" 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="/sl/javascript-addeventlistener-with-examples" class="hover:text-tech-500 transition-colors line-clamp-3">JavaScript addEventListener() s primeri </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="/sl/getelementsbyclassname">
    						 <img src="https://techcodeview.com/img/javascript-tutorial/67/getelementsbyclassname.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="GetElementsByClassName()" 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="/sl/getelementsbyclassname" class="hover:text-tech-500 transition-colors line-clamp-3">GetElementsByClassName() </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="/sl/advantages-disadvantages-fast-food">
    						 <img src="https://techcodeview.com/img/blog/96/advantages-disadvantages-fast-food.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Prednosti in slabosti hitre prehrane" 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="/sl/advantages-disadvantages-fast-food" class="hover:text-tech-500 transition-colors line-clamp-3">Prednosti in slabosti hitre prehrane </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="/sl/tree-data-structure">
    						 <img src="https://techcodeview.com/img/ds-tutorial/57/tree-data-structure.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Drevesna podatkovna struktura" 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="/sl/tree-data-structure" class="hover:text-tech-500 transition-colors line-clamp-3">Drevesna podatkovna struktura </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="/sl/4-amazing-recommendation-letter-samples-131394">
    						 <img src="https://techcodeview.com/img/blog/05/4-amazing-recommendation-letter-samples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="4 osupljivi vzorci priporočilnih pisem za študente" 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="/sl/4-amazing-recommendation-letter-samples-131394" class="hover:text-tech-500 transition-colors line-clamp-3">4 osupljivi vzorci priporočilnih pisem za študente </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="/sl/inorder-traversal">
    						 <img src="https://techcodeview.com/img/ds-tutorial/15/inorder-traversal.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Prehod po vrstnem redu" 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="/sl/inorder-traversal" class="hover:text-tech-500 transition-colors line-clamp-3">Prehod po vrstnem redu </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="/sl/explained-what-is-ask-24270">
    						 <img src="https://techcodeview.com/img/get-informed/70/explained-what-is-ask.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pojasnjeno: Kaj je Ask.fm?" 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="/sl/explained-what-is-ask-24270" class="hover:text-tech-500 transition-colors line-clamp-3">Pojasnjeno: Kaj je Ask.fm? </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="/sl/how-pass-parse-linux-bash-script-arguments">
    						 <img src="https://techcodeview.com/img/picked/73/how-pass-parse-linux-bash-script-arguments.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako posredovati in razčleniti argumente in parametre skripta Bash za Linux" 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="/sl/how-pass-parse-linux-bash-script-arguments" class="hover:text-tech-500 transition-colors line-clamp-3">Kako posredovati in razčleniti argumente in parametre skripta Bash za Linux </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="/sl/rr-scheduling-example">
    						 <img src="https://techcodeview.com/img/operating-system/65/rr-scheduling-example.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Primer načrtovanja RR" 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="/sl/rr-scheduling-example" class="hover:text-tech-500 transition-colors line-clamp-3">Primer načrtovanja RR </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="/sl/who-is-admission-committee-131750">
    						 <img src="https://techcodeview.com/img/blog/71/who-is-admission-committee.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kdo je komisija za sprejem? Kaj iščejo?" 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="/sl/who-is-admission-committee-131750" class="hover:text-tech-500 transition-colors line-clamp-3">Kdo je komisija za sprejem? Kaj iščejo? </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">Kategorija </h2>
    		 </div>
    		 <div class="flex flex-wrap gap-2">
                 <a href="/sl/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="/sl/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">
                    Java Conversion
                 </a> <a href="/sl/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">
                    Matematika
                 </a> <a href="/sl/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">
                    Zbirke Java
                 </a> <a href="/sl/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">
                    Razlike
                 </a> <a href="/sl/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">
                    Java String
                 </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">Zanimivi Članki </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/gimp-tutorial/13/gimp-vs-inkscape.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="GIMP Vs. Inkscape" 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="/sl/gimp-tutorial/">Vadnica Za Gimp </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/gimp-vs-inkscape">GIMP Vs. Inkscape </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/54/how-check-ram-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako preveriti RAM v Linuxu" 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="/sl/linux-tutorial/">Vadnica Za Linux </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-check-ram-linux">Kako preveriti RAM v Linuxu </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/picked/01/how-check-how-many-cpus-are-there-linux-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kako preveriti, koliko procesorjev je v sistemu Linux" 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="/sl/picked/">Izbrano </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/how-check-how-many-cpus-are-there-linux-system">Kako preveriti, koliko procesorjev je v sistemu Linux </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/geometric-lines/32/slope-formula.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Formula naklona" 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="/sl/geometric-lines/">Geometrijske Črte </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/slope-formula">Formula naklona </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/it-problems-solutions/87/minimax-algorithm-game-theory-set-4.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Minimax algoritem v teoriji iger | Komplet 4 (Alpha-Beta Obrezovanje)" 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="/sl/it-problems-solutions/">It Težave In Rešitve </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/minimax-algorithm-game-theory-set-4">Minimax algoritem v teoriji iger | Komplet 4 (Alpha-Beta Obrezovanje) </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/64/linux-list-directories.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Imeniki seznama Linux" 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="/sl/linux-tutorial/">Vadnica Za Linux </a> </div>
    						 <h4 class="text-sm font-bold text-white leading-tight"> <a href="/sl/linux-list-directories">Imeniki seznama Linux </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 Vse Pravice Pridržane | 
                     <a href="//www.techcodeview.com/ar/">techcodeview.com </a> | 
                     <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Zavrnitev Odgovornosti </a> | 
                     <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Podjetju </a> | 
                     <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politika Zasebnosti </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>