一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

时间：2024-08-05 16:07:14

　　结构、表现和行为分离，不仅是一项技术，更主要的是一种思想，当我们拿到一个网页时，先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写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="data: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="data: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="data: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）

相关文章