仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2305|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:CSS教程(5):经由过程实例进修CSS背景

[复制链接]
活着的死人 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:01:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
破洛洛文章简介:本CSS教程先容:1.怎样利用像从来定位背景图象,2.怎样设置流动的背景图象,3.一切背景属性在一个声明当中。
本CSS教程先容:1.怎样利用像从来定位背景图象,2.怎样设置流动的背景图象,3.一切背景属性在一个声明当中。
参考破洛洛关于CSS背景的实际常识:CSS教程(1):进修CSS背景相干常识。
1、怎样利用像从来定位背景图象

本例演示怎样利用像从来在页面上定位背景图象。
<html>
<head>
<styletype="text/css">
body
{
background-image:url(/i/eg_bg_03.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50px100px;
}
</style>
</head>
<body>
<p><b>正文:</b>为了在Mozilla中完成此效果,background-attachment属性必需设置为"fixed"。</p>
</body>
</html>
2、怎样设置流动的背景图象

本例演示怎样设置流动的背景图象。图象不会跟着页面的其他部分转动。本文由破洛洛poluoluo.com收拾公布!转载请说明出处,感谢!
<html>
<head>
<styletype="text/css">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
<p>图象不会随页面的其他部分转动。</p>
</body>
</html>
3、一切背景属性在一个声明当中

本例演示怎样利用简写属性来将一切背景属性设置在一个声明当中。
<html>
<head>
<styletype="text/css">
body
{
background:#ff0000url(/i/eg_bg_03.gif)no-repeatfixedcenter;
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>

当遇到几个选择器共享一个声明的时候,可以分组放在一起,每个选择器必须以逗号隔开。例:h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全,分组结尾不能有逗号。
若相依 该用户已被删除
沙发
发表于 2015-1-17 14:47:00 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
兰色精灵 该用户已被删除
板凳
发表于 2015-1-20 20:33:22 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
分手快乐 该用户已被删除
地板
发表于 2015-1-29 22:50:29 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
不帅 该用户已被删除
5#
发表于 2015-2-6 06:00:06 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
admin 该用户已被删除
6#
发表于 2015-2-15 17:28:46 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
飘灵儿 该用户已被删除
7#
发表于 2015-3-4 12:36:39 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
山那边是海 该用户已被删除
8#
发表于 2015-3-19 10:32:32 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
第二个灵魂 该用户已被删除
9#
发表于 2015-3-27 21:52:51 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-15 01:30

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表