** 1.结构与表现相关内容简介**
网页制作中 结构（HTML)、表现(CSS)、行为分离(JavaScript)
原则：先不管样式（CSS),重点放在HTML的结构和语义化上
拿到一个网页设计图的时候，首先关注网页的文字内容以及内容模块间的关系。
把重点放在编写语义化的html代码上，而不要过多考虑设计图上的样式，
等到html按内容编写完成之后，再考虑样式的实现。
在不改变现有结构的基础上，完成设计图要求的视觉效果.
利用margin属性来移动设置html结构.
想考虑内容完整性，在考虑样式，在视觉上达到目的要求后，在进行修正
抛开样式，先写结构，实现结构与样式分离
- 初级的人员思路及制作方法：div层层嵌套。
- 中级的人员思路及制作方法：去掉多余的div，进行简化。
- 高级的人员思路及制作方法：简化结构，并在现有结构基础上，只通过样式去改变它的布局，就完成了一个视觉效果。
步骤：
先按结构和语义编写代码
然后进行css样式设置
减少HTML与CSS契合度
margin-left：100px表示块元素的左侧外边距是100px，即与其左侧相邻块元素的间距增加100px,直接表现就是向右移动100px；加负号后表示与其左侧相邻块元素的间距减小100px，直接表现就是向左移动100px.
总结：
核心思想：结构和表现分离。
示例：
微博用户发言信息列表制作：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></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">
[站外图片上传中……(4)]
</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">
[站外图片上传中……(5)]
<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">
[站外图片上传中……(6)]
<h5>樱桃小丸子</h5>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
<span class="pubTime">10分钟前</span>
</div>
</body>
</html>
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-size: 12px;
font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";
}
h1{font-size: 24px;}
h2{font-size: 20px;}
h3{font-size: 18px;}
h4{font-size: 16px;}
h5{font-size: 14px;}
h6{font-size: 12px;}
img{vertical-align: middle; border:none 0}
a{cursor: pointer;text-decoration: none}
/*表&表单*/
table{border-collapse:collapse; border-spacing:0; border:0}
input,select{vertical-align: middle}
textarea{resize:none}
label {vertical-align: middle}
input:focus , textarea:focus {outline: none}
.text{height:20px;vertical-align: middle; border: 1px solid #CCC}
.radio{ vertical-align:-3px;*vertical-align:-1px;border:none 0; border-top-width: 0px}
.btn {border:none 0;text-align:center;vertical-align: middle}
/*文字排版*/
.fb{font-weight:bold}
.fn{font-weight:normal}
.unl{text-decoration:underline;}
.no_unl{text-decoration:none;}
.strong{font-weight:bold}
/*定位*/
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.tb {font-weight: bold;}
.tn {font-weight: normal;}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
* html .clearfix{height:1%}
.vm{vertical-align:middle}
.pr {position: relative;}
.pa {position: absolute;}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
.w{width:100%}
.h{height:100%}
.mc {margin:0px auto;}
.back {
height: 18px;
width: 120px;
position: absolute;
top: 0px;
right: 30px;
background-image: url(../../../images/backbg.png);
text-align: center;
color: #FFF;
}
.back:hover{ color:#069}
实际效果如下：
2.网页换肤
相同的HTML,不同的CSS
在网页制作中，面对设计图，网页制作人员一般要遵循的原则是:先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。
网友评论