包罗万象的单链接h2行动号召(带性感悬停过渡)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了包罗万象的单链接h2行动号召(带性感悬停过渡)相关的知识,希望对你有一定的参考价值。

  1. CSS
  2.  
  3. #callToActions {
  4. float: left;
  5. padding: 0 10px 0 0;
  6. width: 146px;
  7. }
  8. #callToActions h2 {
  9. background: #FD57A9;
  10. border-radius: 3px;
  11. -moz-border-radius: 3px;
  12. -webkit-border-radius: 3px;
  13. font-size: 1em;
  14. font-weight: normal;
  15. margin: 0 0 5px 0;
  16. min-height: 130px;
  17. padding: 0;
  18. text-transform: none;
  19.  
  20. }
  21. #callToActions a {
  22. color: #fff;
  23. display: block;
  24. padding: 10px;
  25. }
  26. #callToActions h2 a:hover {
  27. background: rgba(0, 0, 0, 0.2);
  28. transition: all .3s linear;
  29. -webkit-transition: all .3s linear;
  30. -moz-transition: all .3s linear;
  31. }
  32. #callToActions h2 img {
  33. height:65px;
  34. margin: -10px 0 0 -10px;
  35. width: 146px;
  36. }
  37. #callToActions h2 strong {
  38. display: block;
  39. font-size: 1.4em;
  40. margin: 8px 0 4px 0;
  41. text-transform: uppercase;
  42. }
  43. #callToActions h2 span {
  44. text-transform: none;
  45. }
  46. #callToActions #callYour {
  47. background:#B8D439;
  48. }
  49. #callToActions #callTalking {
  50. background:#6CBCD0;
  51. }
  52.  
  53. CSS (ie6)
  54. #callToActions h2 {
  55. padding-top: 58px; /* this needs to be the same height as the image */
  56. position: relative;
  57. }
  58. #callToActions h2 img {
  59. margin: 0 !important;
  60. top: 0;
  61. left: -0px;
  62. position: absolute;
  63. }
  64.  
  65.  
  66.  
  67. <div id="callToActions">
  68. <h2 id="callWhere">
  69. <a href="">
  70. <img src="/images/b-where-do-we-work.jpg" width="156" height="65" alt="" />
  71. <strong>Where do we work</strong>
  72. blah blah blah. <span class="readMore">more&hellip;</span>
  73. </a>
  74. </h2>
  75. <h2 id="callYour">
  76. <a href="">
  77. <img src="/images/b-your-project.jpg" width="156" height="65" alt="" />
  78. <strong>Your Project</strong>
  79. It started with ink, but it hasn't stopped there. <span class="readMore">more&hellip;</span>
  80. </a>
  81. </h2>
  82. </div>

以上是关于包罗万象的单链接h2行动号召(带性感悬停过渡)的主要内容,如果未能解决你的问题,请参考以下文章

Alexa - 包罗万象

如何在 Ruby on Rails 中创建一个包罗万象的路由?

基本算法——包罗万象

ASP.Net Core razor 页面处理程序成为包罗万象的路线

如何在生产模式下安全地使用“包罗万象”?

在 PHP 中创建一个包罗万象的处理程序?