Live2D 看板娘

　　结构、表现和行为分离，不仅是一项技术，更主要的是一种思想，当我们拿到一个网页时，先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。，减少HTML与CSS耦合度。
　　案例一：微博对话框
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>


<style type="text/css">
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}

/*公共样式*/
body{ padding-top:50px; line-height:20px}
.userPic{padding:5px; border:1px #ccc solid}
.demo01, .demo02{ margin-bottom:20px}
p{ text-indent:2em}


/*初级*/
.demo01{width:600px; overflow:hidden}
.demo01 .left{ width:100px; float:left}
.demo01 .left .userPic{margin-left:20px}
.demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
.demo01 .right h6{ margin-bottom:5px}
.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}

/*中级*/
.demo02{width:600px; overflow:hidden}
.demo02 .userPic{float:left; margin-left:20px}
.demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
.demo02 .right h6{ margin-bottom:5px}
.demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px}

/*高级*/
.demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px}
.demo03 h6{ margin-bottom:5px}
.demo03 .dialog p{text-indent: 2em; line-height:20px}
.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}
.demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;}
</style>
</head>

<body>
<!---demo01----------------------------------->
    <div class="demo01">
        <div class="left">
            <img class="userPic" src="images/head01.jpg" width="50" height="50" />
        </div>
        
        <div class="right">
            <span class="pubTime">10分钟前</span>
            <h6>樱桃小丸子</h6>
              <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
        </div>
    </div>
    
<!---demo02----------------------------------->    
    <div class="demo02">
        <img class="userPic" src="images/head01.jpg" width="50" height="50" />
        <div class="right">
            <span class="pubTime">10分钟前</span>
            <h6>樱桃小丸子</h6>
            <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
        </div>
    </div>

<!---demo03----------------------------------->    
    <div class="demo03">
        <img class="userPic" src="images/head01.jpg" width="50" height="50" />
        <h5>樱桃小丸子</h5>
        <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
        <span class="pubTime">10分钟前</span>
    </div>
    
</body>
</html>
　　案例二：网页换肤（相同HTML，不同CSS）