有麻烦移动我的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图像滑块

回答

相关问题