ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ΜΕ 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

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

Επιστροφή στην κορυφή


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