Anastasis 48 Report post Posted November 10, 2016 Στο βοήθημα αυτό θα βάλουμε περιεχόμενο στα 3 boxes που δημιουργήσαμε στο πρόηγούμενο βοήθημα. Στο css αρχείο γράφουμε το παρακάτω κώδικας: .text{ width:150px; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-top:20px; color:#767676; float:left; } .title{ color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:24px; } .color{ color:#b47825; } .image{ float:right; margin-top:20px; } .more a{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-top:10px; color:#000; } .more a:hover{ text-decoration:none; } Η κλάσση .text ορίζει τις παραμέτρους για το κυρίως κείμενο. Η κλάσση .title ορίζει τις παραμέτρους για τον τίτλο. Η κλάσση .color ορίζει τις παραμέτρους για τον μισό τίτλο. Η κλάσση .image ορίζει τις παραμέτρους για την εικόνα. Η κλάσση .more a ορίζει τις παραμέτρους για το σύνδεσμο Read more. Η κλάσση .more a:hover ορίζει τις παραμέτρους για το hover του συνδέσμου Read more Στο html αρχείο μας και μέσα στο div box_left γράφουμε το παρακάτω: κώδικας: <p class="title">About SmashingDzine</p> LIVE DEMO Μορφοποιώντας τον τίτλο αυτό και εφαρμόζοντας την κλάσση .color τον κάνουμε όπως το παρακάτω: κώδικας: <p class="title"><span class="color">About</span> SmashingDzine</p> LIVE DEMO Κάτω ακριβώς από τον τίτλο τοποθετούμε την εικόνα γράφοντας το παρακάτω: κώδικας: <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> LIVE DEMO Παρατηρούμε ότι η εικόνα πάει δεξιά επειδή έχουμε ορίσει float:right Κάτω από την εικόνα εισάγουμε το κυρίως κείμενό μας γράφοντας το παρακάτω: κώδικας: <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> LIVE DEMO Και τέλος κάτω από το κείμενο βάζουμε το σύνδεσμο Read more γράφοντας το παρακάτω: κώδικας: <p class="more"><a href="#">Read More</a></p> LIVE DEMO Άρα μέχρι στιγμής ο κώδικας μέσα στο αριστερό box είναι ο παρακάτω: κώδικας: <div id="box_left"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulumvel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> Με τον ίδιο τρόπο γεμίζουμε όλα τα κουτιά και ο τελικός κώδικας όλης της σελίδας είναι ο παρακάτω: κώδικας: <body> <div id="container"> <div id="header"> <div id="logo">Smashing DZine</div> <div id="contact"> <p class="btext">+971 55 7457383</p> <p>If you have any query, feel free to call us</p> </div> <div class="corner"> <div id="smashnav"> <ul> <li><a href="#" title="" class="current"><span>HOME</span></a></li> <li><a href="#" title=""><span>ABOUT SMASHINGDZINE</span></a></li> <li><a href="#" title=""><span>OUR SERVICES</span></a></li> <li><a href="#" title=""><span>OUR PORTFOLIO</span></a></li> <li><a href="#" title=""><span>BLOG</span></a></li> <li><a href="#" title=""><span>CONTACT US</span></a></li> </ul> </div> </div> </div> <div id="middle"> <div id="middle_inside"> <div id="slide"></div> <div id="quick_note"> <h2>Quick Note</h2> <form action="vars.php" method="post"> <label for="textinput">Your Full Name:</label> <br /> <input type="text" id="textinput" name="textinput" class="textinput" maxlength="25" /><br /> <label for="passwordinput">Email Address:</label> <br /> <input type="password" id="passwordinput" name="passwordinput" class="textinput" maxlength="25" /><br /> <label for="textareainput">What Are You Looking For::</label><br /> <textarea id="textareainput" name="textareainput" class="textarea" rows="" cols=""></textarea><br /> <br /> <input type="submit" value="Submit" class="buttonSubmit" /> <div id="stylesheetTest"></div> </form> </div> </div> </div> <div id="boxes"> <div id="box_left"> <p class="title"><span class="color">About</span> SmashingDzine</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulumvel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_middle"> <p class="title"><span class="color">Our</span> Services</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> <div id="box_right"> <p class="title"><span class="color">Our</span> Portfolio</p> <img src="images/placeholder.jpg" alt="Placeholder" width="88" height="88" class="image" /> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut dui nec nisl fringilla vestibulum vel vitae risus.</p> <p class="more"><a href="#">Read More</a></p> </div> </div> </div> </body> LIVE DEMO Quote Share this post Link to post Share on other sites
