有麻煩移動我的CSS圖像滑塊

我已經跟着就如何使一個css圖像滑塊在YouTube上的教程。我設法將其居中，但無法將其移動並在圖像周圍製作邊框。我怎樣才能做到這一點。謝謝。

.sidebar { 
 
\t position: fixed; 
 
\t height:100%; 
 
\t left: 0; 
 
\t top: 0px; 
 
\t width: 300px; 
 
\t background:#808080; 
 
\t border: 3px solid #555; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t padding-left: 300px; 
 
\t font-size: 50px; 
 
\t font-family: "Verdana", Geneva, sans-serif; 
 
\t color:#f2f2f2; 
 
} 
 

 
h2 { 
 
\t text-align: center; 
 
\t padding-left: 300px; 
 
\t margin-top:30px; 
 
\t color:#e6e6e6; 
 
\t font-family: "Verdana", Geneva, sans-serif; 
 
} 
 

 

 
.sideimage { 
 
\t text-align: center; 
 
\t padding-top: 30px; 
 
} 
 

 
.con { 
 
\t border: 5px solid red; 
 
\t width: 700px; 
 
\t height: 500px; 
 
\t margin: 300px auto; 
 
\t overflow: hidden; 
 
\t padding-left: 300px 
 
} 
 

 
.img { 
 
\t position: absolute; 
 
\t width: 700px; 
 
\t height: 500px; 
 
\t animation: mm 15s infinite; 
 
\t -webkit-animation: mm 15s infinite; 
 
\t opacity: 0; 
 
} 
 
\t 
 
@keyframes mm{ 
 
\t 10%{opacity:1} 
 
\t 45%{opacity:0} 
 
} 
 

 
@-webkit-keyframes mm{ 
 
\t 10%{opacity:1} 
 
\t 45%{opacity:0} 
 
} 
 

 

 
img:nth-child(0){animation-delay: 0s;-webkit-animation-delay: 0s;} 
 
img:nth-child(1){animation-delay: 5s;-webkit-animation-delay: 5s;} 
 
img:nth-child(2){animation-delay: 10s;-webkit-animation-delay: 10s;} 
 

 

 
.main_image { 
 
\t text-align: center; 
 
\t padding-left: 300px; 
 
\t margin-top: 100px; 
 
} 
 

 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 300px; 
 
    background-color: #66b3ff; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000000; 
 
    padding: 8px 0 8px 16px; 
 
    text-decoration: none; 
 
\t font-size: 30px; 
 
\t font-family: "Verdana", Geneva, sans-serif; 
 
\t border-bottom: 3px solid #555; 
 
} 
 

 

 
li a:hover { 
 
    background-color:#27C0FD; 
 
    color: #000000; 
 
}

<!DOCTYPE html> 
 
<link rel="stylesheet" type="text/css" href="index.css"> 
 
<html> 
 
<body bgcolor="#3399ff"> 
 

 
<h1> Informational Tech Site</h1> 
 

 
<h2>This website is the place in which you can find all the information about what building games actually looks like in a workplace environment. 
 
</h2> 
 

 
<div class="con"> 
 
<img src="images/image slider1.png" class="img"> 
 
<img src="images/image slider 2.png" class="img"> 
 
<img src="images/image slider 3 .png" class="img"> 
 
</div> 
 

 

 
<body> 
 
<div class="sidebar"> 
 
\t <ul> 
 
\t <div class="sideimage"><img src="images/website logo draft.png" height="70" width="110"/></div> 
 
\t 
 
\t <li><a href="index.html">Home</a> </li> 
 
\t <li><a href="page 2.html">page 2</a></li> 
 
\t <li><a href="page 3.html">page 3</a></li> 
 
\t <li><a href="page 4.html">page 4</a></li> 
 
\t <li><a href="page 5.html">page 5</a></li> 
 
</ul> \t 
 
</div> 
 

 

 

 

 
</body>

來源

2016-03-28 Droid2

這是我想要在藍色部分中心圖像滑塊的代碼。 https：//開頭的jsfiddle。net/wcek0eo5/ – Droid2

爲了做你想做的，只是改變這一點：

.con { 
    border: 5px solid red; 
    width: 700px; 
    height: 500px; 
    margin-left: 300px; /* Change 1 */ 
    overflow: hidden; 
    /* padding-left: 300px; Change 2 */ 
}

變化1：我離開只剩下餘量，因爲這是您需要的唯一餘量，請記住使用margin: 300px auto;將設置margin: top/bottom left/right;所以它看起來像：

margin-top: 300px; 
margin-right: auto; 
margin-bottom: 300px; 
margin-left: auto;

變化2：我去掉填充，因爲它是推你的邊界了。記住此圖片瞭解margin和padding之間的使用和區別：

