用html 和 css 怎么做这个

html{height:100%;overflow:auto;overflow-y:scroll;}
body,html,span,div,ul,ol,li,dl,dd,dt,a,p,h1,h2,h3,h4,h5,h6,table,td,tr{color:#2c2c2c;list-style-type:none;margin:0;padding:0;font-size:14px;font-family:Microsoft YaHei,SimHei,SimSun;}
img{margin-top:0;margin-bottom:0;border:0 none;}
.cn950{width:950px;margin:0 auto; text-align:center}
.clearfix {*zoom:1;}/*IE/7/6*/ 
.clearfix:after,.clearfix:before{ content:""; display:block; line-height:0; } 
.clearfix:after{ clear:both;}/*终极版清除浮动二*/
.left {float: left;}
.right {float: right;}  
.box{ width:100%;}
.logo {height: 60px; background-color:red; line-height:60px;}
.nav {height: 50px;background-color:orange; line-height:50px;}
.pic {height: 260px;background-color:yellow; line-height:260px}
.main .m_l {width: 260px;height: 260px; background-color:green; line-height:260px;}
.main .m_m {width: 430px;height: 260px;background-color:cyan; line-height:260px;}
.main .m_r {width: 260px;height: 260px;background-color:blue; line-height:260px;}
.bottom {height: 30px;background-color:#FF00FF; line-height:30px;}





    LOGO:width:950px;height:60px;