Cikkajánló
Egy olyan kódot hoztam, amivel meg lehet jeleníteni a látogatók számát az adott bejegyzésekben vagy oldalakban. Hasonló a PostViews számlálóhoz annyi különbséggel, hogy ide semmilyen bővítményt nem kell feltelepíteni,
Ehhez a kódhoz már két másik hasonló is megtalálható az oldalon. Az egyik a legfrissebb cikkek megjelenítése, a másik a cikkajánló és most ez, amivel a legutoljára frissített cikkeket
  Egy újabb hullámos tutorial készült el. Ezzel az eljárással már készítettünk egy hullámos leírást, de itt most az egyenletes hullám készítéséről lesz szó. A leírás a G-portálos aloldalon
Emma Roberts G-Portálos téma Instagram doboz weboldalra Project dobozok és egy Elit csere effekt Elit csere effekt szöveggel és képekkel Lana Del Rey és Kylie Jenner G-Portálos témák
Oldal info szövegdoboz 1.

 

Oldal info doboz kódja

 

<div class="infobox-doboz">
<div class="infobox">
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
<div class="sorok">
<div class="lista"><i class="fa fa-info-circle" aria-hidden="true"></i> Lorem ipsum dolor</div>
</div>
</div>
</div>
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

 

CSS kód

 

/* oldal info doboz */
.infobox-doboz {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 3px;
}
.sorok {
display: table-row;
}
.lista .fa { /* ikon kinézete */
font-size:14px !important;
color:#DABA9B !important;
font-style: normal !important;
}
.lista { /* felsorolás kinézete */
border-bottom: 1px solid #dbdbdb;
display: table-cell;
padding: 6px 10px;
}
.lista:hover { /* felsorolás kinézete */
border-bottom: 1px solid #EEE0D2;
background: #EEE0D2;
display: table-cell;
padding: 6px 10px;
}
.info { /* tartalom kinézete */
padding: 6px;
}
.infobox {
display: table-row-group;
}

lindadesign Hozzászólások
1 238 megtekintés

Hozzászólások