ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ΜΕ CSS- ΜΑΘΗΜΑ 3

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ΜΕ CSS- ΜΑΘΗΜΑ 3

Δημοσίευση από Admin Την / Το Παρ Ιαν 16, 2015 10:26 am

Όπως και με τα υπόλοιπα εγγραφα που έχουμε φτιάξει δε χρειάζεται να φτιάξετε κάτι από την αρχή.
Χρησιμοποιούμε ένα πρότυπο και το προσαρμόζουμε στις ανάγκες μας.

το παρακάτω έγγραφο δημιουργεί ένα πράσινο μενού επιλογών
μπορείτε να παίξετε με τα χρώματα αν το επιθυμείτε και το αρχείο του background
θα το βρείτε εδω: https://drive.google.com/file/d/0B7iD3ipMhOehekJZSldJdDFCNTg/view?usp=sharing

<html>
<head>
<meta http-equiv='Content-Language' content='el' />
<title>Ο ΤΙΤΛΟΣ ΤΗΣ ΕΠΙΧΕΙΡΗΣΗΣ</title>
<style>

   body {
     width: 100%;
     max-width: 960px;
     margin: 0 auto;}
   nav {
     width: 100%;
     margin: 20px 0; }
   nav ul {
     list-style: none;
     overflow: hidden; }

   nav ul li a {
     text-align: center;
     padding: 8px 0;
     display: block;
     width: 100%;
     background: #ddebae; /* Old browsers */
     background: -moz-linear-gradient(top,  
       #ddebae 0%, #b0ca34 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom,
       color-stop(0%,#ddebae),
       color-stop(100%,#b0ca34)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  
       #ddebae 0%,#b0ca34 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top,  
       #ddebae 0%,#b0ca34 100%); /* Opera 11.10+ */
     background: linear-gradient(to bottom,  
       #ddebae 0%,#b0ca34 100%); /* W3C, IE10+ */
     filter: progid:DXImageTransform.Microsoft.gradient(
       startColorstr='#ddebae',
       endColorstr='#b0ca34',GradientType=0 ); /* IE6-9 */
     }
   nav ul li a,
   nav ul li a:focus,
   nav ul li a:visited,
   nav ul li a:hover,
   nav ul li a:active {
     color: #000;
     text-decoration: none; }
   nav ul li a:hover,
   nav ul li a:active {
     background: #b0ca34; /* Old browsers */
     background: -moz-linear-gradient(top,  
       #b0ca34 0%, #96c40d 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom,
       color-stop(0%,#b0ca34),
       color-stop(100%,#96c40d)); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  
       #b0ca34 0%,#96c40d 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top,  
       #b0ca34 0%,#96c40d 100%); /* Opera 11.10+ */
     background: linear-gradient(to bottom,  
       #b0ca34 0%,#96c40d 100%); /* W3C, IE10+ */
     filter: progid:DXImageTransform.Microsoft.gradient(
       startColorstr='#b0ca34',
       endColorstr='#96c40d',GradientType=0 ); /* IE6-9 */
     }
   nav ul li:first-child a {
     border-top-left-radius: 12px;
     border-bottom-left-radius: 12px; }
   nav ul li:last-child a {
     border-top-right-radius: 12px;
     border-bottom-right-radius: 12px; }
</style>
</head>

<body bgcolor=white background="image001.jpg" lang=EL
style='tab-interval:36.0pt'>
<!--[if gte vml 1]><v:background id="_x0000_s1025" o:bwmode="white"
o:targetscreensize="800,600">
<v:fill color2="#ffe4c9" type="gradient"/>
</v:background><![endif]-->
<font size="3" face="Book Antiqua">
   <nav>
     <ul>
       <li> <a href="MyMain.htm" Target="MainFrame"> Αρχική </a> </li>
       <li> <a href="A1.htm"  Target="MainFrame" > Η Ανυσία </a> </li>
       <li> <a href="B1.htm"  Target="MainFrame" > Φροντίδα  </a> </li>
       <li> <a href="C1.htm"  Target="MainFrame" > Εθελοντισμός </a> </li>
       <li> <a href="D1.htm"  Target="MainFrame" > Οικονομικοί πόροι </a>  </li>
       <li> <a href="E1.htm"  Target="MainFrame" > Νέα / Εκδηλώσεις </a> </li>
       <li> <a href="F1.htm"  Target="MainFrame" > Aρθρα  </a> </li>
       <li> <a href="G1.htm"  Target="MainFrame" > Επικοινωνία </a> </li>
     </ul>
   </nav>
</font>

</body>
</html>

Admin
Admin

Αριθμός μηνυμάτων : 29
Ημερομηνία εγγραφής : 29/11/2014

Επισκόπηση του προφίλ των χρηστών http://htmllessons14.forumgreek.com

Επιστροφή στην κορυφή Πήγαινε κάτω

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή


 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης