03.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. a{ color:#666; text-decoration:none; line-height:25px; text-indent:24px;}
  12. .w{ width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left}/*模拟灰色阴影背景层*/
  13. .x{ width:180px; position:relative; background:#fff; border:1px solid #ccc; padding:10px; left:-4px; top:-4px;}/*内容div*/
  14. .y , .z{
  15. position: absolute;
  16. left: 141px;
  17. }
  18. .y{
  19. color: #ccc;
  20. font-size: 19px;
  21. top:-12px;
  22. z-index:1;
  23. }
  24. .z{
  25. color: #fff;
  26. font-size: 19px;
  27. top:-11px; z-index:3;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div class="w">
  33. <div class="x">
  34. <p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a></p>
  35. <span class="z">◆</span> <span class="y"></span> </div>
  36. </div>
  37. </body>
  38. </html>