Други уроци
Adobe Photoshop
Adobe Illustrator
Adobe Flash
Adobe Fireworks
DreamWeaver
CSS и HTML
Corel Draw
Image Ready
PHP
SEO
CMS
Microsoft Windows
Microsoft Word
Microsoft Excel
PowerPoint
Microsoft Access
Microsoft Publisher
Linux
Visual basic
JavaScript
Ajax
3ds Max
Maya 3D
C++
Sound Forge
Gimp
SWiSH
.jpg)
CSS Меню
видян: 76977
Така нека първо направим началният файл - index.php .След като го направим за да не пишем повече от един файл нека да добавим и стила в този файл.Това става в тага <head></head> с атрибута <style type="text/css"></style>.Нека да започваме кодинга. Можете да едитвате страниците от див-а "menu".
index.php
-----------------------------------------------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Title</title>
<style type="text/css">
#menu {
background: #32323a;
border-radius: 7px;
padding: 15px;
}
#menu a {
color: #fff;
text-decoration: none;
font-family: Constantia;
word-spacing: 15px;
padding: 15px;
}
#menu a:hover {
background: #141414;
}
</style>
</head>
<body>
<div id="menu">
<a href="page1">Page</a>
<a href="page2">Page</a>
<a href="page3">Page</a>
<a href="page4">Page</a>
</div>
</body>
</html>
Урокът е изграден от iskren99. Забранява се копирането и постването без моето съгласие.Дано да съм ви помогнал.
Коментари (2)
index.html
my page
Home
About Us
Services
Contact
This doesn't work for me. When I change the display of the link to "block", it puts itself on a different line than the bullet point.
This doesn't work for me. When I change the display of the link to "block", it puts itself on a different line than the bullet point.
This doesn't work for me. When I change the display of the link to "block", it puts itself on a different line than the bullet point.
styles.css
външен документ
*{
margin: auto;
padding: auto;
}
body{
background-image: url(images/forrest.jpg);
font-family: sans-serif;
font-style: normal;
font-variant: normal;
font-size: 87.5%;
color: #333333;
}
.wrapper{
margin-top:0.8%;
width: 100%;
height: 100%;
clear:both;
}
.header{
width: 70%;
height: 180px;
background: #eaeaea;
clear:both;
border: 2px solid #333;
border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
}
.footer{
width: 70%;
height: 30px;
background: #eaeaea;
clear:both;
margin-top: auto;
border: 2px solid #333;
border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
}
.navbar{
width: 70%;
height: 50px;
background: #eaeaea;
clear:both;
border: 2px solid #333;
border-radius: 2px;
-ms-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
}
ul{
margin-top:.5%;
list-style:none;
}
li{
display: inline-block;
margin-left: 6px;
padding-left: 3%;
width: 100px;
height: 30px;
text-align:center;
}
li a{
display:block; /* moved to link */
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
padding-right:.5em;
color: #123ade;
background-color: #ffff00;
}
li a:hover{
color: #fff;
background-color:#ff3300;
}
.mainContent{
width: 70%;
height: 600px;
background: #eaeaea;
clear:both;
border: 2px solid #333;
border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
}
.wrapperContent {
margin-top: 20px;
margin-left: 0.2%;
float: left;
width:33%;
}
.container {
background-color: yellow;
margin: 10px;
padding: 20px;
}
може всеки да го ползва свободно.