无法移动我的 css 图片滑块

Question

我在 youtube 上学习了关于如何制作 css 图像滑块的教程。我已经设法将它居中，但无法向上移动它并在图像周围制作边框。我怎样才能做到这一点。谢谢

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

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: 300px 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;
}

<!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">
 <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>

Answer 1

请试试这个：

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

Answer 2

使用以下修改后的 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;
}

Answer 3

为了做你想做的，只需改变这个：

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

更改 1： 我只留下了 margin-left 因为这是你唯一需要的边距，记住使用 margin: 300px auto; 会设置 margin: top/bottom left/right; 所以它看起来像：

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

更改 2： 我删除了填充，因为它会把你的边框推开。牢记这张图，了解 margin 和 padding 的用法和区别：

CSS 边距属性用于在元素周围生成 space。边距属性设置白色 space OUTSIDE 边框的大小。

CSS 填充属性用于在内容周围生成 space。 padding 属性设置元素内容和元素边框之间白色 space 的大小。

我的看法

看得出你在学习web开发，所以我建议使用和学习bootstrap。

Bootstrap: http://getbootstrap.com/getting-started/

您将学习如何使用网格来创建更有条理且反应灵敏的主题，并且您将拥有它javascript 随时可用的组件的力量。

您可以在这里从头开始学习：http://www.w3schools.com/bootstrap/

而且它还有一个旋转木马，太棒了！ http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

无法移动我的 css 图片滑块

Having trouble moving my css image slider

html

css

notepad++