Простая горизонтальная кнопка/панель меню Dreamweaver

Я только начинаю с HTML и Dreamweaver. В основном, я пытаюсь создать простую горизонтальную панель меню с помощью мыши и «изменить размер браузера», чтобы панель была растянута, чтобы охватить окно браузера и т. Д.Простая горизонтальная кнопка/панель меню Dreamweaver

Возможно, кто-то может порекомендовать хороший учебник для начала работы с этими начинающих задач.

Я застрял на картинке ниже, чтобы вы знали, что я имею в виду под «горизонтальной».

источник

2011-12-30 Linuxmint

Это вы должны получить на стадионах. Возможно, вам придется немного подстроить его по своему вкусу. Но основная концепция есть.

<html> 
<head> 
<title></title> 
</head> 
<body> 

<style type="text/css"> 

#navbar { 
width:100%; 
height:40px; 
background-color:#000; 
} 

#navbar ul { 
width:80%; 
margin:0 auto 0 auto; 
} 

#navbar ul li { 
float:left; 
color:#CC0000; 
padding:0 20px 0 20px; 
border-right:1px solid #FFF; 
border-left:1px solid #FFF; 
height:40px; 
list-style:none; 
display:block; 
line-height:40px; 
text-align:center; 
cursor:pointer; 
} 

#navbar ul li:hover { 
background-color:#CCC; 
} 

</style> 
    <div id="navbar"> 

     <ul> 
      <li>Link 1</li> 
      <li>Link 2</li> 
      <li>Link 3</li> 
      <li>Link 4</li> 
      <li>Link 5</li> 
     </ul> 

    </div> 
</body> 
</html>

FIDDLE:

http://jsfiddle.net/xbf5xq3n/1/

источник

2011-12-30 21:17:03

Вы должны сделать это с маркированного списка, как показано ниже.

<ul class=".mynavul"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="serviceappointment.html">Service appointment</a></li> 
     <li><a href="pools&amp;spas.html">Pools &amp; spas</a></li> 
     <li><a href="testimonials.html">Testimonials</a></li> 
     <li><a href="aboutus.html">About us</a></li> 
     <li><a href="contactus.html" class="active">Contact us</a></li> 
     <li><a href="links.html">Links</a></li> 


     </ul>

и УС должно быть, как показано ниже, так что отображается горизонтально

/* for the Ul */ 

ul.mynavul { 
    float: left; 
    width: 100%; 
    height: auto; 
    padding: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
     display: block; 
    margin-bottom: 0px; 
    margin-left: 3px; 
} 




/* for the Li */ 

ul .mynavul li { 
    float: left; 
    width: 141px; 
    margin-left: 1px; 
    padding: 0px; 
    text-align: center; 
     display: block; 
    margin-top: 19px; 
    color: #D8DCD8; 
    font-size: 14px; 
} 


/* for the Links */ 

ul .mynavul li a { 
    color: #CCC; 

} 


/* for the Links Hover */ 

ul .mynavul li a:hover { 
    color: #CCC; 

} 



/* Adjust the Colors, Width, and Height as needed */

источник

2011-12-30 21:20:30

Простая горизонтальная кнопка/панель меню Dreamweaver

ответ

Смежные вопросы