仓酷云

标题: 来一发CSS实例:盒模子、块状元素与内联元素、CSS挑选器 [打印本页]

作者: 透明 时间: 2015-1-15 23:26
标题: 来一发CSS实例:盒模子、块状元素与内联元素、CSS挑选器
更好的控制页面布局。不用多说。
网页制造poluoluo文章简介：CSS实例:盒模子、块状元素与内联元素、CSS选择器.
课程关头词：盒模子、块状元素与内联元素、CSS选择器

【例子】
请求：
1）宽度、高度均是200像素；
2）色彩为白色#900；

本人做做，看看能不克不及作出来？先不要看我的代码，假如真的做不出来，就下载上去，随着我上面说的一步一步修正。
上面是我的代码：例子1.rar(498Bytes)
在IE6和FF中显现效果以下图：

怎样，对照简单吧~，可是你们有无发明，白色地区离扫瞄器的顶部和右边的边距IE6和FF的纷歧样，有无发明？如许的话，我们作出来的页面扫瞄器就不兼容了，效果纷歧样了？为何会如许？
这是由于每一个扫瞄器都有一个内置的CSS文件，当你没有对某个标签的属性设置的时分，扫瞄器就会使用内置的CSS文件，怎样才干做到扫瞄器兼容？不发急，你只必要在CSS文件中，将我们今朝使用到得标签body和div置零就OK了，代码这么写

body,div{padding:0;margin:0;}

当把这句话加上以后，是否是两款扫瞄器显现效果一样了吧~以下图

好，我们接着来，如今再加一个前提

3）让白色地区与扫瞄器的顶部和右边间隔为20像素；

怎样，有无思绪？没有思绪不妨，持续向下看
我们，只必要设置白色方块的外边距就能够了，增加以下CSS代码：

margin-top:20px;
margin-left:20px;

效果以下图

如许就使白色地区定位于页面坐标(20,20)处了，与扫瞄器上边距和右边距都为20像素。
不外下面的这类写法我们能够精简为

margin:20px0020px;

个中的数值按次是：上右下左。
而margin:20px0;则和margin:20px020px0;是等价的哟~只不外是加倍精简罢了，如许写CSS加载速率会更快。

我们接着将成绩延长，如何才干让白色地区程度定位于扫瞄器的正两头，不管扫瞄器窗口的巨细，显现器分辩率的巨细。
也很复杂，方才加的两句话"margin-top:20px;margin-left:20px;"修正为

margin:0auto;

怎样，成心思吧，白色地区是否是位于扫瞄器的正两头了~

好~！到这里第一节课停止，是否是很复杂，大概太复杂了!!!KwooJan能够包管,前面的课程还是很复杂，当你看完教程，一定会说XHTML+CSS就这么复杂！easy！
假如你有看不懂的，赶忙点击文章最下面的课程关头词，只需你看了这些关头词，信任你相对能分明！

第一次写教程，不晓得人人能不克不及看懂，能不克不及承受，假如你觉着不错，就顶我吧，假如你有倡议大概设法，就间接留言，我会鄙人节课改善！</p>
当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

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

作者: 乐观 时间: 2015-1-25 19:22
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

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

作者: 金色的骷髅 时间: 2015-2-9 05:52
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 再现理想 时间: 2015-2-27 04:33
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 精灵巫婆 时间: 2015-3-8 22:35
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

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

作者: 分手快乐 时间: 2015-3-23 06:09
技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

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