Punbb: Staff List

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:
[Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

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: [Trebuie sa fiti înscris şi conectat pentru a vedea această imagine]

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.

Foarte util, Multumim!