如何正确显示我的滑块
[英]How can I display my slider correctly
问题描述
大家，我是html / css的新手。我想在中央显示我的滑块。 谁能检查我的代码中有什么错误以及为什么我的Info div会在那里显示我的Slider。...谢谢。
这是HTML代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mystyle.css">
<title>GR PROVIDER</title>
</head>
<body>
<div class="Header">
<div class="heading">
<h2> Gulf Resources Provider </h2>
</div>
<div class="socialmedia">
<ul>
<li> <a href=""> <img src="GRProvider/Facebook.jpg"> </a>
</li>
<li> <a href=""> <img src="GRProvider/LinkedIn.jpg"></a>
</li>
<li> <a href=""> <img src="GRProvider/Google.jpg"> </a>
</li>
<li> <a href=""> <img src="GRProvider/Twitter.jpg"> </a>
</li>
</ul>
</div>
</div>
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg" />
</div>
</div>
<div class="diagram">
<div class="sample">
<img src="GRProvider/Img_3.jpg" />
</div>
<div class="sample">
<img src="GRProvider/Img_4.jpg" />
</div>
</div>
<div class="main_content">
<div class="navigation">
<ul>
<li> <a href="#"> HOME </a>
</li>
<li> <a href="#"> ABOUT US </a>
</li>
<li> <a href="#"> CAREER </a>
</li>
<li> <a href="#"> CONTACT US </a>
</li>
</ul>
</div>
<div class="Slider">
<div class="slider_img">
<img src="GRProvider/Slider.jpg">
</div>
</div>
</div>
<div class="Info">
<div class="About_Us">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum.............</p>
</div>
<div class="button">
<button type="button">READ MORE</button>
</div>
</div>
<div class="content">
<div class="text">
<img src="GRProvider/Img_4.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_5.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
<div class="text">
<img src="GRProvider/Img_6.jpg" />
<h4> PRODUCT INFORMATION </h4>
<p>consectetur adipiscing elit. Etiam tristique tristique any varius. Donec nec vestibulum ligula. Aenean turpis do feugiat a luctus in, rhoncus risus. Maecenas dui\vitae consequat massa imperdietut. elit ut tempus lobortis, eros leo molestie velit, nonegestas augue nulla</p>
</div>
</div>
<div class="footer">
<h3> Copyright by Bitsprovider.com </h3>
</div>
</div>
</body>
</html>
这是样式表。
* {
margin: 0% auto;
padding: 0;
width: 90%;
}
body {
background-color: #1e93a5;
width: 100%;
}
.header {
margin: 2%;
width: 100%;
}
.heading {
float: left;
width: 70%;
}
h2 {
color: #fff;
padding: 0 25%;
}
.socialmedia {
float: left;
width: 30%;
}
.socialmedia > img {
}
ul {
width: 100%;
}
li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 11%;
}
a {
border: 1px solid #0e8393;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.images {
float: left;
width: 20%;
}
.pics img {
width: 100%;
}
.diagram {
float: right;
width: 20%;
}
.sample img {
width: 100%;
}
.main_content {
float: left;
width: 60%;
}
.navigation {
width: 100%;
}
.navigation > ul {
width: 100%;
}
.navigation > ul li {
list-style: outside none none;
text-decoration: none;
width: 25%;
}
.navigation > ul li a {
background-color: #2dacbe;
color: black;
text-align: center;
text-decoration: none;
width: 100%;
}
.slider {
width: 100%;
}
.slider_img {
width: 100%;
}
.info {
float: left;
width: 100%;
}
.About_Us {
float:left;
width: 100%;
}
p {
width: 100%;
color: #FFF;
background-color: #1e93a5;
text-align:justify;
}
.button {
}
.content {
float: left;
width: 100%;
}
.text {
float: left;
width: 33%;
}
.text > img {
border: 1px solid #18204e;
width: 93%;
}
h4 {
background-color: #263270;
color: #fff;
width: 93%;
}
.text > p {
background-color: #d3d3d3;
color: #fff;
width: 93%;
}
.footer {
float: left;
padding: 2%;
width: 100%;
}
h3 {
color: #fff;
text-align: center;
}
1 个解决方案
解决方案1
1 2015-11-12 10:38:23
这将使滑块居中，因为它位于main_content类中。
.main_content {
margin: 0 auto;
width: 100%;
clear: both;
}
将图像放入滑块后，您还必须将组设置为居中，但这可以通过滑块使用的任何JavaScript进行控制。 如果只是一张图片，请使用.myImageClass{text-align: center} 。
编辑： jsfiddle
仅当使用jquery未正确输入用户名或密码时，如何显示错误消息？
[英]How can I get my error messages to display only if username or password is not entered correctly using jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.