来一发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;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
页:
[1]