Shulou(Shulou.com)06/02 Report--

This article mainly explains "DW how to make a simple vertical navigation," interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "DW how to make a simple vertical navigation"!

step

Open Adobe Dreamweaver CC 2015.

2. Execute the "File> New" command in the menu bar or press Ctrl+N to open the "New Document" dialog box, select its document type as HTML, click the "Create" button, that is, create a web page document.

3. Add "" between and, as shown in the following figure.

DIV elements are elements used to provide structure and context for block-level content within HTML documents. Everything between the start and end tags of the DIV is used to make up the block, with the properties of the elements contained controlled by the attributes of the DIV tag or by formatting the block using a stylesheet. DIV tags are called compartment markers. Function: Set the placement position of words, pictures, tables, etc.

id attribute: Specifies the unique id of the element, changes or adds style to the element with the specified id through CSS.

[Basic syntax] tag content

[Function Description] div element is an inclusive DIV block element. You can set the elements placed in its "tag content"(such as alignment). If you add attributes such as id and class, you can set any range of styles.

In HTML and XHTML documents, start tags and end tags cannot be omitted.

4. Add "All Commodity Classification" between and, as shown in the figure below.

[Basic Grammar] Title Text

[Syntax Description]

1. The title tag itself has a newline effect, and the title always starts with a new line;

2.# Used to specify the size of the title text,#takes an integer value of 1~6, when 1 is the largest text, when 6 is the smallest text.

5. Add "" between and, as shown in the following figure.

[Basic grammar]

....

[Syntax Description]

In HTML files, unordered lists can be inserted using pairs of tags. It has a list item tag in it.

6. Add "Books, Audio, Video, Mobile Phone Digital> Computer Office> Household Appliances" between and, as shown in the following figure.

Basic grammar]

....

....

....

....

.....

[Syntax Description]

List item tags are used to define list item sequences.

7. Add "" between and, as shown in the following figure.

[Basic grammar]

Selector1 {Style Properties: Property Value; Style Properties: Property Value;...}

Selector2 {Style Properties: Property Value; Style Properties: Property Value;...}

....

Selectors n{Style attribute: attribute value; Style attribute: attribute value;...}

[Syntax Description]

The tag is used to specify the style to be defined, and the type attribute refers to the style element defined in CSS syntax.

[Selectors 1.. Selectors n: Selectors can use HTML tag names, and all HTML tags can be used as selectors.

[Style Attribute]: mainly refers to the style attribute name related to the format display style of the selector.

Attribute Value: Sets the value of the corresponding style attribute.

8. Add "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:#ee; padding:0px 8px; height: 26px; line-height: 26px; border-bottom:1px solid #ccc;}" between and.

"As shown below.

font-family property: Specifies the font family.

font-size property: Sets the font size.

line-height property: Sets the distance between rows (line height).

border property: Specifies the width of the border around the image, that is, you can add or remove the border of the image.

Height attribute: Set height.

Background property: Sets the background color.

list-style attribute: Sets the style of the list.

Margin property: Sets the distance outside the border.

float attribute: Defines in which direction the element floats.

Padding property: Sets the distance inside the border.

#menu: corresponds to the element id menu in the page

#menu ul: corresponds to an unordered list of elements with id menu in the page.

#menu ul li: corresponds to the list items in the unordered list of elements with id menu in the page.

[Key Points]

a: Link Style of hyperlink text when unlinked.

a:visited The style of linked hyperlink text.

a: activeThe style of hyperlink text displayed when the mouse clicks the hyperlink.

a:hover The style of hyperlink text displayed when the mouse is moved over it.

a When you style within this attribute, all four attributes refer to this value.

border-bottom: width of the bottom border| Bottom Border Style| Bottom border color

[Function Description] Set the style, width and color of the lower border.

9. Save the web page file, press and hold the F12 key to preview the effect in the browser, as shown below.

At this point, I believe everyone has a deeper understanding of "DW how to make a simple vertical navigation," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.