ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ΜΕ CSS- ΜΑΘΗΜΑ 3
Σελίδα 1 από 1
ΜΕΝΟΥ ΕΠΙΛΟΓΩΝ ΜΕ CSS- ΜΑΘΗΜΑ 3
Όπως και με τα υπόλοιπα εγγραφα που έχουμε φτιάξει δε χρειάζεται να φτιάξετε κάτι από την αρχή.
Χρησιμοποιούμε ένα πρότυπο και το προσαρμόζουμε στις ανάγκες μας.
το παρακάτω έγγραφο δημιουργεί ένα πράσινο μενού επιλογών
μπορείτε να παίξετε με τα χρώματα αν το επιθυμείτε και το αρχείο του 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>
Χρησιμοποιούμε ένα πρότυπο και το προσαρμόζουμε στις ανάγκες μας.
το παρακάτω έγγραφο δημιουργεί ένα πράσινο μενού επιλογών
μπορείτε να παίξετε με τα χρώματα αν το επιθυμείτε και το αρχείο του 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>
Παρόμοια θέματα
» ΔΗΜΙΟΥΡΓΙΑ ΠΛΑΙΣΙΟΥ ΑΡΙΣΤΕΡΑ - ΜΑΘΗΜΑ 1
» ΠΕΡΙΣΣΟΤΕΡΑ ΠΛΑΙΣΙΑ ΣΕ ΜΙΑ ΣΕΛΙΔΑ - ΜΑΘΗΜΑ 2
» Μάθημα 1 Πώς θα φτιάξω blog;
» Μάθημα 1ο Τα είδη των σελίδων του INTERNET
» ΤΕΛΙΚΟ ΜΑΘΗΜΑ ΣΤΑΤΙΚΩΝ HTML
» ΠΕΡΙΣΣΟΤΕΡΑ ΠΛΑΙΣΙΑ ΣΕ ΜΙΑ ΣΕΛΙΔΑ - ΜΑΘΗΜΑ 2
» Μάθημα 1 Πώς θα φτιάξω blog;
» Μάθημα 1ο Τα είδη των σελίδων του INTERNET
» ΤΕΛΙΚΟ ΜΑΘΗΜΑ ΣΤΑΤΙΚΩΝ HTML
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
|
|