Помогни ни да направим Uroci.net по - богат! Добави урок

CSS Меню

iskren99   трудност:    видян: 75210

Така нека първо направим началният файл - 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)

specialist1999 на 24.02 2014 в 06:45ч.
Много полезно
poppy76bg3533 на 02.05 2014 в 03:50ч.
здравей, ето аз какво направих и какво може да се появи на браузъра, само ще има проблем с IE:

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;
}

може всеки да го ползва свободно.

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com