十天學(xué)會(huì)Div+CSS第四天之【縱向?qū)Ш脚c二級(jí)菜單】_html/css_WEB-ITnose
Jun 24, 2016 pm 12:29 PM
一、縱向列表
縱向列表或稱(chēng)為縱向?qū)Ш剑诰W(wǎng)站的產(chǎn)品列表中應(yīng)用比較廣泛，如淘寶網(wǎng)左側(cè)的淘寶服務(wù)，今天我們就學(xué)習(xí)一下縱向?qū)Ш降闹谱?br>
先新建一個(gè)頁(yè)面，然后插入一個(gè)ID為menu的div，然后在設(shè)計(jì)視圖中選中文字，點(diǎn)擊工具欄的ul圖標(biāo)，即會(huì)自動(dòng)插入ul和li，然后修改文字內(nèi)容為你需要的內(nèi)容。
<div id="menu"><ul><li>首頁(yè)</li><li>網(wǎng)頁(yè)版式布局</li><li>div+css教程</li><li>div+css實(shí)例</li><li>常用代碼</li><li>站長(zhǎng)雜談</li><li>技術(shù)文檔</li><li>資源下載</li><li>圖片素材</li></ul></div>
從預(yù)覽的效果上看，四周都有很大的空隙，而且每一行前邊還有個(gè)點(diǎn)，這是因?yàn)闃?biāo)簽的默認(rèn)樣式造成的，下面我們需要?jiǎng)?chuàng)建樣式表把標(biāo)簽的默認(rèn)樣式給清除掉
CSS代碼如下：
<style type="text/css">#menu ul { list-style: none; margin: 0px; padding: 0px; }</style> 完整的HTML代碼如下：
<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></p><p><body><div id="menu"><ul><li><a href="#">首頁(yè)</a></li><li><a href="#">網(wǎng)頁(yè)版式布局</a></li><li><a href="#">div+css教程</a></li><li><a href="#">div+css實(shí)例</a></li><li><a href="#">常用代碼</a></li><li><a href="#">站長(zhǎng)雜談</a></li><li><a href="#">技術(shù)文檔</a></li><li><a href="#">資源下載</a></li><li><a href="#">圖片素材</a></li></ul></div></body></html> 二、標(biāo)簽的默認(rèn)樣式
大多數(shù)標(biāo)簽都有自己的默認(rèn)樣式，比如第二天課程中遇到的body默認(rèn)外邊距，另外本例中ul前的圓點(diǎn)及左側(cè)的內(nèi)邊距，另h1-h6字體大小各不相同，em默認(rèn)為斜體，strong表示粗體。正因?yàn)橛羞@些默認(rèn)樣式，一個(gè)設(shè)計(jì)合理的頁(yè)面，即使沒(méi)有加載樣式，也能讓用戶(hù)很容易閱讀。但此時(shí)這些默認(rèn)樣式對(duì)我們沒(méi)用，所以需要清除掉，為了方便，建議用標(biāo)簽重定義方式，這樣可以很簡(jiǎn)單地把全局的樣式給統(tǒng)一起來(lái)。另外頁(yè)面中的圖片添加鏈接后會(huì)默認(rèn)添加個(gè)邊框，ul默認(rèn)情況下會(huì)在列表前添加圓點(diǎn)，這些都是需要去掉的。
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; } 三、css派生選擇器
CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。派生選擇器可以幫助你節(jié)約大量的class定義。我上邊的例子中應(yīng)用了些派生選擇器如下的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去掉，那么將是對(duì)ul標(biāo)簽重定義，重定義的屬性將應(yīng)用到全局，而前邊加上#menu后，將是定義ID為menu元素內(nèi)ul的樣式，設(shè)置它的樣式只對(duì)#menu下的ul生效，不對(duì)它之后的ul生效，這個(gè)有點(diǎn)像編程中的局部變量，而直接定義ul則相當(dāng)于全局變量。#menu ul li 是定義ID為menu元素內(nèi)ul下的li，派生選擇器可以使我們不用再給每個(gè)li定義一個(gè)樣式名來(lái)定義樣式，只需使用派生選擇器，從它的父元素處選擇即可，這樣能大大提高效率。
四、css選擇器的分組
你可以對(duì)選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開(kāi)。在下面的例子中，我們對(duì)所有的標(biāo)題元素進(jìn)行了分組。所有的標(biāo)題元素都是綠色的，p段落、div分區(qū)、span都是20像素字體。
h1,h2,h3,h4,h5,h6 { color: green; } p,div,span{ font-size:20px; } 五、縱向二級(jí)列表
二級(jí)菜單即指當(dāng)鼠標(biāo)放到一級(jí)菜單上后，會(huì)彈出相應(yīng)的二級(jí)菜單，移去鼠標(biāo)后自動(dòng)消失，我們接著上邊的例子進(jìn)行修改，代碼如下：
<div id="menu"><ul><li><a href="@#">首頁(yè)</a></li><li><a href="#">網(wǎng)頁(yè)版式布局</a><ul><li><a href="#">自適應(yīng)寬度</a></li><li><a href="#">固定寬度</a></li></ul></li><li><a href="#">div+css教程</a><ul><li><a href="#">新手入門(mén)</a></li><li><a href="#">視頻教程</a></li><li><a href="#">常見(jiàn)問(wèn)題</a></li></ul></li><li><a href="#">div+css實(shí)例</a></li><li><a href="#">常用代碼</a></li><li><a href="#">站長(zhǎng)雜談</a></li><li><a href="#">技術(shù)文檔</a></li><li><a href="#">資源下載</a></li><li><a href="#">圖片素材</a></li></ul></div>
所有的HTML+JS+CSS：
<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></p><p><body><div id="menu"><ul><li><a href="#">首頁(yè)</a></li><li><a href="#">網(wǎng)頁(yè)版式布局</a><ul><li><a href="#">自適應(yīng)寬度</a></li><li><a href="#">固定寬度</a></li></ul></li><li><a href="#">div+css教程</a><ul><li><a href="#">新手入門(mén)</a></li><li><a href="#">視頻教程</a></li><li><a href="#">常見(jiàn)問(wèn)題</a></li></ul></li><li><a href="#">div+css實(shí)例</a></li><li><a href="#">常用代碼</a></li><li><a href="#">站長(zhǎng)雜談</a></li><li><a href="#">技術(shù)文檔</a></li><li><a href="#">資源下載</a></li><li><a href="#">圖片素材</a></li></ul></div></body></html>
六、相對(duì)定位和絕對(duì)定位
定位標(biāo)簽：position
包含屬性：relative（相對(duì)） absolute（絕對(duì)）
1.position:relative; 如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，首先它將出現(xiàn)在它所在的位置上。然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素"相對(duì)于"它的原始起點(diǎn)進(jìn)行移動(dòng)。（再一點(diǎn)，相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框）
2.position:absolute; 表示絕對(duì)定位，位置將依據(jù)瀏覽器左上角開(kāi)始計(jì)算。 絕對(duì)定位使元素脫離文檔流，因此不占據(jù)空間。普通文檔流中元素的布局就像絕對(duì)定位的元素不存在時(shí)一樣。（因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素并可以通過(guò)z-index來(lái)控制它層級(jí)次序。z-index的值越高，它顯示的越在上層。）
3.父容器使用相對(duì)定位，子元素使用絕對(duì)定位后，這樣子元素的位置不再相對(duì)于瀏覽器左上角，而是相對(duì)于父窗口左上角
4.相對(duì)定位和絕對(duì)定位需要配合top、right、bottom、left使用來(lái)定位具體位置，這四個(gè)屬性只有在該元素使用定位后才生效，其它情況下無(wú)效。另外這四個(gè)屬性同時(shí)只能使用相鄰的兩個(gè)，不能即使用上又使用下，或即使用左，又使用右。
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線(xiàn)人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
熱門(mén)話(huà)題
解釋ARIA中角色屬性的目的。
Jun 14, 2025 am 12:35 AM
ARIA的role屬性用于定義網(wǎng)頁(yè)元素的角色，提升無(wú)障礙性。1.role屬性幫助輔助技術(shù)理解元素的功能，如按鈕、導(dǎo)航等。2.使用role屬性可以為非語(yǔ)義HTML元素賦予特定角色。3.role屬性應(yīng)與元素行為一致，并通過(guò)無(wú)障礙工具測(cè)試驗(yàn)證。
HTML和設(shè)計(jì)：創(chuàng)建網(wǎng)站的視覺(jué)布局
Jun 14, 2025 am 12:39 AM
如何創(chuàng)建網(wǎng)站布局？1.使用HTML標(biāo)簽定義內(nèi)容結(jié)構(gòu)，如、、。2.通過(guò)CSS控制樣式和位置，使用盒模型、浮動(dòng)或Flexbox布局。3.優(yōu)化性能，減少HTTP請(qǐng)求，使用緩存和優(yōu)化圖像，確保響應(yīng)式設(shè)計(jì)。
如何確保您的HTML代碼可讀和可維護(hù)？
Jun 10, 2025 am 12:06 AM
提升HTML代碼的可讀性和可維護(hù)性可以通過(guò)以下步驟實(shí)現(xiàn)：1.使用語(yǔ)義化標(biāo)簽，如、、等，使代碼結(jié)構(gòu)清晰，提升SEO效果；2.保持代碼格式化，使用一致的縮進(jìn)和空格；3.添加適當(dāng)?shù)淖⑨專(zhuān)忉尨a意圖；4.避免過(guò)度嵌套，簡(jiǎn)化結(jié)構(gòu)；5.使用外部樣式表和腳本，保持HTML簡(jiǎn)潔。
我如何了解最新的HTML標(biāo)準(zhǔn)和最佳實(shí)踐？
Jun 20, 2025 am 08:33 AM
要跟上HTML標(biāo)準(zhǔn)和最佳實(shí)踐，關(guān)鍵在于有意為之而非盲目追隨。首先，關(guān)注官方來(lái)源如WHATWG和W3C的摘要或更新日志，了解新標(biāo)簽（如）和屬性，將其作為參考解決疑難問(wèn)題；其次，訂閱可信的網(wǎng)頁(yè)開(kāi)發(fā)新聞通訊和博客，每周花10-15分鐘瀏覽更新，關(guān)注實(shí)際用例而非僅收藏文章；再次，使用開(kāi)發(fā)者工具和linters如HTMLHint，通過(guò)即時(shí)反饋優(yōu)化代碼結(jié)構(gòu)；最后，與開(kāi)發(fā)者社區(qū)互動(dòng)，分享經(jīng)驗(yàn)并學(xué)習(xí)他人實(shí)戰(zhàn)技巧，從而持續(xù)提升HTML技能。
如何使用元素來(lái)表示文檔的主要內(nèi)容？
Jun 19, 2025 pm 11:09 PM
使用標(biāo)簽的原因是提升網(wǎng)頁(yè)的語(yǔ)義化結(jié)構(gòu)和可訪(fǎng)問(wèn)性，使屏幕閱讀器和搜索引擎更易理解頁(yè)面內(nèi)容，并允許用戶(hù)快速跳轉(zhuǎn)至核心內(nèi)容。以下是關(guān)鍵要點(diǎn)：1.每個(gè)頁(yè)面應(yīng)僅包含一個(gè)元素；2.不應(yīng)包括跨頁(yè)面重復(fù)的內(nèi)容（如側(cè)邊欄或頁(yè)腳）；3.可與ARIA屬性結(jié)合使用以增強(qiáng)無(wú)障礙體驗(yàn)。通常位于和之后、之前，用于包裹唯一的頁(yè)面內(nèi)容，例如文章、表單或產(chǎn)品詳情，并應(yīng)避免嵌套在、或中；為提高輔助功能，可使用aria-labelledby或aria-label明確標(biāo)識(shí)部分。
如何創(chuàng)建基本的HTML文檔？
Jun 19, 2025 pm 11:01 PM
要?jiǎng)?chuàng)建一個(gè)基本的HTML文檔，首先需要了解其基本結(jié)構(gòu)并按照標(biāo)準(zhǔn)格式編寫(xiě)代碼。1.開(kāi)始時(shí)使用聲明文檔類(lèi)型；2.使用標(biāo)簽包裹整個(gè)內(nèi)容；3.在其中包含和兩個(gè)主要部分，用于存放元數(shù)據(jù)如標(biāo)題、樣式表鏈接等，而則包含用戶(hù)可見(jiàn)的內(nèi)容如標(biāo)題、段落、圖片和鏈接；4.保存文件為.html格式并在瀏覽器中打開(kāi)查看效果；5.隨后可逐步添加更多元素以豐富頁(yè)面內(nèi)容。遵循這些步驟即可快速構(gòu)建一個(gè)基礎(chǔ)網(wǎng)頁(yè)。
如何使用
Jun 19, 2025 pm 11:41 PM
要?jiǎng)?chuàng)建HTML復(fù)選框，需使用type屬性設(shè)為checkbox的元素。1.基本結(jié)構(gòu)包含id、name和label標(biāo)簽，確保點(diǎn)擊文字可切換選項(xiàng)；2.多個(gè)相關(guān)復(fù)選框應(yīng)使用相同name但不同value，并用fieldset包裹提升可訪(fǎng)問(wèn)性；3.自定義樣式時(shí)隱藏原生控件并用CSS設(shè)計(jì)替代元素，同時(shí)保持功能完整；4.確?？捎眯?，配對(duì)label、支持鍵盤(pán)導(dǎo)航且避免僅依賴(lài)視覺(jué)提示。以上步驟能幫助開(kāi)發(fā)者正確實(shí)現(xiàn)兼具功能與美觀的復(fù)選框組件。
什么是HTML標(biāo)簽？
Jun 13, 2025 am 12:36 AM
htmltagsareessentialforsstructuringwebpages.theydefinecontentandandlayoutingusingangusinginganglebrackets，通常是likeand，withsomebeingself-closingsellike.htmltagsarecracialforcialforcialforcialforcreatingstructructstructstructruct，可訪(fǎng)問(wèn)，可訪(fǎng)問(wèn)，可訪(fǎng)問(wèn)，可訪(fǎng)問(wèn)，henseo-seo-seo-seo-weeprylyweblages。