的CSS邊距屬性被用來生成元素周圍的空間。邊距屬性設置邊框的空白尺寸外部尺寸。

CSS填充屬性用於生成圍繞內容的空間。填充屬性設置元素內容和元素邊框之間的空白大小。

我的意見

我可以看到你正在學習網站開發，所以讓我建議使用和學習引導。

引導：http://getbootstrap.com/getting-started/

您將學習如何使用網格創建更加有組織和響應的主題，你將有能力的它的JavaScript就可以使用組件。

你可以從這裏從頭學：http://www.w3schools.com/bootstrap/

再加上它也有一個旋轉木馬，這是偉大的！ http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

來源

2016-03-28 05:37:57 xWaZzo

你好，謝謝你的幫助。我做了這些改變，這是結果。 https://imgur.com/LDD1Yo2如何將圖像滑塊置於藍色部分？ – Droid2

這裏是我剛剛使用了不同的圖像的代碼。 https://jsfiddle.net/wcek0eo5/我想將圖片滑塊置於藍色部分。 – Droid2

您需要添加一個新的包裝，以便您可以將滑塊居中放置。你的前任更新：https：//jsfiddle.net/xwazzo/fc1u3xpf/2/ 我真的建議學習引導，因爲這變得非常混亂，我們正在解決，但沒有良好的做法。請選擇我的答案如果你喜歡它。 – xWaZzo

請試試這個：

div.con img{border:5px solid red}

來源

2016-03-28 05:18:30 satya

使用以下修改HTML和CSS來獲得您所需的輸出。

HTML ::

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css"></head> 
<body bgcolor="#3399ff"> 
<div class="main-container"> 
<h1> Informational Tech Site</h1> 
<h2>This website is the place in which you can find all the information about what building games actually looks like in a workplace environment. 
</h2> 
<div class="con"> 
<img src="images/image slider1.png" class="img"> 
<img src="images/image slider 2.png" class="img"> 
<img src="images/image slider 3 .png" class="img"> 
</div> 
</div> 

<div class="sidebar"> 
<ul> 
<div class="sideimage"><img src="images/website logo draft.png" height="70" width="110"/></div> 

<li><a href="index.html">Home</a> </li> 
<li><a href="page 2.html">page 2</a></li> 
<li><a href="page 3.html">page 3</a></li> 
<li><a href="page 4.html">page 4</a></li> 
<li><a href="page 5.html">page 5</a></li> 
</ul> 
</div> 
</body> 
</html>

CSS ::

.sidebar { 
position: fixed; 
height:100%; 
left: 0; 
top: 0px; 
width: 300px; 
background:#808080; 
border: 3px solid #555; 
} 

.main-container{ 
float: right; 
width: 75%; 
} 

h1 { 
text-align: center; 
/*padding-left: 300px;*/ 
font-size: 50px; 
font-family: "Verdana", Geneva, sans-serif; 
color:#f2f2f2; 
} 

h2 { 
text-align: center; 
/*padding-left: 300px;*/ 
margin-top:30px; 
color:#e6e6e6; 
font-family: "Verdana", Geneva, sans-serif; 
} 


.sideimage { 
text-align: center; 
padding-top: 30px; 
} 

.con { 
border: 5px solid red; 
width: 700px; 
height: 500px; 
margin: 0 auto; 
overflow: hidden; 
/*padding-left: 300px*/ 
} 

.img { 
position: absolute; 
width: 700px; 
height: 500px; 
animation: mm 15s infinite; 
-webkit-animation: mm 15s infinite; 
opacity: 0; 
} 

@keyframes mm{ 
10%{opacity:1} 
45%{opacity:0} 
} 

@-webkit-keyframes mm{ 
10%{opacity:1} 
45%{opacity:0} 
} 


img:nth-child(0){animation-delay: 0s;-webkit-animation-delay: 0s;} 
img:nth-child(1){animation-delay: 5s;-webkit-animation-delay: 5s;} 
img:nth-child(2){animation-delay: 10s;-webkit-animation-delay: 10s;} 


.main_image { 
text-align: center; 
/*padding-left: 300px;*/ 
margin-top: 100px; 
} 


ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
width: 300px; 
background-color: #66b3ff; 
} 

li a { 
display: block; 
color: #000000; 
padding: 8px 0 8px 16px; 
text-decoration: none; 
font-size: 30px; 
font-family: "Verdana", Geneva, sans-serif; 
border-bottom: 3px solid #555; 
} 


li a:hover { 
background-color:#27C0FD; 
color: #000000; 
}

來源

2016-03-28 05:24:42 WisdmLabs

有麻煩移動我的CSS圖像滑塊

回答

相關問題