我正在为一家公司创建一个网站,当我只使用文件打开主页时,我得到了以下结果
但是当我将它们上传到服务器后打开它们时(我已经上传到https://appdevpanda.com的Live服务器和使用“Web Server for Chrome”的本地服务器),结果是
index.html的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App Dev Panda</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/hover.css" />
<script src="main.js"></script>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- Custom styles for this template -->
<link href="css/logo-nav.css" rel="stylesheet">
</head>
<body>
<style>
ul li{
display: inline;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" width="100" height="100" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html" style="margin-right: 16px;">HOME
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropbtn" href="#" style="margin-right: 16px;">SERVICES</a>
<div class="dropdown-content">
<a href="web_dev.html" style="text-decoration: none;">Web Development</a>
<a href="android-dev.html" style="text-decoration: none;">Android Development</a>
<a href="software-dev.html" style="text-decoration: none;">Software Development</a>
<a href="game-dev.html" style="text-decoration: none;">Game Development</a>
<a href="ai-dev.html" style="text-decoration: none;">AI Development</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html" style="margin-right: 16px;">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" style="margin-right: 16px;">ABOUT US</a>
</li>
<li class="nav-item">
<a href="contact.html" class="btn" style="background: #AEFC88;margin-right: 16px;color: inherit;">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="myheader">
<div id="particles-js">
</div>
<center>
<h1> We are digital developers</h1>
</center>
</div>
<!-- scripts -->
<script src="particles.js"></script>
<script src="app.js"></script>
<!-- stats.js -->
<script src="js/lib/stats.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
<!-- Page Content
<div class="container" style="padding: 24px;
background: #292424;z-index: 9999;color: #292424">
<h1 class="mt-5">Logo Nav by Start Bootstrap</h1>
</div>-->
<div class="skills">
<ul>
<li><img id = "mobiledev" class='img-circle hvr-grow' src='images/Mobile-App-Development.png' />
</li>
<li><img id = "webdev" class='img-circle' src='images/webdev.jpg' />
</li>
<li><img id = "softwaredev" class='img-circle' src='images/desktop-app-development.png' />
</li>
<li><img id = "gamedev" class='img-circle' src='images/gamedev.jpg' />
</li>
<li><img id = "aidev" class='img-circle' src='images/aidev.jpg' />
</li>
</ul>
<br>
</div>
<div class="skills">
<h2 id="development_field">Android Development</h2>
</div>
<div class="skills">
<p id="development_details">We provide top-notch android development service</p>
</div>
<!-- /.container -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- <div class="header" style="color: white;
position: relative;">
<h1>Hello</h1>
</div>!-->
<script src="skills.js"></script>
<div id="consultancy_Ad">
<marquee behavior="alternate"><h3 style=" text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);" >Get 60 minutes consultancy for free</h3></marquee>
</div>
<div id="testemonials">
<h3>Our Happy Clients</h3>
</div>
<div class="speech-bubble" style="width: 200px;height: 150px;padding: 16px;margin: 16px;color: white;">
Bla Bla Bla Bla
</div>
<img class="dp" src="images/utkarsh.jpg">
<h6 class="testemonial-intro">Mr. Utkarsh Dixit</h6>
<p class="testemonial-intro">Owner and Founder of IndiaOnlineMart.com</p>
<footer>
<div class="footer">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--Pulling Awesome Font -->
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
样式代码. css
@font-face{
font-family: thefont;
src: url('../fonts/theboldfont.ttf');
}
@font-face{
font-family: themenufont;
src: url('../fonts/fontawesome-webfont.woff');
}
body{
margin: 0;
padding: 0;
}
.myheader{
background: #dc3545;
width: 100%;
height: 500px;
margin: 0;
padding: 16px;
color: white;
font-size: 24px !important;
display: flex;
justify-content: center;
align-items: center;
}
#particles-js{
width: 100%;
height: 500px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
z-index: 0 !important;
}
.skills{
background: #292424;
width: 100%;
padding: 24px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px !important;
}
.img-circle{
border-radius: 50%;
width: 200px;
height: 200px;
border: 5px solid #AEFC88;
background: white;
margin: 16px;
object-fit: scale-down;
}
.img-circle:hover{
border: 5px solid #EE5050 !important;
}
#consultancy_Ad{
background: #AEFC88;
width: 100%;
padding-top: 24px;
padding-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'thefont'
}
#testemonials{
width: 100%;
padding: 24px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'thefont';
color: #292424;
font-size: 24px !important;
}
.speech-bubble { position: relative; background: #ee5050; border-radius: .4em;
margin-left: 24px;}
.speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 39px solid transparent; border-top-color: #ee5050; border-bottom: 0; border-left: 0; margin-left: -19.5px; margin-bottom: -39px; }
.dp{
border-radius: 50%;
width: 100px;
height: 100px;
border: 5px solid #AEFC88;
background: white;
margin: 24px;
margin-left: 24px;
object-fit:fill;
}
.testemonial-intro{
margin: 16dp;
font-family: thefont;
color: #292424;
margin: 16px;
text-align: left;
}
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
text-align: center;
justify-content: center;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a:hover, a:visited, a:link, a:active
{
text-decoration: none;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when
*/
.footer {
left: 0;
bottom: 0;
width: 100%;
height: 30vh;
background-color: #292424;
color: white;
text-align: center;
padding: 40px;
}
ul.social-network {
list-style: none;
display: inline;
margin-left:0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:20px;
}
.social-circle li i {
margin:0;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
a {
background-color: #D3D3D3;
}
.gallery-title
{
font-size: 36px;
color: #42B32F;
text-align: center;
font-weight: 500;
margin-bottom: 70px;
margin-top: 50px;
}
.gallery-title:after {
content: "";
position: absolute;
width: 7.5%;
left: 46.5%;
height: 45px;
border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #42B32F;
margin-bottom: 30px;
}
.filter-button:hover
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #42B32F;
}
.btn-default:active .filter-button:active
{
background-color: #42B32F;
color: white;
}
.port-image
{
width: 100%;
}
.gallery_product
{
margin-bottom: 30px;
display: block;
object-fit: scale-down;
}
#filter{
width: 100%;
}
#myportfolio{
display: flex;
justify-content: center;
align-items: center;
}
#portfolio {
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {
}
.scale-anm {
transform: scale(1);
}
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
.btn {
font-family: Lato;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border: 1px solid;
vertical-align: middle;
-webkit-appearance: none;
color: #555;
background-color: rgba(0, 0, 0, 0);
}
.btn:hover {
text-decoration: none;
}
.btn:focus {
outline: none;
border-color: var(--darken-2);
box-shadow: 0 0 0 3px var(--darken-3);
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
.container {
position: relative;
}
.image {
opacity: 1;
border: 1px solid black;
object-fit: scale-down;
transition: .5s ease;
backface-visibility: hidden;
height: 10px;
}
.middle {
transition: .5s ease;
opacity: 0;
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
border-radius: 10px;
background-color: #EE5050;
color: white;
font-size: 16px;
padding: 16px 32px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
.skill-img {
margin: 10px;
transition: all .1s ease;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.skill-img:hover{
transform: scale(1.1);
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.column {
margin-right: 0;
margin-top: 20px;
}
}
在基于server的html中还有一个更改,它显示为
而在基于 file 的html中,它类似于
portfolio.html的代码(最后一张图片的html是)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App Dev Panda</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/hover.css" />
<script src="main.js"></script>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- Custom styles for this template -->
<link href="css/logo-nav.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
<link rel='stylesheet prefetch' href='https://npmcdn.com/basscss@8.0.0/css/basscss.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="images/logo.png" width="100" height="100" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html" style="margin-right: 16px;">HOME
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropbtn" href="#" style="margin-right: 16px;">SERVICES</a>
<div class="dropdown-content">
<a href="web_dev.html" style="text-decoration: none;">Web Development</a>
<a href="android-dev.html" style="text-decoration: none;">Android Development</a>
<a href="software-dev.html" style="text-decoration: none;">Software Development</a>
<a href="game-dev.html" style="text-decoration: none;">Game Development</a>
<a href="ai-dev.html" style="text-decoration: none;">AI Development</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="portfolio.html" style="margin-right: 16px;">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html" style="margin-right: 16px;">ABOUT US</a>
</li>
<li class="nav-item">
<a href="contact.html" class="btn" style="background: #AEFC88;margin-right: 16px;color: inherit;">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="myheader">
<div id="particles-js">
</div>
<center>
<h1>Portfolio</h1>
</center>
</div>
<!-- scripts -->
<script src="particles.js"></script>
<script src="app.js"></script>
<!-- stats.js -->
<script src="js/lib/stats.js"></script>
<script>
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<center>
<div class="toolbar mb2 mt2">
<button class="btn btn-info fil-cat" href="" data-rel="all">All</button>
<button class="btn btn-info fil-cat" data-rel="web">Web</button>
<button class="btn btn-info fil-cat" data-rel="android">Android</button>
<button class="btn btn-info fil-cat" data-rel="logo">Logo</button>
</div>
</center>
<div id="portfolio">
<div class="tile scale-anm web all container" >
<img src="images/banner.png" alt="Avatar" class="image">
<div class="middle scale-anm web all">
<div class="text scale-anm web all">Hair Paradise
<br>
<br>
<button type="button" class="btn btn-info">View</button>
</div>
</div>
</div>
<div class="tile scale-anm android all container">
<img src="images/dream11.png" alt="Avatar" class="image">
<div class="middle scale-anm android all">
<div class="text scale-anm android all">Dream 11 Expert Prediction, News, Tips and Teams
<br>
<br>
<button type="button" class="btn btn-info">View</button>
</div>
</div>
</div>
<div class="tile scale-anm android all container">
<img src="images/namamidevinarmade.jpg" alt="Avatar" class="image">
<div class="middle scale-anm android all">
<div class="text scale-anm android all">Namami Devi Narmade
<br>
<br>
<button type="button" class="btn btn-info">View</button>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="js/index.js"></script>
<footer>
<div class="footer">
<!--Pulling Awesome Font -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
请,请,请帮我解决这个问题,我正在努力解决这个问题,从很长一段时间。
2条答案
按热度按时间xe55xuns1#
若要在与服务器更相似的环境中预览网站,请尝试在您的计算机上本地运行Web服务器。
一个快速简单的选择是使用
http-server
:https://www.npmjs.com/package/http-server安装这个程序,然后在你的文件夹中运行
http-server .
。这样你就可以在电脑上预览你的项目了。2nc8po8w2#
问题是我链接了多个bootstrap和jquery以及不同的版本,所以我清理了它们,现在一切都好了,谢谢