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  

Προσθέτοντας περιεχόμενο

Recommended Posts

Σε αυτό το μάθημα θα δούμε πως θα προσθέσουμε περιεχόμενο μέσα στα div μας.
Πρώτα απ’ όλα μέσα στο css αρχείο θα προσθέσουμε τα παρακάτω:


img {

Δηλώνουμε ότι όλες οι εικόνες που θα τοποθετηθούν στην ιστοσελίδα μας θα έχουν κάτω περιθώριο 5px.

.image {

Εδώ θα δηλώσουμε μέσα στο html αρχείο μας όσες από τις εικόνες μας θα έχουν περιθώριο δεξιά και αριστερά με τον παρακάτω κώδικα:

<img src="εικόνα"  class="image" />

Οι δύο αυτές επιλογές είναι ανεξάρτητες μεταξύ τους

.emphasis {

Με αυτές τις επιλογές θα τονίσουμε ορισμένες από τις λέξεις μας με τον παρακάτω κώδικα:

<span class="emphasis">Λέξη που θέλουμε </span>

Div retouch:

<img src="retouch.gif" alt="Image Retouch" />
 <br />
 Μάθετε πως να διορθώνετε<br />
 χρωματικά μία εικόνα <br />
 με το Photoshop

Div funny:

<img src="funny.gif" alt="Funny Creation" /><br />
Δημιουργήστε καταπληκτικά <br />
γραφικά χρησιμοποιώντας την φαντασία σας και το Photoshop

Div content1:

<span class="emphasis">Adobe Photoshop</span>, or simply <span class="emphasis">Photoshop</span>, is a graphics editor developed and published by Adobe Systems. It is the current market leader for commercial bitmap and image manipulation, and, in addition to Adobe Acrobat, is one of the best-known pieces of software produced by <span class="emphasis">Adobe Systems</span>. It is considered the industry standard in most jobs related to the use of visual elements. Photoshop is available for Microsoft Windows, Mac OS X, and Mac OS; versions up to <span class="emphasis">Photoshop 9.0</span> can also be used with other operating systems such as Linux using software such as CrossOver Office.

Div content2:

<img src="work1.jpg" alt="Work 1" width="134" height="111" class="image" /><img src="work2.jpg" alt="Work 2" width="134" height="111" class="image" /><img src="work3.jpg" alt="Work 3" width="134" height="111" class="image" /><br />
Δείγματα εργασιών

Div random:

<img src="../random.gif" alt="Nike Bug" /><br />
Τυχαίας εμφάνισης εικόνα

Div footer:

Copyright © 2003-2006 <span class="emphasis">Ilias Antonopoulos</span>. All Rights Reserved.
Template created by <span class="emphasis">EkLekTos</span>

Οπότε ολοκληρωμένη την σελίδα την βλέπουμε παρακάτω:
Live demo

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.

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