【发布时间】：2023-03-08 14:05:02
【问题描述】：
我的网站在我的本地计算机上按照我的意愿运行，但是当我在其他计算机上查看它时，幻灯片中的图像以各种不同的尺寸呈现。它在我的计算机上运行良好，但我在对代码进行故障排除时遇到了问题，因为我在本地环境中看不到问题。是否有人对如何解决您在本地计算机上看不到的前端问题提出建议？我通过 W3C 验证器运行代码，但我感到不知所措，但它是输出。任何指导将不胜感激！ （对于所有内联的东西，我很抱歉，我正在帮助一个在 Dreamweaver 工作的朋友，并被要求以这种方式离开它。）
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Full Slider - Start Bootstrap Template</title>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Modernizer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- Focuspoint -->
<script type="text/javascript" src="js/jquery.focuspoint.js"></script>
<link rel="stylesheet" href="css/focuspoint.css">
<!-- bx slider -->
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet">
<script type="text/javascript">
//<![CDATA[
(function($) {
$(document).ready(function() {
//Fire plugin
$('.focuspoint').focusPoint();
$('.bxslider').bxSlider({
video: true,
useCSS: false,
controls: true
});
});
}(jQuery));
//]]>
</script>
<style type="text/css">
.navbar.transparent.navbar-inverse .navbar-inner {
background: rgba(0,0,0,0.4);
font-color: #000;
}
.navbar-nav > li{
margin-left:-10px;
margin-right:-10px;
}
.icon-bar {
background-color:#FFF !important;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: underline;
color: #FFC;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: transparent;
}
body
{
background-image: url(Images/Dust_Background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: black;
background-attachment: fixed;
}
.bg
{
width: 100%;
z-index: 0;
}
a {
color: #FFC;
text-decoration: none;
}
a.pull-left {
width: 25%;
margin-top: 10px;
}
.navbar-collapse{
border-top:0px !important;
box-shadow:none;
}
body,td,th {
font-family: "Tw Cen MT", Helvetica, "MS Reference Sans Serif";
font-size: 16px;
color: #FFF;
}
a:link {
text-decoration: none;
color: #FFF;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFC;
}
a:active {
text-decoration: none;
}
@media (max-width: @screen-xs) {
body{font-size: 10px;}
}
@media (max-width: @screen-sm) {
body{font-size: 14px;}
}
#style_text {
text-align: justify;
letter-spacing: .8px;
font-weight: 100;
}
#style_text p {
padding: 10px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.bx-wrapper .bx-viewport {
border: none;
-webkit-box-shadow: none;
background: transparent;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: rgba(255, 255, 255, 0.25)
}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
background: rgba(255, 255, 255, 0.65);
}
.bx-wrapper .bx-loading {
background: black;
}
</style>
<body>
<!-- Navigation -->
<nav class="navbar navbar-transparent navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="test">
<a href="index_vs3.html" class="pull-left"><img src="Images/kairos_logo.png" style="
width: 250%;"></a>
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="film_vs7.html">THE FILM</a></li>
<li><a href="screenings.html">SCREENINGS</a></li>
<li><a href="contact_vs3.html">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<ul class="bxslider">
<li>
<iframe src="http://player.vimeo.com/video/131032179" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
<li><img src="Images/EbelKitchen.jpg" /></li>
<li><img src="Images/LightningHole.jpg" /></li>
<li><img src="Images/CharlesAlex.jpg" /></li>
<li><img src="Images/Edna_JoeysRoom.jpg" /></li>
<li><img src="Images/neoncross.jpg"/></li>
<li><img src="Images/overpass.jpg"/></li>
<li><img src="Images/TJRosieTrainWalk.jpg" /></li>
</ul>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-l">
<div id="style_text">
<p>
Through a series of collective dreams an other worldly being invades the characters' dream spaces, revealing their carnivorous desires and subconscious underbellies. Relationships intertwine in unusual and fantastical landscapes as television monitors, radio frequencies, orifices and dreams all become portals to access this alternate dimension of carnality and desire.</p>
<p>
The characters are forced to ask what is self? What is other? What must we give up to become something else?</p>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： javascript jquery html css twitter-bootstrap