图片不会出现在页面上 [英] Images are not coming on page
本文介绍了图片不会出现在页面上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<script src ="@Url.Content("~/Content/js/responsiveslides.min.js")" type ="text/javascript"></script>
<script type ="text/javascript">
$(function () {
$("#slider1").responsiveslides({ maxwidth:1600 , speed: 600})
});
</script>
<link href="@Url.Content("~/Content/css/responsiveslides.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/style.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
</head>
<body>
<header>
<body>
<!--start-wrap-->
<!--start-header-->
<div class="header">
<div class="wrap">
<!--start-logo-->
<div class="logo">
<img src ="@Url.Content("../Content/images/logo.png")"/>
</div>
<!--end-logo-->
<!--start-top-nav-->
<div class="top-nav">
<ul>
<li class="active">@Html.ActionLink("Home","Home")</li>
<li>@Html.ActionLink("Services", "Services")</li>
<li> @Html.ActionLink("clientlogin","clientlogin")</li>
<li>@Html.ActionLink("adminlogin","adminlogin")</li>
<li>@Html.ActionLink("contactus","contactus")</li>
</ul>
</div>
<div class="clear"> </div>
<!--end-top-nav-->
</div>
<!--end-header-->
</div>
<div class="clear"> </div>
<!--start-image-slider---->
<div class="image-slider">
<!-- Slideshow 1 -->
<ul class="rslides" id="slider1">
<li><img src="@Url.Content("../Content/images/slider-img1.jpg")" /> </li>
<li><img src="@Url.Content("~/Content/images/slider-img2.jpg")" /> </li>
<li><img src="@Url.Content("~/Content/images/slider-img1.jpg")" /> </li>
</ul>
</div>
<div class="clear"> </div>
<div class="content-grids">
<div class="wrap">
<div class="section group">
<div class="listview_1_of_3 images_1_of_3">
<div class="listimg listimg_1_of_2">
<img src="images/grid-img1.png">
</div>
<div class="text list_1_of_2">
<h3>doctors Login</h3>
<p>Need More info?</p>
<div class="button"><span><a href="#">View More</a></span></div>
</div>
</div>
<div class="listview_1_of_3 images_1_of_3">
<div class="listimg listimg_1_of_2">
<img src="images/grid-img2.png">
</div>
<div class="text list_1_of_2">
<h3>Our Client Care</h3>
<p>Need More info?</p>
<div class="button"><span><a href="#">View More</a></span></div>
</div>
</div>
<div class="listview_1_of_3 images_1_of_3">
<div class="listimg listimg_1_of_2">
<img src="images/grid-img3.png">
</div>
<div class="text list_1_of_2">
<h3>Join Us Now</h3>
<p>Need More info?</p>
<div class="button"><span><a href="#">View More</a></span></div>
</div>
</div>
</div>
</div>
</div>
</header>
@RenderBody()
<footer>
<div class="footer">
<div class="wrap">
<div class="footer-left">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">services</a></li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
</footer>
</body>
</html>
This is css.
This is css.
rslides {
position: relative;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
border: 0;
width: 100%;
}
kindly help me
kindly help me
推荐答案
(function () {
(function () {
(\"#slider1\").responsiveslides({ maxwidth:1600 , speed: 600})
});
</script>
<link href=\"@Url.Content(\"~/Content/css/responsiveslides.css\")\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"@Url.Content(\"~/Content/css/style.css\")\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"@Url.Content(\"~/Scripts/jquery-1.7.1.min.js\")\" type=\"text/javascript\"></script>
<script src=\"@Url.Content(\"~/Scripts/modernizr-2.5.3.js\")\" type=\"text/javascript\"></script>
</head>
<body>
<header>
<body>
<!--start-wrap-->
<!--start-header-->
<div class=\"header\">
<div class=\"wrap\">
<!--start-logo-->
<div class=\"logo\">
<img src =\"@Url.Content(\"../Content/images/logo.png\")\"/>
</div>
<!--end-logo-->
<!--start-top-nav-->
<div class=\"top-nav\">
<ul>
<li class=\"active\">@Html.ActionLink(\"Home\",\"Home\")</li>
<li>@Html.ActionLink(\"Services\", \"Services\")</li>
<li> @Html.ActionLink(\"clientlogin\",\"clientlogin\")</li>
<li>@Html.ActionLink(\"adminlogin\",\"adminlogin\")</li>
<li>@Html.ActionLink(\"contactus\",\"contactus\")</li>
</ul>
</div>
<div class=\"clear\"> </div>
<!--end-top-nav-->
</div>
<!--end-header-->
</div>
<div class=\"clear\"> </div>
<!--start-image-slider---->
<div class=\"image-slider\">
<!-- Slideshow 1 -->
<ul class=\"rslides\" id=\"slider1\">
<li><img src=\"@Url.Content(\"../Content/images/slider-img1.jpg\")\" /> </li>
<li><img src=\"@Url.Content(\"~/Content/images/slider-img2.jpg\")\" /> </li>
<li><img src=\"@Url.Content(\"~/Content/images/slider-img1.jpg\")\" /> </li>
</ul>
</div>
<div class=\"clear\"> </div>
<div class=\"content-grids\">
<div class=\"wrap\">
<div class=\"section group\">
<div class=\"listview_1_of_3 images_1_of_3\">
<div class=\"listimg listimg_1_of_2\">
<img src=\"images/grid-img1.png\">
</div>
<div class=\"text list_1_of_2\">
<h3>doctors Login</h3>
<p>Need More info?</p>
<div class=\"button\"><span><a href=\"#\">View More</a></span></div>
</div>
</div>
<div class=\"listview_1_of_3 images_1_of_3\">
<div class=\"listimg listimg_1_of_2\">
<img src=\"images/grid-img2.png\">
</div>
<div class=\"text list_1_of_2\">
<h3>Our Client Care</h3>
<p>Need More info?</p>
<div class=\"button\"><span><a href=\"#\">View More</a></span></div>
</div>
</div>
<div class=\"listview_1_of_3 images_1_of_3\">
<div class=\"listimg listimg_1_of_2\">
<img src=\"image s/grid-img3.png\">
</div>
<div class=\"text list_1_of_2\">
<h3>Join Us Now</h3>
<p>Need More info?<< span class=\"code-leadattribute\">/p>
<div class=\"button\"><span><a href=\"#\">View More</a></span></div>
</div>
</div>
</div>
</div>
</div>
</header>
@RenderB ody()
<footer>
<div class=\"footer\">
<div class=\"wrap\">
<div class=\"footer-left\">
<ul>
<li><a href=\"index.html\">Home</a></li>
<li>< a href=\"about.html\">About</a></li>
<li><a href=\"services.html\">services</a></li>
<li><a href=\"blog.html\">blog</a></li>
<li><< span class=\"code-leadattribute\">a href=\"contact.html\">contact</a></li>
</ul>
</div>
<div class=\"clear\"> </div>
</div>
</div>
</footer>
</body>
</html>
("#slider1").responsiveslides({ maxwidth:1600 , speed: 600}) }); </script> <link href="@Url.Content("~/Content/css/responsiveslides.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/css/style.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script> </head> <body> <header> <body> <!--start-wrap--> <!--start-header--> <div class="header"> <div class="wrap"> <!--start-logo--> <div class="logo"> <img src ="@Url.Content("../Content/images/logo.png")"/> </div> <!--end-logo--> <!--start-top-nav--> <div class="top-nav"> <ul> <li class="active">@Html.ActionLink("Home","Home")</li> <li>@Html.ActionLink("Services", "Services")</li> <li> @Html.ActionLink("clientlogin","clientlogin")</li> <li>@Html.ActionLink("adminlogin","adminlogin")</li> <li>@Html.ActionLink("contactus","contactus")</li> </ul> </div> <div class="clear"> </div> <!--end-top-nav--> </div> <!--end-header--> </div> <div class="clear"> </div> <!--start-image-slider----> <div class="image-slider"> <!-- Slideshow 1 --> <ul class="rslides" id="slider1"> <li><img src="@Url.Content("../Content/images/slider-img1.jpg")" /> </li> <li><img src="@Url.Content("~/Content/images/slider-img2.jpg")" /> </li> <li><img src="@Url.Content("~/Content/images/slider-img1.jpg")" /> </li> </ul> </div> <div class="clear"> </div> <div class="content-grids"> <div class="wrap"> <div class="section group"> <div class="listview_1_of_3 images_1_of_3"> <div class="listimg listimg_1_of_2"> <img src="images/grid-img1.png"> </div> <div class="text list_1_of_2"> <h3>doctors Login</h3> <p>Need More info?</p> <div class="button"><span><a href="#">View More</a></span></div> </div> </div> <div class="listview_1_of_3 images_1_of_3"> <div class="listimg listimg_1_of_2"> <img src="images/grid-img2.png"> </div> <div class="text list_1_of_2"> <h3>Our Client Care</h3> <p>Need More info?</p> <div class="button"><span><a href="#">View More</a></span></div> </div> </div> <div class="listview_1_of_3 images_1_of_3"> <div class="listimg listimg_1_of_2"> <img src="images/grid-img3.png"> </div> <div class="text list_1_of_2"> <h3>Join Us Now</h3> <p>Need More info?</p> <div class="button"><span><a href="#">View More</a></span></div> </div> </div> </div> </div> </div> </header> @RenderBody() <footer> <div class="footer"> <div class="wrap"> <div class="footer-left"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">services</a></li> <li><a href="blog.html">blog</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <div class="clear"> </div> </div> </div> </footer> </body> </html>
This is css.
This is css.
rslides {
position: relative;
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
border: 0;
width: 100%;
}
kindly help me
kindly help me
The problem is that you’re hiding the list-items that contain your images in your website. Have a look below,
The problem is that you're hiding the list-items that contain your images in your website. Have a look below,
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
/* here display is set to none */
display: none;
width: 100%;
left: 0;
top: 0;
}
Which is then applied to the images (or any other child element) inside this list-item. Try removing this, and then reload the web page. This time, the display would not be none and your images will be displayed.
Tip: Try using block instead of none.
Which is then applied to the images (or any other child element) inside this list-item. Try removing this, and then reload the web page. This time, the display would not be none and your images will be displayed.
Tip: Try using block instead of none.
这篇关于图片不会出现在页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
