CSS + DIV Design Example: cool Shubai navigation column

Posted by john
5/4/2007
Related Tags:
CSS DIV  div css  div css Guide  div css layout  div class  div location  div borders  div position  div positioning  div height  div align  div layer  not-for-div trip div span  div background  div layout  div rolling  div select  div effects  div around div width  div ul  div flash  div nbsp  div manuals  div usage  div site  div parameters  div interface  div nested  div top  div width  div border  div style  div onmouseover  div visibility  the body div  div framework  div css tutorial  CSS style design  css navigation  css css navigation of the book  css example  css map download div 

  <DOCTYPE html PUBLIC "- / / w3c / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  <html Xmlns=" http://www.w3.org/1999/xhtml "> 
<head>
  <meta Http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  <title> css + DIV Design Example: cool Shubai navigation bar </ title> 
  <style Type="text/css"> 
  <! -- 
  Body, td, th ( 
  Font-size: 9pt; 

  ) 
  # Navcontainer (margin-left: 30px;) 

  # Navcontainer ul 
  ( 
  Margin-left: 20px; 
  Padding: 0; 
  List-style-type: none; 
  Font-family: verdana, arial, Helvetica, sans-serif; 
  ) 

  # Navcontainer li (margin: 0;) 

  Navcontainer a # 
  ( 
  Display: block; 
  Padding: 5px 10px; 
  Width: 140px; 
  Color: # 000; 
  Background-color: # ADC1AD; 
  Text-decoration: none; 
  Border-top: 1px solid # fff; 
  Border-left: 1px solid # fff; 
  Border-bottom: 1px solid # 333; 
  Border-right: 1px solid # 333; 
  Font-weight: bold; 
  Background-repeat: no-repeat; 
  Background-position: 0 0; 
  ) 

  # Navcontainer a: hover 
  ( 
  Color: # 000; 
  Background-color: # 889E88; 
  Text-decoration: none; 
  Border-top: 1px solid # 333; 
  Border-left: 1px solid # 333; 
  Border-bottom: 1px solid # fff; 
  Border-right: 1px solid # fff; 
  Background-repeat: no-repeat; 
  Background-position: 0 0; 
  ) 

  # Navcontainer ul ul li (margin: 0;) 

  # Navcontainer ul ul a 
  ( 
  Display: block; 
  Padding: 5px 5px 5px 10px; 
  Width: 125px; 
  Color: # 000; 
  Background-color: # C5D8C5; 
  Text-decoration: none; 
  Font-weight: normal; 
  ) 

  # Navcontainer ul ul a: hover 
  ( 
  Color: # 000; 
  Background-color: # 889E88; 
  Text-decoration: none; 
  ) 
-->
  </ Style> </ head> 

<body>
  <div Id="navcontainer"> 
<ul>
  <li> <a Href="#"> 1 </ a> 
<ul>
  <li> <a Href="#"> 1-1 </ a> </ li> 
  <li> <a Href="#"> 1-2 </ a> </ li> 
  <li> <a Href="#"> 1-3 </ a> </ li> 
  <li> <a Href="#"> 1-4 </ a> </ li> 
  </ Ul> 
  </ Li> 
  <li> <a Href="#"> 2 </ a> </ li> 
<ul>
  <li> <a Href="#"> 1-1 </ a> </ li> 
  <li> <a Href="#"> 1-2 </ a> </ li> 
  <li> <a Href="#"> 1-3 </ a> </ li> 
  <li> <a Href="#"> 1-4 </ a> </ li> 
  </ Ul> 
  </ Ul> 
  </ Div> 
  </ Body> 
  </ Html> 




Related articles:

Website designers must extend the 20 FireFox
  If you often use Firefox, is a Web site designer, recommend that you use the following few Firefox extension:    Web Developer Toolbar abnormal powerful tools, debugging can now visit the website of cookies, CSS, images, information pages, window size, but also can view the source...
Dreamweaver MX 2004 Guide to the use of CSS CSS background attribute
  Original content of this site, please specify the source of reproduced I love DivCSS.    3. Definition CSS style attributes background    "CSS style definition of" dialog "background" category can be defined CSS style background settings.   ...
Understanding RSS RSS feature articles
  Fourth, understand RSS    The following is intended to let everyone know more about RSS, if you do not their interest can not, it will not use an RSS reader you have little impact.    1.Feed (Abstract)    Blog RSS documents to form an outline of its contents, ...
SEO Study: search results click on the former 10 Distribution
  AOL has released an alarming three months of search data, search engine marketing sector immediately conducted an analysis of these data, a lot of valuable analysis to be useful to many conclusions.    This paper is based on data calculated aol search engine search results pages (S...
Flash MX 2004 produced video tutorial examples: Valentine's Day greeting cards (3)
  Article 78: Valentine's Day greeting cards (3)    Curriculum objectives: production, "Valentine's Day greeting cards," greeting cards    Curriculum points: the use of Flash MX 2004 production of "Valentine's Day greeting cards," greeting ...