Bun găsit,

în acest tutorial vă voi învăța cum să faceți un staff list, mai exact gata făcut .

PDA > Diverse >   HTML & JAVASCRIPT > Administrare pagini HTML > Creare in Mod Avansat (HTML)

Previzualizare instalare:


Cod:

Cod:

<h3 class="maintitle">Staff List</h3>
<table class="ipb_table ipsMemberList">
 <tbody><tr class="header">
 <th scope="col" style="width: 3%"> </th>
 <th scope="col" style="width: 20%">Name</th>
 <th scope="col" style="width: 25%">Function</th>
 <th scope="col" style="width: 25%" class="short">Location</th>
                <th scope="col" style="width: 25%" class="short">Contact</th>
 <th scope="col" style="width: 12%">&nbsp;</th>
 </tr>
 
 
<tr class="row1">

<td><div class="left">
<img src="" class="avt-rr">
</div>
</td>

<td>
  <span style="color:#cod culoare;font-weight:bold;">-</span>
</td>

<td>
<span style="color:#cod culoare;font-weight:bold;"></span>
</td>

</tr>
 


 

<tr class="row2">

<td><div class="left">
<img src="" class="avt-rr">
</div>
</td>

<td>
  <span style="color:#cod culoare;font-weight:bold;">-</span>
</td>

<td>
<span style="color:#cod culoare;font-weight:bold;"></span>
</td>

</tr>
 
 



<tr class="row1">

<td><div class="left">
<img src="" class="avt-rr">
</div>
</td>

<td>
  <span style="color:#cod culoare;font-weight:bold;">-</span>
</td>

<td>
<span style="color:#cod culoare;font-weight:bold;"></span>
</td>

</tr>
 


<tr class="row2">

<td><div class="left">
<img src="" class="avt-rr">
</div>
</td>

<td>
  <span style="color:#cod culoare;font-weight:bold;">-</span>
</td>

<td>
<span style="color:#cod culoare;font-weight:bold;"></span>
</td>

</tr>
</tbody></table>

CSS:

Cod:

.avt-rr {
    width: 30px;
    height: 30px;
    margin: 3px;
    padding: 1px;
    border: 1px solid #D5D5D5;
    background: white;
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
table.ipb_table td {
    padding: 10px;
    border-bottom: 1px solid #f3f3f3;
}
table.ipb_table {
    width: 100%;
    line-height: 1.3;
    border-collapse: collapse;
}
.header {
    background: #b6c7db;
    color: #1d3652;
}
table.ipb_table th {
    font-size: 11px;
    font-weight: bold;
    padding: 8px 6px;
}

După instalarea codului, ar trebui să avem așa ceva:

Notă: va trebuie să adăugați fiecare avatar, nume, funcție, locație, și așa mai departe.

Dacă sunt probleme, vă rugăm să folosiți secț. corespunzătoare!

Tutorial realizat de Mark.

Nui cine stie ce,am facut mai reusite si frumoase,dar cine stie poate cuiva ii va place mai mult.