1.一般制作文字環繞圖檔效果。
html結構：
view code
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css制作圖檔環繞效果</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="parent_panel">
<div id="image_panel">
<img src="images/logo_cn.png" alt="google logo"/>
</div>
<div id="text_panel">
<ul>
<li>c#語言是一門優秀的面向對象語言</li>
</ul>
</body>
</html>
css樣式：
#container
{
border:1px solid green;
width:600px;
/*頁面水準居中顯示*/
margin:0 auto;
}
#image_panel
float:left;
原始效果：
雖然達到了文字環繞圖檔效果，但是<li>呈現的清單項的形狀在圖檔上面，不是和文字緊貼在一起。達不到我們預期的效果。
2.當文字中含有<ul>和<li>标簽時，我們通過向<ul>和<li>标簽添加css樣式，list-style-position:inside;這樣清單項前面的編号就和文字在一起，而不會出現在圖檔裡面，影響設計效果。
在css檔案中添加如下2句話：
#text_panel ul
list-style-position:inside;
#text_panel li
修改後的效果：