Проблема при загрузке страницы, в разделе формы, цвет background не отображается
я что-то новое в этой веб-разработке, и у меня проблема с моей страницей при загрузке ее на сервер.
я создаю простую веб-страницу с HTML, CSS, Bootstrap 4 и PhP, и загрузка ее на сервер дает мне проблему с цветом background только в разделе контактной формы.
Сначала я думал, что это может быть связано с конфликтом между цветом этого раздела и background-image body, на данный момент это происходит что-то странное, я удалил из своего кода фоновое изображение background (так как мне это не нужно) и удалил изображение из файлов папки, однако оно все еще существует, оно даже не существует в файлах, но изображение продолжает отображаться, что ускользает от моего понимания... Я должен уточнить, что перед загрузкой на сервер я попробовал страницу на localhost, и в этом нет конфликта со страницей цвет, который я хочу в background формы, выглядит гладко, это происходит только с загрузить страницу на сервер.
любые идеи, что это может быть?
прилагаемый код:
.pacifico{
font-family: 'Pacifico', cursive, sans-serif;
}
.dosis{
font-family: 'Dosis', sans-serif;
}
.roboto{
font-family: 'Roboto', sans-serif;
}
.zigzag-4::before{
content: '';
position: absolute;
width: 100%;
height: 30px;
display: block;
background: linear-gradient(
-45deg, transparent 33.33%,
#E57D2A 33.33%, #E57D2A 66.66%,
transparent 66.66%), linear-gradient(45deg, transparent 33.33%,
#E57D2A 33.33%, #E57D2A 66.66%,
transparent 66.66%);
background-size: 30px 60px;
transform: rotateX(180deg);
}
.texto-azul{
color: #3511CC;
}
.bgcolor-durazno{
background-color: rgb(229, 125, 42);
}
.boton-azul{
color: #fff;
background-color: #3511CC;
}
.boton-azul:hover{
color: #3511CC;
background-color: #fff;
}<link href="https://fonts.googleapis.com/css?family=Monoton|Pacifico|Roboto:700|Dosis:800" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--MEDIOS DE CONTACTO-->
<div class="container-fluid bgcolor-durazno zigzag-3">
<div class="row justify-content-center text-center">
<div class="col-12 my-3">
<h1 class="texto-azul pacifico mt-5">Cómo contactarnos</h1>
</div>
</div>
<div class="row justify-content-center">
<!--FORMULARIO DE CONTACTO-->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h1 class="texto-azul dosis">
¡Envíanos un mensaje!
</h1>
<h5 class="texto-azul roboto">
Estaremos encantados de conocerte <br>¡Envíanos un mensaje y nos pondremos en contacto a la brevedad!
</h5>
</div>
</div>
<form action="../script/enviar_msj.php" method="post">
<div class="form-row mt-3">
<div class="form-group col-md-6">
<label class="roboto texto-azul" for="nombre">Nombre*</label>
<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Nombre" required>
</div>
<div class="form-group col-md-6">
<label class="roboto texto-azul" for="apellido">Apellido</label>
<input type="text" class="form-control" name="apellido" id="apellido" placeholder="Apellido">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label class="roboto texto-azul" for="email">Email*</label>
<input type="email" class="form-control" name="email" id="email" placeholder="[email protected]" required>
</div>
<div class="form-group col-md-6">
<label class="roboto texto-azul" for="telefono">Teléfono / celular</label>
<input type="tel" class="form-control" name="telefono" id="telefono" placeholder="(+56) 9 12345678">
</div>
</div>
<div class="form-group">
<label class="roboto texto-azul" for="mensaje">Mensaje*</label>
<textarea name="mensaje" id="mensaje" class="form-control" rows="7" placeholder="Escribe aquí tu mensaje" required></textarea>
</div>
<div class="form-row justify-content-center mt-4 mb-5">
<button type="submit" name="btnenviar" id="btnenviar" class="btn boton-azul btn-lg">Enviar</button>
</div>
</form>
</div>
<!--GOOGLE MAPS-->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h1 class="texto-azul dosis">
¡Ven a visitarnos!
</h1>
<h5 class="texto-azul roboto">
Encuéntranos en Av. Vicuña Mackenna #1703 o llámanos al <br> (+56) 22 9339129
</h5>
</div>
</div>
<div class="embed-responsive embed-responsive-16by9 mt-5">
<iframe class="embed-responsive-item" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Av.+vicuña+mackenna+1703&key=AIzaSyB9dp7IC5AMnJSMohu1y6_v_CqHLBDLgvI" allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><?php
//nombrando campos
$nombre = $_POST['nombre'];
$apellido = $_POST['apellido'];
$email = $_POST['email'];
$telefono = $_POST['telefono'];
$mensaje = $_POST['mensaje'];
//datos para el correo
$destinatario = "[email protected]";
$asunto = "Contacto Web: Tienes un mensaje de $nombre";
$contenido = "De: $nombre $apellido \n";
$contenido .= "Correo: $email \n";
$contenido .= "Telefono: $telefono \n";
$contenido .= "Mensaje: $mensaje \n";
$contenido .= "¡RECUERDA RESPONDER AL REMITENTE!";
//enviar Correo
mail($destinatario, $asunto, $contenido);
header('Location:gracias.php');
?>1 answers
Определенно проблема в cache браузера.
¿Что такое кэш?
- это функция, характерная для браузеров, которая позволяет быстрее загружать веб-страницы, сохраняя на компьютере часть ранее запрошенной информации.
Преимущества: веб-страницы, которые вы просматриваете каждый день, будут загружаться намного быстрее.
Недостатки: может занять много места, даже занимать файлы который вы больше никогда не будете использовать. Кроме того, для нас, как разработчиков, может случиться так, что мы иногда вносим изменения в макет и не видим их, потому что страница загружается из кеша браузера, а не повторно запрашивает файл CSS или JS с нуля.
Ниже я показываю поток кэша при первом входе на веб-страницу.
- сначала входит и запрашивает файл default. aspx, читает его и находит файл JS.
- запрашивает файл на веб-сервере и читает его.
- сохраняет его в кеше браузера.
Теперь поток кэша после первого входа на ту же веб-страницу.
- повторно запрашивает файл default. aspx, читает его и находит то же имя файла JS.
- кэш думает, что это тот же файл, который я запрашиваю при первом входе на страницу, и решает, что это не необходимо запросить его на веб-сервере, а вместо этого добавить тот, который кэшируется.
¿Как исправить этот недостаток как разработчик?
Хорошей новостью является то, что есть много решений проблемы кэша.
Расширения / Аддоны
Вы можете использовать расширение Chrome Clear Cache для удаления кэша одним щелчком мыши или в Firefox.
Строка случайная
Добавить случайную строку после форматирования файла JS или CSS.
<script src="test.js?version=1"></script>
let fakePath = new Date();
let fileName = 'scripts.js';
fakePath = fakePath.getTime();
console.log(fileName + '?random=' + fakePath);Удалить из браузера
Вы можете удалить его непосредственно из браузера, следуя инструкциям Chrome и Firefox
И, кроме того, эти другие решения, уже приведенные в другой пост из SOEs.