带来一篇经常使用DIV+CSS网页制造结构手艺技能
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。CSS结构经常使用的办法：float:none|left|right
取值：
none:默许值。工具不飘浮
left:文本流向工具的右侧
right:文本流向工具的右边
它是如何事情的，看个一行两列的例子
xhtml代码:
以下是援用片断：
<divid="wrap">
<divid="column1">这里是第一列</div>
<divid="column2">这里是第二列</div>
<divclass="clear"></div>/*这是违反web尺度企图的，只是想申明在它上面的元素必要扫除浮动*/
</div>
CSS代码:
以下是援用片断：
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}
position:static|absolute|fixed|relative
取值：
static:默许值。无特别定位，工具遵守HTML定位划定规矩
absolute:将工具从文档流中拖出，利用left，right，top，bottom等属性相对其最靠近的一个最有定位设置的父工具举行相对定位。假如不存在如许的父工具，则根据body工具。而其层叠经由过程z-index属性界说
fixed:未撑持。工具定位服从相对(absolute)体例。可是要恪守一些标准
relative:工具不成层叠，但将根据left，right，top，bottom等属性在一般文档流中偏移地位
它来完成一行两列的例子
xhtml代码:
以下是援用片断：
<divid="wrap">
<divid="column1">这里是第一列</div>
<divid="column2">这里是第二列</div>
</div>
CSS代码:
以下是援用片断：
#wrap{position:relative;/*绝对定位*/width:770px;}
#column1{position:absolute;top:0;left:0;width:300px;}
#column2{position:absolute;top:0;right:0;width:470px;}
他们的区分在哪?
明显，float是绝对定位的，会跟着扫瞄器的巨细和分辩率的变更而改动，而position就不可了，以是一样平常情形下仍是float结构！
CSS经常使用结构实例
单行一列
以下是援用片断：
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}
两行一列
以下是援用片断：
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
三行一列
以下是援用片断：
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
单行两列
以下是援用片断：
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
两行两列
以下是援用片断：
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
三行两列
以下是援用片断：
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}
单行三列
相对定位
以下是援用片断：
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
float定位
xhtml代码:
以下是援用片断：
<divid="wrap">
<divid="column">
<divid="column1">这里是第一列</div>
<divid="column2">这里是第二列</div>
<divclass="clear"></div>/*用法web尺度不倡议，可是记着上面元素必要扫除浮动*/
</div>
<divid="column3">这里是第三列</div>
<divclass="clear"></div>/*用法web尺度不倡议，可是记着上面元素必要扫除浮动*/
</div>CSS代码:
以下是援用片断：
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
float定位二
xhtml代码：
以下是援用片断：
<divid="center"class="column">
<h1>Thisisthemaincontent.</h1>
</div>
<divid="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<divid="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>CSS代码：
以下是援用片断：
body{
margin:0;
padding-left:200px;/*LCfullwidth*/
padding-right:190px;/*RCfullwidthCCpadding*/
min-width:200px;/*LCfullwidthCCpadding*/
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;/*LCwidth*/
right:200px;/*LCfullwidth*/
margin-left:-100;
}
#right{
width:190px;/*RCwidth*/
margin-right:-100;
}
<b>
</p>
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。 Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。
页:
[1]