index.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. a {
  2. color: #333333;
  3. }
  4. /* 固定宽度居中 */
  5. .container {
  6. width: 84%;
  7. margin: 0 auto;
  8. }
  9. /* 页头 */
  10. header {
  11. height: 60px;
  12. background: linear-gradient(to right, red, orange);
  13. font-size: 1.2em;
  14. }
  15. .headBar {
  16. display: flex;
  17. align-items: center;
  18. }
  19. /* logo */
  20. .logo {
  21. width: 145px;
  22. height: 45px;
  23. background: url(../image/logo.jpg) no-repeat center;
  24. background-size: cover;
  25. }
  26. /*导航栏*/
  27. nav {
  28. width: 600px;
  29. }
  30. .navItem {
  31. display: inline-block;
  32. line-height: 60px;
  33. padding: 0 20px;
  34. color: #ffffff;
  35. }
  36. /* 当前选中的导航栏 */
  37. .navItem.active {
  38. background: #555555;
  39. font-weight: 700;
  40. }
  41. /*搜索框*/
  42. .search-wrap input {
  43. border: O;
  44. width: 15rem;
  45. line-height: 1.75rem;
  46. outline-style: none;
  47. padding-left: 0.625rem;
  48. border-radius: 5px;
  49. }
  50. .search-wrap button {
  51. width: 3.125rem;
  52. height: 1.75rem;
  53. border: 0;
  54. background-color: #555555;
  55. color: #ffffff;
  56. border-radius: 5px;
  57. }
  58. /* 网站介绍 */
  59. .fiction-text {
  60. column-count: 2; /* 文本划分成2列 */
  61. column-gap: 40px; /* 指定的列之间的差距 */
  62. column-rule-style: solid;
  63. column-rule-width: 1px;
  64. padding: 0 70px;
  65. margin-top: 40px;
  66. }
  67. /*介绍标题*/
  68. .fiction-text h1 {
  69. column-span: all;
  70. text-align: center;
  71. margin-bottom: 20px;
  72. }
  73. /* iframe区域 */
  74. .iframeWrap {
  75. width: 100%;
  76. overflow: hidden;
  77. }
  78. iframe {
  79. width: 103%;
  80. height: 450px;
  81. }
  82. /*分页*/
  83. .pageWrap {
  84. overflow: hidden;
  85. }
  86. .pageItem {
  87. width: 100px;
  88. height: 20px;
  89. margin-right: 20px;
  90. }
  91. ul.page {
  92. margin: 20px 0;
  93. float: right;
  94. }
  95. ul.page li {
  96. display: inline;
  97. }
  98. ul.page li a {
  99. padding: 8px 16px;
  100. border: 1px solid #cccccc;
  101. }
  102. /*未访问的超链接*/
  103. ul.page li a:link {
  104. color: #333333;
  105. }
  106. /*已访问的超链接去*/
  107. ul.page li a:visited {
  108. color: #333333;
  109. }
  110. /*当鼠标悬停在超链接上时*/
  111. ul.page li a:hover {
  112. color: #FB6638;
  113. }
  114. /*被选择的超链接*/
  115. ul.page li a:active {
  116. color: #FB6638;
  117. }
  118. /*页脚*/
  119. footer {
  120. width: 100%;
  121. height: 50px;
  122. line-height: 50px;
  123. text-align: center;
  124. background-color: #E9E9E9;
  125. }
  126. footer a {
  127. margin: 0 20px;
  128. }