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
Explain the purpose of the role attribute in ARIA.
Jun 14, 2025 am 12:35 AM
ARIA's role attribute is used to define the role of web elements and improve accessibility. 1. Role attribute helps assistive technology to understand the functions of elements, such as buttons, navigation, etc. 2. Use role attributes to assign specific roles to non-semantic HTML elements. 3. The role attribute should be consistent with the element behavior and be verified by the accessibility tool test.
HTML and Design: Creating the Visual Layout of Websites
Jun 14, 2025 am 12:39 AM
How to create a website layout? 1. Use HTML tags to define the content structure, such as, ,. 2. Control styles and positions through CSS, using box model, float or Flexbox layout. 3. Optimize performance, reduce HTTP requests, use cache and optimize images, and ensure responsive design.
How can you ensure your HTML code is readable and maintainable?
Jun 10, 2025 am 12:06 AM
Improve the readability and maintainability of HTML code can be achieved through the following steps: 1. Use semantic tags, such as, etc. to make the code structure clear and improve SEO effect; 2. Keep the code formatted and use consistent indentation and spaces; 3. Add appropriate comments to explain the code intention; 4. Avoid excessive nesting and simplify the structure; 5. Use external style sheets and scripts to keep the HTML concise.
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.
What is an HTML tag?
Jun 13, 2025 am 12:36 AM
HTMLtagsareessentialforstructuringwebpages.Theydefinecontentandlayoutusinganglebrackets,ofteninpairslikeand,withsomebeingself-closinglike.HTMLtagsarecrucialforcreatingstructured,accessible,andSEO-friendlywebpages.
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.
