html复习八--CSS3学习3----举例

CSS3学习3----举例               

1.浏览器支持的四种状态：

①：link → 未访问的 链接 。

②：visited → 已访问的 链接 。

③：hover → 鼠标正停在上面的 链接 。

④：active → 正在点击的链接

 

eg>

 

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  4. <title>link-visited-hover-active</title>
  5. <styletype="text/css">
  6. .button{
  7. background-image:url(1.png);
  8. background-repeat:no-repeat;
  9. width:122px;
  10. height:42px;
  11. display:block;
  12. line-height:42px; /*★此两行保证文字绝对居中！*/
  13. text-align:center; /*★此两行保证文字绝对居中！*/
  14. text-decoration:none;
  15. }
  16. .button:hover{
  17. background-image:url(2.png);
  18. /*background:#fff; 发现这个起作用了！上面一行不起作用了！！*/
  19. }
  20. .mail:link{
  21. background-image:url(mail.png);
  22. background-repeat:no-repeat;
  23. padding-left:25px; /*根据图片的大小来设定*/
  24. text-decoration:none; /*去掉下划线*/
  25. }
  26. .mail:visited{
  27. background-image:url(yes.png);
  28. }
  29. a:hover{
  30. background:#cacaca;
  31. /*我们上面给.button设置了背景图片，现在又对a标签设置了背景色。
  32. 发现背景图片起作用了！注：给一个标签同时设置背景色和图片，图片在前。*/
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <aclass="button"href="http://google.com.hk">google</a>
  38. <aclass="mail"href="http://baidu.com">baidu</a>
  39. </body>
  40. </html>

2.鼠标经过时添加下划线：

a:hover{

      color:#ccc;

      text-decoration:underline;

}

3.网站垂直导航栏的创建：（也许对你有用）

 

源码：

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  4. <title>link-visited-hover-active</title>
  5. <styletype="text/css">
  6. ul{
  7. paddint-left:0px; /*完全居左*/
  8. list-style-type:none; /*去掉项目符号*/
  9. }
  10. ul li{
  11. height:30px;
  12. width:200px;
  13. border:1px dashed #ccc;
  14. border-bottom:none; /*让中间的分界线不易*/
  15. line-height:30px; /*使文字完全居中*/
  16. text-align:center; /*使文字完全居中*/
  17. }
  18. ul li a{
  19. text-decoration:none; /*去掉下划线*/
  20. height:30px;
  21. width:200px;
  22. display:block;
  23. }
  24. ul li a:hover{
  25. background:#ccc;
  26. }
  27. .last{
  28. border-bottom:1px dashed #ccc;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <ul>
  34. <li><ahref="#">Link1</a></li>
  35. <li><ahref="#">Link2</a></li>
  36. <li><ahref="#">Link3</a></li>
  37. <liclass="last"><ahref="#">Link4</a></li>
  38. </ul>
  39. </body>
  40. </html>

4.网站水平导航栏的创建：（也许对你有用）

 

源码：

 

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  4. <title>link-visited-hover-active</title>
  5. <styletype="text/css">
  6. ul{
  7. paddint-left:0px; /*完全居左*/
  8. list-style-type:none; /*去掉项目符号*/
  9. }
  10. ul li{
  11. height:30px;
  12. width:200px;
  13. border:1px dashed #ccc;
  15. /*border-bottom:none; 让中间的分界线不易*/
  16. border-right:none;/*change*/
  17. float:left; /*change*/
  19. line-height:30px; /*使文字完全居中*/
  20. text-align:center; /*使文字完全居中*/
  21. }
  22. ul li a{
  23. text-decoration:none; /*去掉下划线*/
  24. height:30px;
  25. width:200px;
  26. display:block;
  27. }
  28. ul li a:hover{
  29. background:#ccc;
  30. }
  31. .last{
  32. /*border-bottom:1px dashed #ccc;*/
  33. border-right:1px dashed #ccc; /*change*/
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <ul>
  39. <li><ahref="#">Link1</a></li>
  40. <li><ahref="#">Link2</a></li>
  41. <li><ahref="#">Link3</a></li>
  42. <liclass="last"><ahref="#">Link4</a></li>
  43. </ul>
  44. </body>
  45. </html>

 

5.当鼠标放上去可以变成“手”：★

cursor:pointer;

 

6.网页的布局：★★★（也许对你有用）

如下面的网页布局：

 

html代码为：

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  5. <title></title>
  6. <styletype="text/css">
  7. body{
  8. margin:0px;
  9. padding:0px;
  10. }
  11. #top{
  12. width:960px;
  13. height:100px;
  14. background:#cc0000;
  15. margin-left:auto; /*网页完全居中*/
  16. margin-right:auto; /*网页完全居中*/
  17. }
  18. #contains{
  19. width:960px;
  20. height:900px;
  21. background:#4096ee;
  22. margin-left:auto; /*网页完全居中*/
  23. margin-right:auto; /*网页完全居中*/
  25. }
  26. #left{
  27. width:120px;
  28. height:900px;
  29. background:#c79810;
  30. float:left; /*左浮动*/
  31. }
  32. #right{
  33. width:830px;
  34. height:900px;
  35. background:#ff7400;
  36. float:right; /*右浮动*/
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <divid="top"></div>
  42. <divid="contains">
  43. <divid="left"></div>
  44. <divid="right"></div>
  45. </div>
  46. </body>
  47. </html>

