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>首頁(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>
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="#">首頁(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> 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="@#">首頁(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="#">新手入門</a></li><li><a href="#">視頻教程</a></li><li><a href="#">常見問(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>
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="#">首頁(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="#">新手入門</a></li><li><a href="#">視頻教程</a></li><li><a href="#">常見問(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>
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)
Implementing Clickable Buttons Using the HTML button Element
Jul 07, 2025 am 02:31 AM
To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this
Configuring Document Metadata Within the HTML head Element
Jul 09, 2025 am 02:30 AM
Metadata in HTMLhead is crucial for SEO, social sharing, and browser behavior. 1. Set the page title and description, use and keep it concise and unique; 2. Add OpenGraph and Twitter card information to optimize social sharing effects, pay attention to the image size and use debugging tools to test; 3. Define the character set and viewport settings to ensure multi-language support is adapted to the mobile terminal; 4. Optional tags such as author copyright, robots control and canonical prevent duplicate content should also be configured reasonably.
Best HTML tutorial for beginners in 2025
Jul 08, 2025 am 12:25 AM
TolearnHTMLin2025,chooseatutorialthatbalanceshands-onpracticewithmodernstandardsandintegratesCSSandJavaScriptbasics.1.Prioritizehands-onlearningwithstep-by-stepprojectslikebuildingapersonalprofileorbloglayout.2.EnsureitcoversmodernHTMLelementssuchas,
HTML for email templates tutorial
Jul 10, 2025 pm 02:01 PM
How to make HTML mail templates with good compatibility? First, you need to build a structure with tables to avoid using div flex or grid layout; secondly, all styles must be inlined and cannot rely on external CSS; then the picture should be added with alt description and use a public URL, and the buttons should be simulated with a table or td with background color; finally, you must test and adjust the details on multiple clients.
How to associate captions with images or media using the html figure and figcaption elements?
Jul 07, 2025 am 02:30 AM
Using HTML sums allows for intuitive and semantic clarity to add caption text to images or media. 1. Used to wrap independent media content, such as pictures, videos or code blocks; 2. It is placed as its explanatory text, and can be located above or below the media; 3. They not only improve the clarity of the page structure, but also enhance accessibility and SEO effect; 4. When using it, you should pay attention to avoid abuse, and apply to content that needs to be emphasized and accompanied by description, rather than ordinary decorative pictures; 5. The alt attribute that cannot be ignored, which is different from figcaption; 6. The figcaption is flexible and can be placed at the top or bottom of the figure as needed. Using these two tags correctly helps to build semantic and easy to understand web content.
What are the most commonly used global attributes in html?
Jul 10, 2025 am 10:58 AM
class, id, style, data-, and title are the most commonly used global attributes in HTML. class is used to specify one or more class names to facilitate style setting and JavaScript operations; id provides unique identifiers for elements, suitable for anchor jumps and JavaScript control; style allows for inline styles to be added, suitable for temporary debugging but not recommended for large-scale use; data-properties are used to store custom data, which is convenient for front-end and back-end interaction; title is used to add mouseover prompts, but its style and behavior are limited by the browser. Reasonable selection of these attributes can improve development efficiency and user experience.
How to handle forms submission in HTML without a server?
Jul 09, 2025 am 01:14 AM
When there is no backend server, HTML form submission can still be processed through front-end technology or third-party services. Specific methods include: 1. Use JavaScript to intercept form submissions to achieve input verification and user feedback, but the data will not be persisted; 2. Use third-party serverless form services such as Formspree to collect data and provide email notification and redirection functions; 3. Use localStorage to store temporary client data, which is suitable for saving user preferences or managing single-page application status, but is not suitable for long-term storage of sensitive information.
Implementing Native Lazy Loading for Images in HTML
Jul 12, 2025 am 12:48 AM
Native lazy loading is a built-in browser function that enables lazy loading of pictures by adding loading="lazy" attribute to the tag. 1. It does not require JavaScript or third-party libraries, and is used directly in HTML; 2. It is suitable for pictures that are not displayed on the first screen below the page, picture gallery scrolling add-ons and large picture resources; 3. It is not suitable for pictures with first screen or display:none; 4. When using it, a suitable placeholder should be set to avoid layout jitter; 5. It should optimize responsive image loading in combination with srcset and sizes attributes; 6. Compatibility issues need to be considered. Some old browsers do not support it. They can be used through feature detection and combined with JavaScript solutions.
