SOURCE

<div id="header">   
<h1>走进力宏</h1> </div>
<div id="container">
  <div id="mainbox">
    <div id="content"> 
      <p><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3150937488,2390370345&fm=11&gp=0.jpg"></p>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
     <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
      </div>
    <div id="submainbox">  
  <p> <b>个人小资料</b></p>
  <ul>
      <li>昵称：力宏,二哥,王导</li>
      <li>自称:music-man音乐超人</li>
    <li>别称:盖世英雄,东方狮王</li>
     <li>外文名:Leehone Wang</li>
      <li>生肖:龙</li>
   <li>星座:金牛座</li>
    <li>血型:O型</li> 
    <li>唱片公司 环球唱片</li>
      <li>祖籍: 浙江义乌</li>
      <li>语言: 英语、国语、法语、日语[20]</li>
      <li>职业:歌手,导演</li>
    <li>现住地：台北</li>
     <li>喜欢的饮料:葡萄柚汁</li>
      <li>喜欢的颜色:天蓝色</li>
      <li>喜欢的活动:棒球</li>
     <li>最爱的服饰:牛仔裤</li>
      <li>喜欢的品牌:可优特,宠物色</li>
   <li>代表作品:《心跳》,《大城小爱》</li>
    <li>妻子:李靓蕾</li>
      <li>毕业院校:威廉姆斯学院[18]</li>
    <li>职业:歌手、演员、导演</li>
      <li>喜欢的品牌:可优特,宠物色</li>
    <li>代表作品:《心跳》,《大城小爱》</li>
   <li>经纪公司:宏声艺人经纪有限公司 </li>
    <li>主要成就:华语榜最佳港台男歌手</li>
      <li>粉丝口号:宏遍全球,魅力无穷</li> 
    </ul>
    </div>
    <div id="sidebox">
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
	 <br>
	 <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
  <div id="footer">这里是footer区域</div>

*{
  magin:0;
  padding:0;
}
body{
  font-family:"宋体"
    font-size:18px;
  color:#000;
}
#header{
  height:50px;
  background:#c63;
}
#container{
overflow:auto;
   
}

#mainbox{
  float:left;
  width:100%;
  background:;
  height:662px;
}
#content{
 
 height:640px;
  background:#ff0;
  margin:0 210px 0 310px;
}
#submainbox{
  float:left;
  background:#c96;
 width:300px;
  height:660px;
  margin-left:-100%;
}
#sidebox{
  float:right;
   height:660px;
  width:200px;
  margin-left:-200px;
   background-color:pink;
}
#footer{
  clear:both;
  height:40px;
   background:#3cf;
  text-align:center;
}
h1{
  text-align:center;
}