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

This article mainly introduces how to use pure CSS to achieve the effect of three-column layout web pages, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The code is as follows:

A commonly used web page with pure CSS layout

* {

Font-size:12px

Font-family:verdana

Margin:0px

Padding:0px

}

A {

Text-decoration:none

}

# header,#footer {

Width:85%

Margin:0 auto

Height:50px

}

# header {

Height:70px

Margin-top:5px

Border:solid 1px # 000

Background:url () no-repeat right-20px

}

# header h2 {

Line-height:40px

}

# body {

Position:relative

Width:85%

Margin:3px auto

Height:100%

Word-wrop:break-word

Word-break:break-all

}

# sidebar {

Position:absolute

Left:0

Top:0

Width:200px

}

# right {

Width:240px

Position:absolute

Right:0

Top:0

}

# center {

Margin:0 241px 0 201px

}

# body,#sidebar,#right,#center,#footer {height:750px;border:solid 1px # 000;}

# footer {

Height:50px

}

# body {

Border:none

}

# nav ul {

Float:left

Width:600px

List-style-type:none

Border-bottom:solid 6px # 6666CC

}

# nav ul li {

Float:left

}

# nav li a {

Display:block

Text-decoration:none

Text-align:center

Width:50px

Padding:5px

}

# nav li a:hover {

Background:#66c

Color:#fff

Font-weight:bold

}

Dt {

Border-bottom:dotted 1px # 000066

Border-top:dotted 1px # 006

}

Dt.first {

Border-top:none

}

Dt {

Padding:8px 0px 8px 4px

}

Dd a {

Display:block

Text-indent:20px

Padding:10px

}

Dd a:hover {

Font-weight:bold

Color:#000

Background:#66FFCC

}

Title

HOME

ASP

PHP

JSP

ASP.NET

VB

VC

DELPHI

AJAX

SOFT

classification

Link

Link

Link

Link

Link

Link

Link

Link

Link

Link

Link

Dt

Link

Link

Link

Link

Link

Center

Right

Footer

Thank you for reading this article carefully. I hope the article "how to use pure CSS to achieve the effect of three-column layout web pages" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you 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.