CSS实用实例_网页制作教程

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页制作 >> CSS实用实例	打印友好页面

CSS实用实例

作者：Linyupark 出处：网络维他命

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('images/bgdesert.jpg') } </style> </head> <body> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

垂直重复背景图片

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

水平重复背景图片

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

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

运行代码框
<html> <head> <style type="text/css"> body { background-image: url('images/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('images/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('images/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 全部选择提示：你可先修改部分代码，再按运行]

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

上一篇：25种方式给网站添加优质内容

返回列表

下一篇：web标准布局实例教程