Chinaunix首页 | 论坛 | 博客
  • 博客访问: 323494
  • 博文数量: 69
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 759
  • 用 户 组: 普通用户
  • 注册时间: 2014-09-09 14:15
个人简介

〆 人生就是拼命地奔跑,和华丽的跌倒。 つ

文章分类

全部博文(69)

文章存档

2017年(2)

2016年(16)

2015年(21)

2014年(30)

分类: Html/Css

2015-05-31 12:10:01

1.设置页面的背景颜色
源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>

  1. <title>css背景</title>


  2. <style type="text/css">
  3. body
  4. {
  5.     background-color:#9c6;
  6. }
  7. </style>
  8. </head>


  9. <body>

  10. <h1>这是css网页<h1>
  11. <p>欢迎进入</p>

  12. </body>
  13. </html>                                                                                                                      
运行结果:



2.设置不同元素的背景颜色
源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>

  2. <title>css背景</title>


  3. <style type="text/css">
  4. body
  5. {
  6.     background-color:#C9F;
  7. }
  8. h1
  9. {
  10.     background-color:#99F;
  11. }
  12. p
  13. {
  14.     background-color:#FC9;
  15. }
  16. div
  17. {
  18.     background-color:#FF9;
  19. }
  20. </style>
  21. </head>


  22. <body>
  23. <h1>这是css网页<h1>

  24. <div>
  25. 在div中

  26. <p>欢迎进入</p>

  27. 仍然在div中
  28. </div>

  29. </body>
  30. </html>
运行结果:



3.设置一个图像作为页面背景
源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4. <title>css背景</title>


  5. <style type="text/css">
  6. body
  7. {
  8.     background-image:url('哈哈.jpg');
  9. }
  10. </style>
  11. </head>


  12. <body>

  13. <p>欢迎进入</p>

  14. </body>
  15. </html>
运行结果:



4. 在水平方向重复页面图像背景
源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4. <title>无标题文档</title>
  5. </head>


  6. <style type="text/css">
  7. body
  8. {
  9.     background-image:url('蓝天.jpg');
  10.     background-repeat:repeat-x;
  11. }
  12. </style>
  13. </head>


  14. <body>

  15. <h1>欢迎进入</h1>

  16. </body>
  17. </html>
运行结果:



5.定位背景图像
源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4. <title>无标题文档</title>
  5. </head>


  6. <style type="text/css">
  7. body
  8. {
  9.     background-image:url('哈哈.jpg');
  10.     background-repeat:no-repeat;
  11.     background-position:left top;
  12.     margin-left:200px;
  13. }
  14. </style>
  15. </head>


  16. <body>

  17. <h1>欢迎进入</h1>

  18. </body>
  19. </html>
运行结果:



6.固定背景图片
源代码:

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4. <title>无标题文档</title>
  5. </head>


  6. <style type="text/css">
  7. body
  8. {
  9.     background-image:url('笑脸.jpg');
  10.     background-repeat:no-repeat;
  11.     background-attachment:fixed;
  12. }
  13. </style>
  14. </head>


  15. <body>

  16. <h1>欢迎进入</h1>
  17. <p>yyyyyyyyyyyyyyyy</p>
  18. <p>yyyyyyyyyyyyyyyy</p>
  19. <p>yyyyyyyyyyyyyyyy</p>
  20. <p>yyyyyyyyyyyyyyyy</p>
  21. <p>yyyyyyyyyyyyyyyy</p>
  22. <p>yyyyyyyyyyyyyyyy</p>
  23. <p>yyyyyyyyyyyyyyyy</p>
  24. <p>yyyyyyyyyyyyyyyy</p>
  25. <p>yyyyyyyyyyyyyyyy</p>
  26. <p>yyyyyyyyyyyyyyyy</p>
  27. <p>yyyyyyyyyyyyyyyy</p>
  28. <p>yyyyyyyyyyyyyyyy</p>
  29. <p>yyyyyyyyyyyyyyyy</p>
  30. <p>yyyyyyyyyyyyyyyy</p>
  31. <p>yyyyyyyyyyyyyyyy</p>
  32. <p>yyyyyyyyyyyyyyyy</p>
  33. <p>yyyyyyyyyyyyyyyy</p>
  34. <p>yyyyyyyyyyyyyyyy</p>
  35. <p>yyyyyyyyyyyyyyyy</p>
  36. <p>yyyyyyyyyyyyyyyy</p>
  37. <p>yyyyyyyyyyyyyyyy</p>
  38. <p>yyyyyyyyyyyyyyyy</p>
  39. <p>yyyyyyyyyyyyyyyy</p>

  40. </body>
  41. </html>
运行结果:


阅读(1793) | 评论(0) | 转发(0) |
0

上一篇:HTML--申请表

下一篇:MY-SQL数据库--初入门

给主人留下些什么吧!~~