Web Front-end
HTML Tutorial
The fourth day of learning Div CSS in ten days [vertical navigation and secondary menu]_html/css_WEB-ITnose
The fourth day of learning Div CSS in ten days [vertical navigation and secondary menu]_html/css_WEB-ITnose
Jun 24, 2016 pm 12:29 PM
1. Vertical list
Vertical list, or vertical navigation, is widely used in product lists on websites, such as the Taobao service on the left side of Taobao. Today we will learn about vertical navigation Production
First create a new page, then insert a div with the ID menu, then select the text in the design view, click the ul icon on the toolbar, ul and li will be automatically inserted, and then modify the text content as The content you need.
<div id="menu"><ul><li>首頁</li><li>網(wǎng)頁版式布局</li><li>div+css教程</li><li>div+css實例</li><li>常用代碼</li><li>站長雜談</li><li>技術(shù)文檔</li><li>資源下載</li><li>圖片素材</li></ul></div>
From the preview, there are large gaps all around, and there is a dot in front of each line , this is caused by the default style of the label. Next we need to create a style sheet to clear the default style of the label
The CSS code is as follows:
<style type="text/css">#menu ul { list-style: none; margin: 0px; padding: 0px; }</style> Complete HTML The code is as follows:
<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="#">首頁</a></li><li><a href="#">網(wǎng)頁版式布局</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="#">技術(shù)文檔</a></li><li><a href="#">資源下載</a></li><li><a href="#">圖片素材</a></li></ul></div></body></html> 2. The default style of labels
Most labels have their own default styles, such as what I encountered in the course the next day. The body has default outer margins. In this example, the dot before ul and the inner margin on the left side. In addition, h1-h6 font sizes are different. em defaults to italic, and strong means bold. Because of these default styles, a well-designed page can be easily read by users even if no styles are loaded. But these default styles are of no use to us at this time, so they need to be cleared. For convenience, it is recommended to use tag redefinition, which can easily unify the global styles. In addition, the pictures on the page will have a border added by default after adding links, and ul will add dots in front of the list by default, which need to be removed.
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; } 3. CSS derived selector
CSS beginners don’t know that using sub-selectors is one of the reasons that affects their efficiency. Derived selectors can help you save a lot of class definitions. In the example above, I used some derived selectors with the following css code
#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 and #menu ul li are derived selectors. If we remove the #menu in front, it will redefine the ul tag, and the redefined attributes will be applied globally. After adding #menu in front, it will define the style of ul in the menu element with ID, and set its The style only takes effect on the ul under #menu, not the ul after it. This is a bit like a local variable in programming, and directly defining ul is equivalent to a global variable. #menu ul li is defined as the li under ul within the menu element. The derived selector allows us to no longer need to define a style name for each li to define the style. We only need to use the derived selector to select from its parent element. That’s it, this can greatly improve efficiency.
4. Grouping of css selectors
You can group selectors so that grouped selectors can share the same statement. Use commas to separate selectors that need to be grouped. In the example below, we have grouped all heading elements. All title elements are green, and p paragraphs, div partitions, and spans are all 20 pixel fonts.
h1,h2,h3,h4,h5,h6 { color: green; } p,div,span{ font-size:20px; } 5. Vertical secondary list
The secondary menu means that when the mouse is placed on the first-level menu, the corresponding secondary menu will pop up. Level menu will disappear automatically after removing the mouse. Let’s modify the above example. The code is as follows:
<div id="menu"><ul><li><a href="@#">首頁</a></li><li><a href="#">網(wǎng)頁版式布局</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="#">新手入門</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="#">技術(shù)文檔</a></li><li><a href="#">資源下載</a></li><li><a href="#">圖片素材</a></li></ul></div>
All 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="#">首頁</a></li><li><a href="#">網(wǎng)頁版式布局</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="#">新手入門</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="#">技術(shù)文檔</a></li><li><a href="#">資源下載</a></li><li><a href="#">圖片素材</a></li></ul></div></body></html>
6. Relative positioning and absolute positioning
Positioning tag: position
Contains attributes: relative (relative) absolute (absolute)
1.position:relative; If an element is positioned relatively, first it will appear at its location. Then move the element "relative to" its original starting point by setting a vertical or horizontal position. (One more point, when positioned relatively, the element still occupies the original space regardless of whether it is moved. Therefore, moving the element will cause it to cover other boxes)
2.position:absolute; means absolute positioning, and the position will be based on Starting from the upper left corner of the browser. Absolute positioning takes the element out of the document flow so it doesn't take up space. Elements in normal document flow are laid out as if absolutely positioned elements were not present. (Because absolutely positioned boxes have nothing to do with document flow, they can cover other elements on the page and their hierarchical order can be controlled by z-index. The higher the z-index, the further up it appears.)
3. After the parent container uses relative positioning and the child element uses absolute positioning, the position of the child element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent window
4. Relative Positioning and absolute positioning need to be used with top, right, bottom, and left to locate the specific position. These four attributes only take effect after the element is positioned, and are invalid in other cases. In addition, these four attributes can only use two adjacent ones at the same time. You cannot use up and down at the same time, or use left and right at the same time.
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How do I stay up-to-date with the latest HTML standards and best practices?
Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document?
Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I create a basic HTML document?
Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
How do I minimize the size of HTML files?
Jun 24, 2025 am 12:53 AM
To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.
How has HTML evolved over time, and what are the key milestones in its history?
Jun 24, 2025 am 12:54 AM
HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout
How do I use the element to represent the footer of a document or section?
Jun 25, 2025 am 12:57 AM
It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.
How do I embed video in HTML using the element?
Jun 20, 2025 am 10:09 AM
To embed videos in HTML, use tags and specify the video source and attributes. 1. Use src attributes or elements to define the video path and format; 2. Add basic attributes such as controls, width, height; 3. To be compatible with different browsers, you can list MP4, WebM, Ogg and other formats; 4. Use controls, autoplay, muted, loop, preload and other attributes to control the playback behavior; 5. Use CSS to realize responsive layout to ensure that it is adapted to different screens. Correct combination of structure and attributes can ensure good display and functional support of the video.
