Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

为了做你想做的事，只需改变它：

.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 我删除了填充，因为它正在推开你的边框。请记住此图像，以了解边距和填充之间的用法和差异：

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

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

我的意见

我可以看到你正在学习网络开发，所以让我建议使用和学习bootstrap。

引导程序： http://getbootstrap.com/getting-started/

您将学习如何使用网格来创建更有条理和更具响应性的主题，并且您将拥有javascript随时可以使用组件的强大功能。

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

另外它还有一个旋转木马，非常棒！ http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Answer 2

请试试这个：

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

Answer 3

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

无法移动我的css图像滑块

3 个答案: