您現在的位置: 网站首頁 / 網站建設 / 正文

縱向導航菜單及二級彈出菜單-Web標准(div+css)教程

作者: admin 发布: 2015-1-26 22:40:30 分类: 網站建設 閱讀: 次 查看評論

  今天我們開始學習《十天學會web標准(div+css)》的縱向導航菜單及二級彈出菜單,包含以下內容和知識點:

  一、縱向列表

  二、標簽的默認樣式

  三、css派生選擇器

  四、css選擇器的分組

  五、縱向二級列表

  六、相對定位和絕對定位

  一、縱向列表

  縱向列表或稱爲縱向導航,在網站的産品列表中應用比較廣泛,如淘寶網左側的淘寶服務,今天我們就學習一下縱向導航的制作

  先新建一個頁面,然後插入一個ID爲menu的div,然後在設計視圖中選中文字,點擊工具欄的ul圖標,即會自動插入ul和li,然後修改文字內容爲你需要的內容。

  

  

  <div id="menu">

  <ul>

  <li>首頁</li>

  <li>網頁版式布局</li>

  <li>div+css教程</li>

  <li>div+css實例</li>

  <li>常用代碼</li>

  <li>站長雜談</li>

  <li>技術文檔</li>

  <li>資源下載</li>

  <li>圖片素材</li>

  </ul>

  </div>

  

  從預覽的效果上看,四周都有很大的空隙,而且每一行前邊還有個點,這是因爲標簽的默認樣式造成的,下面我們需要創建樣式表把標簽的默認樣式給清除掉

  

  

  

  

  生成的css代碼如下:

  <style type="text/css">

  #menu ul { list-style: none; margin: 0px; padding: 0px; }

  </style>

  下面我們定義一下全局的字體,字號,行距等,點擊css樣式面板上的新建按鈕,在彈出的窗口中選擇器類型選擇標簽,名稱選擇body,然後在css編輯器中設置如下圖所示屬性

  

  

  body全局樣式定義後,下面我們給#menu定義一個灰色的1px邊框及寬度,然後把li定義下背景色和下邊框及內邊距等

  

  

  

  接下來定義li的背景色爲淺灰色及下邊框和內邊距

  

  

  

  

  

  

  這些屬性設置完後,一個簡單的縱向列表菜單初具模型了。因爲導航菜單,需要鏈接到其它頁面,下邊把這些導航加上鏈接,然後在定義a的狀態和鼠標劃過狀態。

  要添加鏈接,先選擇要添加鏈接的文字,然後在屬性頁面鏈接上輸入要鏈接的頁面址,我這裏輸入個#,是個虛擬鏈接,不指向任何頁面。

  

  

  

  創建a的樣式後,下面我們增加個交互效果,當鼠標劃過鏈接文字時,讓文字顔色變成紅色,這時就需要用到a:hover這個僞類了

  

  

  這裏的a:hover屬于僞類,在下一章節時會詳細講解

  

  源代碼如下:

  <!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" />

  <style type="text/css">

  body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

  a { color: #000; text-decoration: none; }

  a:hover { color: #F00; }

  #menu { width: 100px; border: 1px solid #CCC; }

  #menu ul { list-style: none; margin: 0px; padding: 0px; }

  #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

  </style>

  </head>

  <body>

  <div id="menu">

  <ul>

  <li><a href="@#">首頁</a></li>

  <li><a href="#">网页版式布局</a></li>

  <li><a href="#">div+css教程</a></li>

  <li><a href="#">div+css实例</a></li>

  <li><a href="#">常用代码</a></li>

  <li><a href="#">站长杂谈</a></li>

  <li><a href="#">技术文档</a></li>

  <li><a href="#">资源下载</a></li>

  <li><a href="#">图片素材</a></li>

  </ul>

  </div>

  </body>

  </html>

  二、標簽的默認樣式

  大多數標簽都有自己的默認樣式,比如第二天課程中遇到的body默認外邊距,另外本例中ul前的圓點及左側的內邊距,另h1-h6字體大小各不相同,em默認爲斜體,strong表示粗體。正因爲有這些默認樣式,一個設計合理的頁面,即使沒有加載樣式,也能讓用戶很容易閱讀。但此時這些默認樣式對我們沒用,所以需要清除掉,爲了方便,建議用標簽重定義方式,這樣可以很簡單地把全局的樣式給統一起來。另外頁面中的圖片添加鏈接後會默認添加個邊框,ul默認情況下會在列表前添加圓點,這些都是需要去掉的。

  body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }

  ul { list-style: none; }

  img { border-style: none; }

  

  這裏選擇器類型選擇複合內容,我用的是dw最新cs5版本,比之前章節用的cs3版本中更合理了,把ID和僞類分開了。然後在選擇器名稱中輸入我們常用的帶默認樣式的標簽,中間以英文逗號分隔

  

  

  下面對img標簽進行重定義,清除圖片有鏈接時默認的邊框

  

  

  下邊設置全局ul標簽默認的圓點爲無

  

  

  這樣就很簡單把常用標簽的默認樣式給清除掉了,如果需要邊距的話再重新定義,也避免了各個浏覽器對標簽默認樣式解析差異造成頁面顯示不一樣的問題。

  三、css派生選擇器

  CSS初學者不知道使用子選擇器是影響他們效率的原因之一。派生選擇器可以幫助你節約大量的class定義。我上邊的例子中應用了些派生選擇器如下的css代碼

  #menu ul { list-style: none; margin: 0px; padding: 0px; }

  #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }

  #menu ul和#menu ul li即为派生选择器,如果我们把前边的#menu去掉,那么将是对ul标签重定义,重定义的属性将应用到全局,而前边加上#menu后,将是定义ID为menu元素内ul的样式,设置它的样式只对#menu下的ul生效,不对它之后的ul生效,这个有点像编程中的局部变量,而直接定义ul则相当于全局变量。#menu ul li 是定义ID为menu元素内ul下的li,派生选择器可以使我们不用再给每个li定义一个样式名来定义样式,只需使用派生选择器,从它的父元素处选择即可,这样能大大提高效率。

  四、css選擇器的分組

  你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的,p段落、div分區、span都是20像素字體。

  h1,h2,h3,h4,h5,h6 {

  color: green;

  }

  p,div,span{

  font-size:20px;

  }

  五、縱向二級列表

  二級菜單即指當鼠標放到一級菜單上後,會彈出相應的二級菜單,移去鼠標後自動消失,我們接著上邊的例子進行修改,代碼如下:

  <div id="menu">

  <ul>

  <li><a href="@#">首頁</a></li>

  <li><a href="#">网页版式布局</a>

  <ul>

  <li><a href="#">自适应宽度</a></li>

  <li><a href="#">固定宽度</a></li>

  </ul>

  </li>

  <li><a href="#">div+css教程</a>

  <ul>

  <li><a href="#">新手入门</a></li>

  <li><a href="#">视频教程</a></li>

  <li><a href="#">常见问题</a></li>

  </ul>

  </li>

  <li><a href="#">div+css实例</a></li>

  <li><a href="#">常用代码</a></li>

  <li><a href="#">站长杂谈</a></li>

  <li><a href="#">技术文档</a></li>

  <li><a href="#">资源下载</a></li>

  <li><a href="#">图片素材</a></li>

  </ul>

  </div>

  接下来修改css样式表,先修改#menu ul li,给其增加一个 position:relative;属性

  

  然後定義ID爲menu下ul下裏內的ul樣式如下:

  

  

  

  定義display:none後,默認狀態下將隱藏

  

  

  定义#menu ul li ul的position: absolute; left: 100px; top: 0px;,那么它将以相对于它父元素li的上为0,左为100的位置显示。最后我们设置当鼠标划过后显示下级菜单的样式

  

  

  #menu ul li:hover ul这个样式比较难理解,它的意思是定义ID为menu下ul下li,当鼠标划过时ul的样式,这里设置为display:block,指的是鼠标划过时显示这块内容,这也实现我们今天想要的效果。其中的:hover和前边说的链接一样,同属于伪类,但有一点注意,目前IE6只支持a的伪类,其它标签的伪类不支持,所以要想在IE6下也显示正确,需要借助js来实现,我们定义一个类.current (自己命名,需和JS中相同)的属性为display:block;然后当鼠标划过后,用JS给当前li添加上这个样式上,根据css的优先级:指定的高于继承的原则,就实现了IE6下的正确显示。所以需要加上JS和样式#menu ul li.current ul { display:block;}。

  #menu ul li.current ul { display:block;}

  <!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" />

  <script type="text/javascript"><!--//--><![CDATA[//><!--

  startList = function() {

  if (document.all&&document.getElementById) {

  navRoot = document.getElementById("menu");

  var allli = navRoot.getElementsByTagName("li")

  for (i=0; i<allli.length; i++) {

  node = allli[i];

  node.onmouseover=function() {

  this.className+=" current";

  }

  node.onmouseout=function() {

  this.className=this.className.replace(" current", "");

  }

  }

  }

  }

  window.onload=startList;

  //--><!]]></script>

  <style type="text/css">

  body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

  img { border-style: none; }

  a { color: #000; text-decoration: none; }

  a:hover { color: #F00; }

  #menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}

  #menu ul { list-style: none; margin: 0px; padding: 0px; }

  #menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }

  #menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }

  #menu ul li.current ul { display:block;}

  #menu ul li:hover ul { display:block;}

  </style>

  </head>

  <body>

  <div id="menu">

  <ul>

  <li><a href="#">首頁</a></li>

  <li><a href="#">网页版式布局</a>

  <ul>

  <li><a href="#">自适应宽度</a></li>

  <li><a href="#">固定宽度</a></li>

  </ul>

  </li>

  <li><a href="#">div+css教程</a>

  <ul>

  <li><a href="#">新手入门</a></li>

  <li><a href="#">视频教程</a></li>

  <li><a href="#">常见问题</a></li>

  </ul>

  </li>

  <li><a href="#">div+css实例</a></li>

  <li><a href="#">常用代码</a></li>

  <li><a href="#">站长杂谈</a></li>

  <li><a href="#">技术文档</a></li>

  <li><a href="#">资源下载</a></li>

  <li><a href="#">图片素材</a></li>

  </ul>

  </div>

  </body>

  </html>

  最終顯示效果如下:

  

  上節課講解塊級元素和內聯元素時提到display,今天用到了display:block;和display:none;值爲none時表示將這個元素隱藏,爲block時表示將它的隱藏狀態改爲顯示狀態詳細介紹請參考css手冊

  六、相對定位和絕對定位

  § 定位标签:position

  § 包含属性:relative(相对) absolute(绝对)

  1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)

  2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)

  3.父容器使用相對定位,子元素使用絕對定位後,這樣子元素的位置不再相對于浏覽器左上角,而是相對于父窗口左上角

  4.相對定位和絕對定位需要配合top、right、bottom、left使用來定位具體位置,這四個屬性只有在該元素使用定位後才生效,其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個,不能即使用上又使用下,或即使用左,又使用右

  文章出处:标准之路 编辑:杨雨晨思

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: DIV  CSS  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表