How to use pure CSS to achieve the effect of three-column layout web pages
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!
