Jump to content
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Slate Blackcurrant Watermelon Strawberry Orange Banana Apple Emerald Chocolate Marble
Sign in to follow this  
Anastasis

Έξυπνες ημερομηνίες

Recommended Posts

Στο μάθημα αυτό θα δούμε πως μπορούμε να προσθέσουμε στην ιστοσελίδα μας έξυπνες και όμορφες ημερομηνίες για τα θέματά μας. Θα χρειαστούμε δύο εικόνες τις οποίες μπορείτε να τις βρείτε εδώ:

Εικόνα 1 Εικόνα 2

Στο css αρχείο μας θα προσθέσουμε το παρακάτω:

 

κώδικας:
.date {
   display:block;
   text-align: center;
   float:left;
   font-family: Arial, Helvetica, sans-serif;
   background:url(clip-bottom.png) right bottom no-repeat;
   margin-right:2px;
   width:40px;
}



display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
text-align: κεντρική στοίχιση
float:left τοποθέτηση στα αριστερά
font-family: επιλογή γραμματοσειράς
background: εικόνα φόντου τοποθετημένη κάτω αριστερά και μη επαναλαμβανόμενη
margin-right απόσταση από δεξιά
width: πλάτος

 

κώδικας:
.month {
   display:block;
   font-size: 10px;
   padding-top:12px;
   background:url(clip-top.gif) center top repeat-x;
}



display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
font-size: Μέγεθος γραμματοσειράς
padding-top: απόσταση του περιεχομένου από το πάνω μέρος
background: εικόνα φόντου τοποθετημένη πάνω κέντρο και επαναλαμβανόμενη μόνο οριζόντια

 

κώδικας:
.day {
   display:block;
   font-size:14px;
}



display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
font-size: Μέγεθος γραμματοσειράς

Μέσα στο html αρχείο μας και στο σημείο που θέλουμε να εμφανίζετε η ημερομηνία θα γράψουμε το παρακάτω:

 

κώδικας:
<acronym class="date" title="9 Ιανουαρίου 2007">
   <span class="month">Ιαν</span>
   <span class="day">9</span>
</acronym>



Live demo

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×