咨询个css的问题

Ruclinux

  传送门：https://www.hostloc.com/thread-678808-1-1.html

我在修改wordpress模板的时候，经@流河旱树 的指点，解决了图片圆圈显示的问题，但不知道我动了哪里了还是修改各个参数影响了默认的代码，现在有一个新的问题，在刷新的时候 滑动显示幻灯滚动那里总是会位置错位。我修改的是 style.css 这个文件。



gif录屏文件：链接: https://pan.baidu.com/s/1jgjpvJa5UbOe1QyIzXq1hg 提取码: i8up

请各位大佬们指点一下，谢谢了。

Ruclinux

博客地址是我签名第二个，麻烦大家指点，谢谢了

MoeWang

大佬来了，虽然不会但是过来暖暖帖

Ruclinux

MoeWang 发表于 2020-4-23 09:22
大佬来了，虽然不会但是过来暖暖帖

谢谢帮顶

yumijie

大佬你用什么软件录的gif文件啊,能介绍下吗?说下文件名或者下载地址,谢谢

Ruclinux

yumijie 发表于 2020-4-23 09:53
大佬你用什么软件录的gif文件啊,能介绍下吗?说下文件名或者下载地址,谢谢

360管家里搜索gif安装的，我录完就卸载了，您可以在360管家里看看

mjsz

css是什么，可以吃么？

dd0754

#slider {
  overflow: hidden;
}

Ruclinux

dd0754 发表于 2020-4-23 10:25
#slider {
  overflow: hidden;
}

1. /* Main Content Slide */
   
2. #slider {
   
3.   position: relative;
   
4. }
   
5. 
   
6. #slider {
   
7.   height: 364px;
   
8.   background: url("img/slider_bg.jpg") repeat-x;
   
9. }
   
10. 
    
11. #slider .slide {
    
12.   height: 100%;
    
13.   padding: 21px 0px;
    
14.   width: 100%;
    
15. }
    
16. 
    
17. #slider .slide .book-cover {
    
18.   float: left;
    
19.   width: 19%;
    
20.   overflow: hidden;
    
21.   height: 20em;
    
22.   margin-right: 3%;
    
23.   box-shadow: 0px 3px 5px rgba(0,0,0,0.5);
    
24.   height: 230px;
    
25.   border-radius: 50%;
    
26.   background: #000;
    
27. }
    
28. 
    
29. #slider .slide .book-cover img {
    
30.   width: 100%;
    
31.   height: 100%;
    
32.   border-radius: 50%;
    
33. }
    
34. 
    
35. /* Slide Description */
    
36. #slider .slide .slide-description {
    
37.   background: #fff;
    
38.   float: left;
    
39.   width: 78%;
    
40.   min-height: 100%;
    
41.   border-radius: 5px;
    
42.   box-shadow: 2px 0px 5px rgba(0,0,0,0.5);
    
43.   padding: 5px;
    
44.   height: 300px;
    
45. }
    
46. 
    
47. #slider .slide .slide-description .inner-sd {
    
48.   border: 1px solid #2cc1a4;
    
49.   border-radius: 5px;
    
50.   height: 100%;
    
51.   padding: 20px 30px;
    
52. }
    
53. 
    
54. #slider .slide .slide-description .top-sd-head {
    
55.   border-bottom: 1px dotted #979797;
    
56. }
    
57. 
    
58. #slider .slide .slide-description .tsh-left {
    
59.   float: left;
    
60.   max-width: 80%;
    
61. }
    
62. 
    
63. #slider .slide .slide-description .top-sd-head .grade {
    
64.   float: right;
    
65.   padding: 3px 20px;
    
66.   color: #fff;
    
67.   font-size: 1.2em;
    
68.   border-radius: 5px;
    
69. }
    
70. 
    
71. /* Slide Description - Rating */
    
72. #slider .slide .slide-description .rating {
    
73.   display: block;
    
74.   float: right;
    
75.   width: 20%;
    
76.   text-align: right;
    
77. }
    
78. 
    
79. #slider .slide .slide-description .rating ul {
    
80.   margin: 0;
    
81.   padding: 0;
    
82. }
    
83. 
    
84. #slider .slide .slide-description .rating ul li {
    
85.   display: inline-block;
    
86.   font-size: 1.3em;
    
87.   line-height: 2.6;
    
88.   color: #ebbb12;
    
89. }
    
90. 
    
91. 
    
92. 
    
93. /* Slide Description - Title */
    
94. #slider .slide .slide-description .sd-title {
    
95.   margin: 0;
    
96.   padding: 0;
    
97.   margin-bottom: 10px;
    
98. }
    
99. 
    
100. #slider .slide .slide-description .sd-title a {
     
101.   font-family: "Arvo", sans-serif;
     
102.   color: #18bfef;
     
103.   font-size: 1.3em;
     
104.   font-weight: normal;
     
105.   -webkit-transition: all 0.250s ease-in-out;
     
106.   -moz-transition: all 0.250s ease-in-out;
     
107.   -o-transition: all 0.250s ease-in-out;
     
