CSS 实用实例

来源：网络维他命作者：Linyupark 出处：巧巧读书 2008-02-11 进入讨论组

关键词：
groove
perl
word
html
asp

Background 背景

设置背景颜色

运行代码框
<html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> This is a paragraph </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

设置一张图片做为背景

运行代码框
<html> <head> <style type="text/css"> body { background-image: url('/articleimg/2006/07/3744/bgdesert.jpg') } </style> </head> <body> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

垂直重复背景图片

运行代码框
<html> <head> <style type="text/css"> body { background-image: url('/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style> </head> <body> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

水平重复背景图片

运行代码框
<html> <head> <style type="text/css"> body { background-image: url('/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x } </style> </head> <body> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

怎样放置背景图片（位置摆放）

运行代码框
<html> <head> <style type="text/css"> body { background-image: url('/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-position: center; } </style> </head> <body> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

固定背景图片（不会滚动）

运行代码框
<html> <head> <style type="text/css"> body { background-image: url('/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

背景属性一行解决（用一行文字定义背景属性）

运行代码框
<html> <head> <style type="text/css"> body { background: #00ff00 url('/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; } </style> </head> <body> This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text This is some text </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文字：http://www.qqread.com/css/p396806.html进入讨论组讨论。

【深度阅读】相关文章

下一页 1 2 3 4 5 6 7 8 9

【收藏此文】【大中小】【打印】【关闭】

较早的文章：CSS 菜单举一反三

较新的文章：CSS+JS构建的图片查看器

CSS 实用实例

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

CSS 实用实例

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月 境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

阳春三月境内境外赏花忙