学习完成CSS布局(左右浮动)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>学习完成布局</title> <style type="text/css"> #kaishi{ width: 980px; /* width宽度*/ background: gray; } #header{ height: 200px; /*height高度*/ background: red; } #main{ height: 600px; background: chartreuse; } #lside{ width: 700px; float: left; /*浮动左*/ height: 600px; background: blue; } #rside{ width: 300px; float: right; /*浮动右*/ height: 600px; background: coral; } #footer{ height: 100px; background: darkgoldenrod; } </style> </head> <body> <div id="kaishi"> <div id="header"></div> <div id="main"> <div id="lside"></div> <div id="rside "></div> </div> <div id="footer"></div> </div> </body> </html>
一个小菜鸟的笔记!