蓝色理想 - CSS 实用实例

　CSS 实用实例

CSS 实用实例 [2]
CSS 实用实例 [3]
CSS 实用实例 [4]
CSS 实用实例 [5]
CSS 实用实例 [6]
CSS 实用实例 [7]
CSS 实用实例 [8]
CSS 实用实例 [9]

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 全部选择提示：你可先修改部分代码，再按运行]

出处：网络维他命
责任编辑：moby

◎进入论坛网站综合、网页制作版块参加讨论

相关文章

作者文章

设计上的精挑细选会削弱网站
浏览器发展/CSS布局/怎样运用?

站点最新

站点最新列表

redrocker 图标设计

用Photoshop打造金属管简明教程

《闪魂—FLASH8网站建设实录》

设计师笔下的美丽新"脚色"

Contnew Checker系统检查工具

来自世界各国的奇特雕塑

70～80年代童年十大经典玩耍游戏

学习As2.0与AS3.0的尴尬

350D+套头杂拍

SMIA 荐员06大阪亚洲文化节

栏目最新

栏目最新列表

用Photoshop打造金属管简明教程

学习As2.0与AS3.0的尴尬

25种方式给网站添加优质内容

实用在线工具集

CSS 实用实例

AJAX应用之注册用户即时检测

[FLASH]爽快使用XML

百分百弹窗

web标准布局实例教程

浮雕效果另类photoshop玩法