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

In this article, the editor introduces in detail "the method of DIV+CSS site layout". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "the method of DIV+CSS site layout" can help you solve your doubts.

Horizontal list menu

Body {font-family: Verdana; font-size: 12px; line-height: 1.5;}

A {color: # 000; text-decoration: none;}

A:hover {color: # F00;}

# menu {border: 1px solid # CCC; height:26px; background: # eee;}

# menu ul {list-style: none; margin: 0px; padding: 0px;}

# menu ul li {float:left; padding: 0px 8px; height: 26px; line-height: 26px;}

Home page

Web page layout

Div+css tutorial

Div+css instance

Common code

In order to make the user experience more friendly, you can convert an into block-level elements, set a background color or background picture to make it more beautiful, and then set the style when you hold the mouse.

# menu {width:370px; margin:0 auto; border: 1px solid # CCC; height:26px; background: # eee;}

# menu ul {list-style: none; margin: 0px; padding: 0px;}

# menu ul li {float:left;}

# menu ul li a {display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}

# menu ul li a:hover {background:#333; color:#fff;}

Horizontal navigation with picture beautification

Body {font-family: Verdana; font-size: 12px; line-height: 1.5;}

A {color: # 000; text-decoration: none;}

A:hover {color: # F00;}

# menu {width:500px; height:28px; margin:0 auto; border-bottom:3px solid # E10001;}

# menu ul {list-style: none; margin: 0px; padding: 0px;}

# menu ul li {float:left; margin-left:2px;}

# menu ul li a {display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url (/ upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}

# menu ul li a:hover {background:url (/ upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}

# menu ul li a#current {background:url (/ upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

Home page

Web page layout

Web tutorial

Web instance

Common code

III. CSS Sprites technology

Body {font-family: Verdana; font-size: 12px; line-height: 1.5;}

A {color: # 000; text-decoration: none;}

A:hover {color: # F00;}

# menu {width:500px; height:28px; margin:0 auto; border-bottom:3px solid # E10001;}

# menu ul {list-style: none; margin: 0px; padding: 0px;}

# menu ul li {float:left; margin-left:2px;}

# menu ul li a {display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url (/ upload/2010-08/17/091033_nav_bg.gif) 0-28px no-repeat; font-size:14px;}

# menu ul li a:hover {background:url (/ upload/2010-08/17/091033_nav_bg.gif) 0-56px no-repeat;}

# menu ul li a#current {background:url (/ upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

Home page

Web page layout

Web tutorial

Web instance

Common code

Drop-down and multi-level pop-up menus

■ navigation menu with drop-down submenus

The difference and Application of ■ absolute Positioning and floating

■ css Adaptive width sliding door menu

Navigation menu with drop-down submenu

The html code adds the code for the secondary menu:

Home page

Web page layout

Adaptive width

Fixed width

Web tutorial

Beginners

Video tutorial

common problem

Web instance

Common code

Clear the background and floats of the secondary menu

# menu ul li ul li {float:none;}

# menu ul li ul li a {background:none;}

# menu ul li ul {border:1px solid # ccc;}

# menu ul li ul li {float:none; width:85px; background:#eee; margin:0;}

# menu ul li ul li a {background:none;}

# menu ul li ul li a:hover {background:#333; color:#fff;}

Secondary menu hiding

# menu ul li ul {display:none; border:1px solid # ccc;}

# menu ul li:hover ul {display:block;}

Second, the difference and application of absolute positioning and floating

When an element uses absolute positioning, its position is calculated based on the upper left corner of the browser or relative to the parent container (when relative positioning is used by the parent container). Absolute positioning takes the element out of the document stream and therefore does not take up space. The layout of elements in a normal document stream is the same as when an absolutely positioned element does not exist. Because absolutely positioned boxes are independent of the document flow, they can override other elements on the page.

The positioning of the floating element is based on the normal document flow, then extracted from the document stream and moved as far as possible to the left or right. The text content surrounds the floating element. When an element is extracted from the normal document stream, other elements that are still in the document stream will ignore the element and fill its original space. It only changes the display of the document stream, but does not deviate from the document stream, and with this understanding, it is easy to figure out when to use positioning and when to float.

Third, css adaptive width sliding door menu

You need to add an auxiliary label to the text, such as span, to set the background on an and span, one on the left and one on the right.

The green part is span, and then define that its background image is aligned to the right, while the left part is the background image of a, and the definition is aligned to the left. When there is a lot of text, the span will be stretched open, which realizes the button of adaptive width.

CSS form design

■ changes the style of text boxes and text fields

■ uses picture beautification button

■ changes the drop-down list style

■ uses label tags to enhance user experience

Change the style of the text box and text field

. Text1 {border:1px solid # f60; color:#03C;}

. Text2 {border:2px solid # 390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}

. Text3 {border:2px solid # C3C; height:20px; background:url (icon9.gif) right 3px no-repeat;}

. Text4 {border:2px solid # F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url (bg_9.gif) 0 0 no-repeat;}

. Select {border:1px solid # f60; background:#FF9; height:30px;}

. Tip {width:50px; border:1px solid # ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}

Please select a project:

Please select-

The road to standards

Let's see who can stop me.

Principles of efficient and clean CSS code

1. Use Reset but not global Reset * {margin:0; padding:0;}

Body, h2, h3, h4, h5, h6, h7, hr, p

Blockquote

Dl, dt, dd, ul, ol, li

Pre

Form, fieldset, legend, button, input, textarea

Th, td

Img {

Border:medium none

Margin: 0

Padding: 0

}

Body,button, input, select, textarea {

Font: 12px/1.5 'Song style', tahoma, Srial, helvetica, sans-serif;}

H2, h3, h4, h5, h6, h7 {font-size: 100%;}

Em {font-style:normal;}

Ul, ol {list-style: none;}

A {text-decoration: none; color:#333;}

A:hover {text-decoration: underline; color:#F40;}

Img {border:0px;}

Table {border-collapse: collapse; border-spacing: 0;}

two。 Good naming habits

There is no doubt that the code is messy or unnamed. Aaabb {margin:2px;color:red;}

3. Code abbreviation

Li {

Font-family:Arial, Helvetica, sans-serif

Font-size: 1.2em

Line-height: 1.4em

Padding-top:5px

Padding-bottom:10px

Padding-left:5px

}

It can be abbreviated as:

Li {

Font: 1.2em/1.4em Arial, Helvetica, sans-serif

Padding:5px 0 10px 5px

}

CSS cleanup floating mode

. Clearfix:after {

Visibility:hidden

Display:block

Font-size:0

Content: ""

Clear:both

Height:0

}

. Clearfix {

Zoom:1

}

After reading this, the article "methods of DIV+CSS website layout" has been introduced. If you want to master the knowledge points of this article, you need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.