仓酷云

标题: CSS教程之CSS实例教程:用position来结构页面 [打印本页]

作者: 兰色精灵 时间: 2015-1-15 23:26
标题: CSS教程之CSS实例教程:用position来结构页面
一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。
网页制造poluoluo文章简介：假如用position来结构页面，父级元素的position属性必需为relative，而定位于父级外部某个地位的元素，最好用absolute，由于它不受父级元素的padding的属性影响，固然你也能够用position，不外到时分盘算的时分不要健忘padding的值.
我们先把上节课最初总结一句话拿出来
“假如用position来结构页面，父级元素的position属性必需为relative，而定位于父级外部某个地位的元素，最好用absolute，由于它不受父级元素的padding的属性影响，固然你也能够用position，不外到时分盘算的时分不要健忘padding的值。”
假如你仍是不克不及太分明这句话，我们就做个实例，把我们第5节页面的头部blog地区用定位(position)来结构一下

HTML代码和本来的没有区分：

<divid="Logo">
<ahref="#"id="logoLink"></a>
</div>

CSS代码就有变更了，咱先看看本来的CSS代码

#Logo{
height:80px;
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif)no-repeat;
float:left;
margin-top:20px;
}

本来是用“浮动+外边距”结构的，将#logoLink定位在间隔顶部20像素，左边0像素的中央；
假如用position的办法，CSS就应当这么写，起首给#logo加上“position:relative;”，给#logoLink加上“position:absolute;”,然后让#logoLink间隔下面20像素，左边0像素，详细代码以下：

#Logo{
height:80px;
position:relative;/*绝对定位*/
}
#logoLink{
display:block;
width:173px;
height:46px;
background:url(../Images/logo.gif)no-repeat;
position:absolute;
top:20px;
left:0;
}

怎样效果和本来的一样吧，就是这么复杂.
甚么？CSS代码多了？切实其实，由本来的两句话，酿成如今的四句，可是有无发明，就靠Position我们就能够将Logo随便的定位于任何一个中央！这就是它的天真的中央！假如在页面顶部在有一行“到场保藏|设为首页|RSS定阅”以下图，你是否是也能够很便利的将它们定位于右上角呢~

可是定位(position)有一个弱点，不会自顺应外部元素的高度，以是平常我们在结构页面的时分，假如某个大概某些模块高度永久稳定，就能够用定位，可是KwooJan倡议人人结构页面的时分，仍是要以Float为主，Position为辅！如许你才干做出高质量的页面。
=========================================================================
最初，请人人记着我这句话:“结构页面，Float为主，Position为辅！”
=========================================================================
好，我们有关页面结构的教程，算是已结束。
假如能悟透每节课内容，你如今就能够拍着胸脯说“我是DIV+CSS妙手！”哈哈，不外你要晓得，DIV+CSS的叫法是不尺度的，应当叫......
甚么你想不起来了？！
咣当！~~

再说一句，在我们结构页面的时分，不免碰到一些IEBUG，这时候候就必要CSSHack(办理CSSbug的办法叫做CSSHack)，这块也挺复杂的，保举一篇文章《分歧扫瞄器CSSHack写法》，假如另有不懂多看看论坛的“『CSS扫瞄器兼容』”板块，大概baidu，google，这些常识我就不再独自来一节课讲了。

感谢人人对我的撑持！Kwoojan在这里说声“感谢”，但愿人人可以持续撑持论坛！

假如人人还必要我出甚么教程就，告知我！我会找工夫给人人详细讲讲！

2009年6月6日写：因人人激烈请求我写一篇关于扫瞄器兼容方面的课程，以是“第八课：CSSHack”，我已将这节课写出来了，人人能够接着学！

看完这节课，能够到“想进步，来实习”板块，做一些实习题，举行牢固增强</p>
大大缩减页面代码，提高页面浏览速度,缩减带宽成本;

作者: 再现理想 时间: 2015-1-17 22:39
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 简单生活 时间: 2015-1-30 20:19
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 愤怒的大鸟 时间: 2015-2-6 15:52
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 变相怪杰 时间: 2015-3-5 13:04
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 爱飞 时间: 2015-3-12 07:54
Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

作者: 山那边是海 时间: 2015-3-19 19:01
可以使用 CSS 检查工具进行设计。

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