108.   transition: all 0.250s ease-in-out;
     
109. }
     
110. 
     
111. #slider .slide .slide-description .sd-title a:hover {
     
112.   color: #2cc1a4;
     
113. }
     
114. 
     
115. 
     
116. 
     
117. /* Slider Body */
     
118. #slider .slide .sd-body {
     
119.   height: 112px;
     
120.   overflow: hidden;
     
121. }
     
122. 
     
123. #slider .slide .sd-body p {
     
124.   font-family: "Titillium Web", sans-serif;
     
125.   color: #544747;
     
126.   font-size: 1em;
     
127.   margin: 10px 0px;
     
128. }
     
129. 
     
130. 
     
131. 
     
132. /* Slider Meta */
     
133. #slider .sd-meta {
     
134.   border: 1px solid #2cc1a4;
     
135.   border-radius: 3px;
     
136.   padding: 10px;
     
137.   margin-top: 15px;
     
138. }
     
139. 
     
140. #slider .sd-meta span:first-of-type {
     
141.   margin-left: 0;
     
142. }
     
143. 
     
144. #slider .sd-meta span {
     
145.   margin-left: 10px;
     
146. }
     
147. 
     
148. #slider .sd-meta span a, #slider .sd-meta span {
     
149.   color: #18bfef;
     
150.   font-family: "Titillium Web", sans-serif;
     
151.   -webkit-transition: all 0.250s ease-in-out;
     
152.   -moz-transition: all 0.250s ease-in-out;
     
153.   -o-transition: all 0.250s ease-in-out;
     
154.   transition: all 0.250s ease-in-out;
     
155. }
     
156. 
     
157. #slider .sd-meta span a:hover {
     
158.   color: #2cc1a4;
     
159. }
     
160. 
     
161. #slider .sd-meta span a i, #slider .sd-meta span i {
     
162.   color: #979797;
     
163. }
     
164. 
     
165. #slider .sd-meta .read-more {
     
166.   float: right;
     
167.   padding: 0;
     
168.   font-family: "Titillium Web", sans-serif;
     
169.   text-transform: uppercase;
     
170.   font-weight: bold;
     
171.   font-size: 1em;
     
172.   color: #18bfef;
     
173.   line-height: 1.5;
     
174.   -webkit-transition: all 0.250s ease-in-out;
     
175.   -moz-transition: all 0.250s ease-in-out;
     
176.   -o-transition: all 0.250s ease-in-out;
     
177.   transition: all 0.250s ease-in-out;
     
178. }
     
179. 
     
180. #slider .sd-meta .read-more:hover {
     
181.   color: #2cc1a4;
     
182. }
     
183. 
     
184. 
     
185. 
     
186. /* Slider Pager */
     
187. #slider .cycle-pager {
     
188.   position: absolute;
     
189.   height: 13px;
     
190.   bottom: 0px;
     
191.   right: 0;
     
192.   z-index: 9999;
     
193. }
     
194. 
     
195. #slider .cycle-pager span {
     
196.   display: inline-block;
     
197.   width: 14px;
     
198.   height: 13px;
     
199.   background: url("img/snav_n.png") no-repeat;
     
200.   text-indent: -9999px;
     
201.   margin-left: 5px;
     
202. }
     
203. 
     
204. #slider .cycle-pager span:hover {
     
205.   cursor: pointer;
     
206. }
     
207. 
     
208. #slider .cycle-pager .cycle-pager-active {
     
209.   background: url("img/snav_a.png") no-repeat;
     
210.   position: absolute;
     
211. }
     
212. 
     
213. 
     
214. 
     
215. /* Slider Navigation */
     
216. #slider .cycle-next {
     
217.   border-radius: 5px 0px 0px 5px;
     
218.   right: 0;
     
219. }
     
220. 
     
221. #slider .cycle-prev {
     
222.   border-radius: 0px 5px 5px 0px;
     
223.   left: 0;
     
224. }
     
225. 
     
226. #slider .cycle-prev, #slider .cycle-next {
     
227.   width: 40px;
     
228.   height: 40px;
     
229.   border-radius: 50%;
     
230.   position: absolute;
     
231.   top: 50%;
     
232.   z-index: 9999;
     
233.   margin-top: -20px;
     
234.   background: rgba(0,0,0,0.5);
     
235.   font-size: 1.5em;
     
236.   text-align: center;
     
237.   color: #000;
     
238.   opacity: 0.8;
     
239.   line-height: 1.6;
     
240.   -webkit-transition: all 0.250s ease-in-out;
     
241.   -moz-transition: all 0.250s ease-in-out;
     
242.   -o-transition: all 0.250s ease-in-out;
     
243.   transition: all 0.250s ease-in-out;
     
244. }
     
245. 
     
246. #slider .cycle-prev:hover, #slider .cycle-next:hover {
     
247.   opacity: 1;
     
248.   color: #fff;
     
249.   cursor: pointer;
     
250. }
     

复制代码

您好，这是slide相关的，我应该在哪修改呢？ 是添加还是删除 overflow: hidden; 谢谢您了

Ruclinux

头痛