function MyPrompt() {
const [isBlocking, setIsBlocking] = React.useState(false);
const location = useLocation();
const handleBeforeUnload = (event) => {
if (isBlocking) {
event.preventDefault();
event.returnValue = "Are you sure you want to leave?";
}
};
React.useEffect(() => {
window.addEventListener("beforeunload", handleBeforeUnload);
return () => {
window.removeEventListener("beforeunload", handleBeforeUnload);
};
}, [isBlocking]);
const handleFormChange = (event) => {
if (event.target.value.length > 0) {
setIsBlocking(true);
} else {
setIsBlocking(false);
}
};
return (
<div>
<form onChange={handleFormChange}>
<input type="text" placeholder="Type something here" />
<textarea placeholder="Type something here"></textarea>
<button type="submit">Submit</button>
<button type="button" onClick={() => setIsBlocking(false)}>Cancel</button>
</form>
</div>
);
}
<a href="my_works/01/index.html" class="myworks">img</a>let button1 = document.getElementById('button1');
let button2 = document.getElementById('button2');
let formaSend = document.getElementById('main-form');
button1.addEventListener('click', smoothscroll);
button2.addEventListener('click', smoothscroll);
function smoothscroll() {
formaSend.scrollIntoView({ behavior: 'smooth' });
}<html>
<head>
<title>Новостное агенство</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="black-bar">
<div class="fixed-container">
Самые <a href="#">свежие новости</a> в реальном времени
<div id="datetime">12:40 30.03.2021</div>
</div>
</div>
</div>
<div id="header">
<div class="fixed-container">
<img id="logo" src="img/logo.png">
</div>
<div class="gorod">
<a href="#">Москва</a>
</div>
<div class="pogoda">
<img id="oblokoomg" src="img/pogoda.PNG">
<span>+22C</span>
</div>
<div class="poisk">
<input type="search" name="q" placeholder="Поиск по сайту" size="35">
</div>
</div>
<div class="fixed-container">
<div class="nav">
<nav>
<a href="1.html">Главная</a> /
<a href="2.html">Политика</a> /
<a href="3.html">Общество</a> /
<a href="4.html">Экономика</a> /
<a href="1.html">В мире</a> /
<a href="2.html">Проишествия</a> /
<a href="3.html">Спорт</a> /
<a href="4.html">Наука</a> /
<a href="4.html">Туризм</a>
</nav>
</div>
</div>
<div id="central-container">
<div class="fixed-container">
<div id="column-left">
<h2>Новости дня</h2>
<div class="news-item">
<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
<div class="new-item-time">19:00</div>
<div class="new-comments">17</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
<div class="new-item-time">19:00</div>
<div class="new-comments">17</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
<div class="new-item-time">19:00</div>
<div class="new-comments">17</div>
</div>
</div>
<div class="news-item">
<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
<div class="new-item-time">19:00</div>
<div class="new-comments">17</div>
</div>
</div>
</div>
<div id="column-center">
<div class="news-center">
<div class="politikanews"><a href="#">/ Политика</a></div>
<div class="krimnews">В Крыму отреагировали на слова Кравчука о возврате полуострова</div>
<div class="datakrim">19 Июня 2018</div>
<div class="krimvremia">10:48</div></div>
</div>
<div id="column-right">
<img src="img/banner-1.png">
<img src="img/banner-2.png">
</div>
</div>
<div class="fixed-container">
<div id="special-news">
er text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text ret
</div>
</div>
</div>
</body>
</html>html, body{
margin:0;
padding: 0;
min-width: 1000px;
font-family: arial;
}
#header {
margin-top: 15px;
margin-bottom: 15px;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
h2{
font-size: 20px;
padding: 27px 0 27px 18px;
margin: 0 0 34px;
border-bottom: 1px solid #e5e5e5;
}
#black-bar{
background-color: black;
color: white;
padding: 20px 20px;
}
#black-bar a{
color: white;
}
.fixed-container{
/* width: 960px; */
/* margin: 0 auto; */
}
.inline-block{
background-color: yellow;
padding: 10px;
width: 70px;
text-align: right;
margin-bottom: 10px;
display: inline-block;
}
#datetime{
float: right;
}
#logo{
position: relative;
top: 40px;
}
.gorod{
/* width: 600px; */
/* margin: 0 auto; */
/* position: relative; */
top: 10px;
text-decoration: underline;
text-decoration-style: dashed;
}
.pogoda{
/* position: relative; */
/* top: -15px; */
/* left: 900px; */
display: flex;
align-items: center;
}
#oblokoomg{
position: relative;
top: 6px;
}
.poisk{
/* position: relative;
top: -32px; */
/* left: 1100px; */
}
.nav{
text-align: center;
}
#column-left{
background-color: white;
width: 250px;
float: left;
}
.news-item{
padding-left: 18px;
margin-bottom: 27px;
font-size: 14px;
}
.news-item-text{
margin-bottom: 20px;
}
.news-item-props a{
color: #91919f;
}
.news-item-props{
font-size: 12px;
position: relative;
}
.new-item-time{
position: absolute;
top: 0;
left: 120px;
padding-left: 15px;
background-image: url(img/icon-time.png);
background-repeat: no-repeat;
}
.new-comments{
position: absolute;
top: 0;
left: 180px;
padding-left: 15px;
background-image: url(img/icon-comments.png);
background-repeat: no-repeat;
}
#column-center{
background-image: url(img/1_1_11.jpg);
width: 420px;
margin-left: 20px;
float: left;
height: 322px;
}
#column-right{
width: 250px;
float: right;
}
#column-right img{
margin-bottom: 20px;
}
#central-container .fixed-container{
overflow-y: hidden;
}
#central-container{
padding-top: 20px;
background-color: #f9f9f9;
background-image: url(img/central-bg-top.png);
background-repeat: repeat-x;
}
#special-news{
margin-top: 20px;
}
#central-container{
margin-top: 20px;
}
.news-center{
padding-left: 20px;
}
.politikanews{
padding-top: 100px;
font-size: 12px;
position: relative;
}
.politikanews a{
color: #91919f;
}
.krimnews{
margin-top: 30px;
font-family: arial;
font-weight: 600;
font-size: 20px;
color: white;
}
.datakrim{
margin-top: 30px;
position: absolute;
top: 0;
left: 180px;
}
.krimvremia{
position: absolute;
top: 0;
left: 120px;
padding-left: 15px;
}
<head> JavaScript и если вы его указали раньше стилей CSS тогда возможна изначальная загрузка JavaScript а затем и CSS стилей из за чего могут быть эти баги.</body><title>Document</title> в низу под стилями.
<script type="text/javascript"> </script>
<script type="text/javascript">//</script>
Различные вещи могут вызывать изменения вычислительных значений свойств элемента.
К ним относятся: вставка и удаление элементов из дерева документа (которые изменяют, имеют ли эти элементы вычисленные значения и могут изменять стили других элементов посредством сопоставления селекторов), изменения в дереве документа (которые вызывают изменения в том, какие селекторы соответствуют элементам), изменения на таблицы стилей или атрибуты стилей и другие вещи.
Эта спецификация не определяет, когда вычисленные значения обновляются, кроме того, что реализации не должны использовать, представлять или отображать что-либо, являющееся результатом каскадирования CSS, вычисления значений и процесса наследования.