7.圆角的产生的属性：(根据需要改变属性值)

eg.

border-radius:5px 5px 5px 5px;

 

8.光感产生属性：(根据需要改变属性值)

eg.

box-shadow:0 5px 5px #06c;

或 box-shadow:0 5px 5px rgba(0,0,0,0.15);

 

9.浮动（float）的学习：

注意：不参与浮动，清除浮动带来的影响用：clear:both;

 

eg.不清除浮动时，

 

清除浮动后：

 

代码：

 

  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  4. <title>float</title>
  5. <styletype="text/css">
  6. body{
  7. margin:0px;
  8. padding:0px;
  9. }
  10. div{
  11. width:300px;
  12. height:300px;
  13. }
  14. .div1{
  15. background:#ff7400;
  16. float:left;
  17. }
  18. .div2{
  19. background:#008c00;
  20. float:left;
  21. }
  22. .div3{
  23. width:800px;
  24. background:#356a00;
  25. clear:both;/*★不参与浮动！清除浮动带来的影响！*/
  26. /*说明：★div1,div2,div3不在一个容器里，也会发生分层。
  27. 当不清除浮动时，div3的一部分被覆盖！！*/
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <divclass="div1">div1</div>
  33. <divclass="div2">div2</div>
  34. <divclass="div3">div3</div>
  35. </body>
  36. </html>

10.相对定位和绝对定位

注意：绝对定位和相对定位经常是一起使用的！！

eg.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  5. <title>相对定位和绝对定位</title>
  6. <styletype="text/css">
  7. body{
  8. margin:0px;
  9. padding:0px;
  10. }
  11. .div1{
  12. width:960px;
  13. height:300px;
  14. position:relative; /*★相对定位*/
  15. margin-left:auto;
  16. margin-right:auto;
  17. background:#ff2000;
  18. }
  19. .div2{
  20. width:50px;
  21. height:50px;
  22. background:#008c00;
  23. position:absolute; /*绝对定位*/
  24. right:0px; /*绝对定位的位置*/
  25. top:0px; /*绝对定位的位置设置*/
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <divclass="div1">
  31. <divclass="div2"></div>
  32. </div>
  33. </body>
  34. </html>

效果：

 

 

《2》。对于绝对定位：对于上面的浮动的div1,div2,div3，我们还可以通过绝对定位对其进行设置。如：

.div1{

width:300px;

height:300px;

background:#ff7400;

position:absolute;

top:20px; /*距离上面的距离*/

left:90px; /*距离左边的距离；还有的属性：top,bottom,right,left*/

z-index:99; /*数值越大，越靠上；；它是控制几个层之间的层次关系！！*/

}

 

11.固定定位：（在有些网页中，我们常看到网页的左右两边有浮动广告，无论我们怎么上下拉升网页，广告就在网页的中间位置！！）

 

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=GBK"/>
  5. <title></title>
  6. <styletype="text/css">
  7. body{
  8. margin:0px;
  9. padding:0px;
  10. height:1000px;
  11. }
  12. #div2{
  13. background:#fe8400;
  14. position:fixed; /*固定*/
  15. right:10px;
  16. top:350px;
  17. width:150px;
  18. height:100px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <divid="div2">
  25. 我是广告！固定在网页左右的固定广告！
  26. 你想去掉我吗？？？？？？
  27. </div>
  29. </body>
  30. </html>

 

 

 

 

 

 

 

 

本文出自 “我的JAVA世界” 博客，请务必保留此出处http://hanchaohan.blog.51cto.com/2996417/928839

posted @ 2012-08-19 17:49  小薇林  阅读(188)  评论(0)  编辑  收藏  举报