weui布局一个html的ul列表,CSS使用ul进行网页的多列布局

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

使用UL进行多列布局

* {margin:0; padding:0;}

body {

width:100%;

height:100%;

background:#ddedfb;

}

#mainContent {

width:600px;

margin:10px auto;

}

#header,#footer {

background:#8AC7FA;

height:80px;

clear:both;

}

#footer {

clear:both;

padding-top:10px;

}

#content {

height:300px;

margin:10px auto;

}

#content ul {

list-style:none;

height:100%;

}

#content ul li {

width:150px;

height:100%;

background:#8AC7FA;

float:left;

}

#content ul li#li2 {

width:280px;

margin:0 10px;

}

#content ul li#li2 ul li {

width:270px;

height:140px;

margin:5px;

background:#0581F0;

}

这是头部

• 这是左边
• • 这是中间的上部
  • 这是中间的下部
• 这是右边

这是底部