先展示效果图：
为了看全景，截图有点挫。实际效果比这个好一点。
通过 text-overflow可以隐藏多出的文字，而不会吧把div撑开或者溢出。
html代码：
<!DOCTYPE html> <html> <head> <title>3.6practace</title> <link rel="stylesheet" type="text/css" href="3.6.css"> </head> <body> <div id="box"> <div id="top"> <div id="top-1"> <img src="./images/3403.png"> </div> <div id="top-2"> 登錄 </div> </div> <div id="top2"> <ul> <li>主頁</li> <li>公司简介</li> <li>投资组合</li> <li>联系我们</li> <li>社区论坛</li> <li>成功案例</li> <li>相关</li> </ul> </div> <div id="main"> <img src="./images/3405.jpg" alt="主页图片"> <div id="main-1"> <img src="./images/3408.png" alt="" id="main-1-img1" onmouseover="this.src='./images/3407.png'" onmouseout="this.src='./images/3408.png'"> <img src="./images/3409.png" alt="" id="main-1-img2"> <img src="./images/3411.png" alt="" id="main-1-img3"> <img src="./images/3410.png" alt="" id="main-1-img4"> <img src="./images/3412.png" alt="" id="main-1-img5"> </div> </div> <div id="main2"> <div id="main2-left" class="font01"> 网站类型套餐参考 <div class="text" id="text1">这里随便写点东西这里随便写点东西这里随便写点东西</div> <div class="text" id="text2">这里随便写点东西这里随便写点东西这里随便写点东西</div> <div class="text" id="text3">这里随便写点东西这里随便写点东西这里随便写点东西</div> </div> <div id="main2-1" class="main"></div> <div id="main2-2" class="main"> <h2>标题1</h2> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> <h2>标题2</h2> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> <h2>标题3</h2> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> </div> </div> </div> <div id="bottom"> <p> </p> <p>天空设计工作室没有什么我们不能做<br /> 业务专用邮箱：Sky@china-ncw.com 联系电话：010-89888888 010-00000000 <br /> Copyright © 2009 sky-ncw.com. All Right Reserved V2.0 </p> </div> </body> </html>