<script>
function titleAccent(x) {
if (x.matches) {
// если размер экрана больше 1000px
document.all.accent.style.borderRadius = "60px";}
else {
// если размер экрана меньше 1000px
// здесь я умышленно указал radius 0 чтоб вы убелись что оно работает
// если вместо border-radius: 0px; написать border-radius: 60px; то при лбюом размере экрана будет border-radius: 60px
document.all.accent.style.borderRadius = "0px";}}
var x = window.matchMedia("(min-width: 1000px)")
titleAccent(x);
x.addListener(titleAccent);</script><script>function titleAccent(x) {
if (x.matches) {document.all.accent.style.borderRadius = "60px";}
else {document.all.accent.style.borderRadius = "0px";}}
var x = window.matchMedia("(min-width: 1000px)")
titleAccent(x);
x.addListener(titleAccent);</script>borderRadius = "0px" замени на 60px. a {
margin: 20px 0 0;
/* двигаем а<body onclick="location.href='https://site.com', '_blank'"><body onclick="window.open('https://site.com', '_blank');return false;"><html>
<style>
body {
height: 100%;
margin: 0;
background-image: url('snow.gif');
background-repeat: no-repeat;
min-height:100%;
background-position: center center;
background-size: auto 100%;
background-attachment: fixed;
}
a {
margin: 20px 0 0;
/* двигаем а
margin: 20px 0 0 0;
margin внешний отступ от границы
padding: 0px 0 0 0;
padding внутренний отступ от границы
margin: 20px 0 0 0;
margin: 1 2 3 4;
1 отступ от верха
2 отступ от правой стороны
3 отступ от нижней границы
4 отступ от левой сороны
т.е. чтоб сделать от верха меньше надо написать
margin: 10px 0 0 0;*/
display: block;
}
.img {
height: 0px;
}</style>
<body onclick="location.href='https://site.com'">
<img class="img" src="">
<center class="center"><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img src="a.png" height="83" width="340"></a></center>
</body>
</html><html>
<title>site</title>
<style>
.bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: block;
}
a, center {
display: block;
}
body {
height: 100%;
background-image: url('snow.gif');
background-repeat: no-repeat;
min-height:100%;
background-position: center center;
background-size: auto 100%;
background-attachment: fixed;
}
center a {
padding: 10em 0 0;
}</style>
<body>
<a class="bg" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>
</body>
</html><center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center><a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a><html>
<title>site</title>
<style>.wrapper {
min-height: 100%;
display: block;
height:auto;
}
/* если .wrapper должно быть мин. высоты 100%, тогда да, min-height: 100%;. Но если задаться целью сделать резиновый wrapper, тогда просто, height:auto;, без min-height. Если фотка меньше чем высота экрана, тогда всё влезет. Если больше, тогда падо для неё ставить ограничение по высоте. И зачем ставить vh, height:100vh;, оно ни к чему, в % или px, vh в конечном результате никакой роли не сыграет. Вернее сыграет, но можно обходится и % px. vh мало где используется. А если используется то так надо. А просто лепить где прийдётся vh не надо. Для этого есть % и px. Что не так? Почему не получается? Если это надо вставить на сайт, тогда смотрите другие блоки и стили. Что мешает. Если же просто без сайта, тогда не понятно почему не выходит. Если просто, то не должно не выходить.*/
.header {
width:100%;
height:100px;
background:red;display: block;
}
.content {
display: block;
height:auto;
}
.content img{
width:auto;
max-width: 100%;
height:auto;
display: block;
}
.footer {
width:100%;
height:100px;display: block;
background:green;
}</style>
<div class="wrapper">
<div class="header"></div>
<div class="content">
<img src="https://w.forfun.com/fetch/71/71f0c755f4b257fb9987c25743d16388.jpeg">
</div>
<div class="footer"></div>
</div><html>
<title>site</title>
<style>
.bg {
width: 100%;
height: 100%;
left: 0;
position: fixed;
display: block;
}
.bg img {
width: auto;
height: 100%;
margin: 0 auto;
display: block;
}
.bg a {
width: 100%;
height: 100%;
display: block;
}
.button {
border: 1px solid #000;
width: 10%;
height: 50px;
}
a, center {
position: relative;
display: block;
}</style>
<body>
<div id="bg" class="bg"><a href="javascript:void(0)" onclick="location.href='https://site.com'"><img src="snow.gif" alt=""></a></div>
<a class="button" href="javascript:void(0)" onclick="location.href='https://site.com'"></a>
<center><a href="javascript:void(0)" onclick="location.href='https://site.com'">
<img class="img-responsive" display="block" src="a.png" height="83" width="340"></a></center>
</body>
</html>#canvas {cursor: pointer;} Не понятно, к чему это всё. Тем более что это не работает. А если указывать путь то полный путь до корневой папки. kaliboba, укажи полный путь до корневой папки. #b1,#b4,#b5,#b6,#b3,#b2{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
.cat-all,.mcat-all,.misk,.men1,.msor,.isk{width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
div.open {
display: block;
}<div id="b3"><div>b3</div></div>
<div id="b2">b2</div>
<div id="b1">b1</div>
<div id="b4"><span>b4</span></div>
<div id="b5">b5</div>
<div id="b6">b6</div>
<br><br><br>
<div class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="misk">block button 3</div>
<div class="men1">block button 4</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>let open;
const rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
addEventListener( 'click' , ({target}) => {
if(target.closest('.open')) return;
let item = rels.find(([selector, ..._]) => target.closest(selector));
if(item) {
item = document.querySelector(item[1]);
if(!item) return;
item.classList.toggle('open');
}
if(open && open != item) open.classList.remove('open');
open = item;
})