当前位置:Gxlcms > css > 怎么利用纯CSS实现页面换肤?CSS实现换肤方法

怎么利用纯CSS实现页面换肤?CSS实现换肤方法

时间:2021-07-01 10:21:17 帮助过:53人阅读

本篇文章给大家带来的内容是关于怎么利用纯CSS实现页面换肤?CSS实现换肤方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信截图_20181010092658.png

1.同一类型的属性要写在同一个样式里面。
例如:background-size和background要在同一个样式里面,具体看下文代码。

2.关于伪类的使用
:after和:before,是在某个元素下新生成的元素,可以想象成是这个元素的兄弟元素。元素伪类继承这个元素的所有属性及样式,也可以单独设置样式。:after和:before伪类一定含有content属性。

3.:target伪类
:target伪类是个冷门的伪类,它必须配合锚点使用,效果是如果该锚点被选中,这个锚点渲染:target伪类定义的样式。

4.阴影的使用
无论是text-shadow还是box-shadow都可以设置多阴影,代码里面有用例。

5.z-index属性
该属性只有定位为相对定位和固定定位的元素有z-index属性,即position:relative/absolute。

HTML代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link rel="stylesheet" href="css/style.css" />
  7. </head>
  8. <body>
  9. <img class="bg bg1" id="bg1" src="img/1.jpg"/>
  10. <img class="bg bg2" id="bg2" src="img/2.jpg"/>
  11. <img class="bg bg3" id="bg3" src="img/3.jpg"/>
  12. <div class="father">
  13. <a href="#bg1">背景一</a>
  14. <a href="#bg2">背景二</a>
  15. <a href="#bg3">背景三</a>
  16. </div>
  17. </body>
  18. </html>

css代码:

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html,body{
  6. height: 100%;
  7. overflow: hidden;
  8. }
  9. img{
  10. position: absolute;
  11. height: 100%;
  12. width: 100%;
  13. }
  14. .father{
  15. position: absolute;
  16. z-index: 99;
  17. width: 550px;
  18. top: 40%;
  19. left: 50%;
  20. transform: translate(-50%,-50%);
  21. }
  22. a{
  23. cursor: pointer;
  24. position: absolute;
  25. text-align: center;
  26. text-decoration: none;
  27. width: 150px;
  28. height: 200px;
  29. float: left;
  30. margin-right: 50px;
  31. line-height: 200px;
  32. border-radius: 20px;
  33. }
  34. a:nth-child(1){
  35. background: lightblue;
  36. left: 0px;
  37. }
  38. a:nth-child(2){
  39. background: lightcoral;
  40. left: 200px;
  41. }
  42. a:nth-child(3){
  43. background: #cec;
  44. left: 400px;
  45. }
  46. a:after{
  47. content: '';
  48. width: 125px;
  49. height: 125px;
  50. border: 3px solid white;
  51. position: absolute;
  52. top: -60px;
  53. left: 9px;
  54. opacity: 0.7;
  55. border-radius: 50%;
  56. }
  57. /*background-size必须和background在同一个样式元素内设置样式*/
  58. a:nth-child(1):after{
  59. background: url(../img/1.jpg);
  60. background-size: 80%;
  61. }
  62. a:nth-child(2):after{
  63. background: url(../img/2.jpg);
  64. background-size: 80%;
  65. }
  66. a:nth-child(3):after{
  67. background: url(../img/3.jpg);
  68. background-size: 80%;
  69. }
  70. a:hover:after{
  71. opacity: 0.9;
  72. }
  73. a:hover{
  74. color: white;
  75. font-family: "微软雅黑";
  76. /*多阴影,用的不多,冷门小知识*/
  77. text-shadow: 0 0 3px blue,
  78. 0 0 9px darkturquoise,
  79. 0 0 15px lightcoral;
  80. }
  81. /*:target伪类必须配合锚点使用,效果是锚点被选中时的样式*/
  82. img:target{
  83. z-index: 30;
  84. }
  85. /*:not伪类*/
  86. img:not(:target){
  87. z-index: 0;
  88. }

最后的效果大家自己试一试吧,注意我的页面是使用图片做背景,背景图的引入链接和自己的文件结构有关,url记得改。

如果你能看到最后,再分享一个很常用的知识:
父元素里面的子元素浮动,使父元素出现高度塌陷的时候,我们一般都会给父元素添加:after伪类,设置清除浮动,附上我的万能清除法。

万能清除法

  1. 父元素:after{
  2. content: "";/*有时会用content:"."*/
  3. clear:both;
  4. display:block;
  5. height:0;
  6. overflow:hidden;
  7. visibility:hidden;
  8. }

以上就是对怎么利用纯CSS实现页面换肤?CSS实现换肤方法的全部介绍,如果您想了解更多有关CSS视频教程,请关注PHP中文网。

以上就是怎么利用纯CSS实现页面换肤?CSS实现换肤方法的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行