仓酷云

标题: CSS教程之CSS基本教程:CSS网页结构Page Layout [打印本页]

作者: 小女巫 时间: 2015-1-16 00:16
标题: CSS教程之CSS基本教程:CSS网页结构Page Layout
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
利用CSS结构十分复杂，假如你习气利用tables结构，大概入手下手时有点坚苦，但实在很简单，现实上只是看法的分歧。
　　你必要把网页的每一个部分当作自力的块，你能够相对或绝对定位块。

Positioning定位

　　positon属性能够指定元素为absolute,relative,static或是fixed。
　　static是元素默许属性，按HTML呈现的前后按次。
　　relative对照像static，但元素可使用top,right,bottom和left设定初始属性。
　　absolute把元素从HTML内里拉出，统统由它本人决意，在这里，相对定位元素可使用top,right,bottom,left定位在任何中央。
　　fixed举动像absolute，但它相对定位的元素参照扫瞄器窗口与网页没有干系。以是，实际上，fixed元素能够流动在屏幕受骗页面转动时。为何说是实际上的？由于IE7以下的扫瞄器不撑持。

　　利用相对定位结构
　　可使用相对定位创立传统的两列结构，以下：

<divid="navigation">
<ul>
<li><ahref="this.html">This</a></li>

<li><ahref="that.html">That</a></li>
<li><ahref="theOther.html">TheOther</a></li>
</ul>

</div>
<divid="content">
<h1>Rarabanjobanjo</h1>
<p>WelcometotheRarabanjobanjopage.Rarabanjobanjo.Rarabanjobanjo.Rarabanjobanjo.</p>
<p>(Rarabanjobanjo)</p>

</div>
　　下面加上CSS：

#navigation{
position:absolute;
top:0;
left:0;

width:10em;
}
#content{
margin-left:10em;
}
　　下面导航条设定在右边，宽度是10em。由于导航条是相对定位，以是活动的页面上甚么也不动，必要设定内容的右边margin即是导航条的宽度。

　　真是复杂。你没无限制这两列的间隔，利用伶俐的结构，你能够为所欲为布置很多块。假如你想增加第三列，好比：

#navigation{
position:absolute;
top:0;
left:0;
width:10em;
}
#navigation2{
position:absolute;
top:0;
right:0;
width:10em;
}
#content{
margin:010em;/*settingtopandbottommarginto0andrightandleftmarginto10em*/
}
　　最初阶段往相对定位元素，由于它们自力存在，没法准确懂得它们那里停止。假如你利用下面的例子，一切的页面有小的导航条和年夜的内容地区到能够，可是，出格是宽度和巨细利用绝对值，你必需常常保持定位的但愿，好比位于元素最上面的底部结构。假如你想定位底部，接纳浮动形式比相对定位好。

Floating浮动

　　浮动元素能够在一条线上挪动。
　　浮动一样平常利用在定位页面里的小型元素，但也可以使用在年夜块里，好比导航。
　　下面的HTML例子利用上面CSS：

#navigation{
float:left;
width:10em;
}
#navigation2{
float:right;
width:10em;
}
#content{
margin:010em;
}
　　假如你不但愿接上去的元素包抄浮动工具，可使用clear属性。clear:left扫除浮动在右边的元素，clear:right扫除浮动在右侧的元素，clear:both扫除一切。假如你想增加底部footer，能够像上面：

#footer{
clear:both;
}
　　footer将在一切列上面，不论它们的长度怎样。
　　这篇先容了定位和浮动的基础情形，夸大页面的年夜块，但记着，下面办法能够使用到块内里的任何元素。经由过程组合利用position,floating,margins,padding和border，你能够体现出任何网页计划，table结构能做的CSS没有甚么不克不及做。
　　利用表格结构的来由就是思索陈旧的扫瞄器。CSS的上风在于具有很高的可用性，并且体积上只要利用table结构的部分巨细。

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

作者: 再现理想 时间: 2015-1-18 05:49
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 飘灵儿 时间: 2015-1-25 11:01
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 分手快乐 时间: 2015-2-2 21:56
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 山那边是海 时间: 2015-2-8 08:56
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 小女巫 时间: 2015-3-7 19:58
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 爱飞 时间: 2015-3-15 13:46
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 海妖 时间: 2015-3-22 01:36
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

欢迎光临仓酷云 (http://ckuyun.com/)