-1
У меня возникли проблемы с получением этого изображения баннера под моей панелью nab, чтобы он соответствовал правилу, а также для ответа на ширину экрана. Кажется DIV я использую, чтобы установить баннер фонового изображения дублируются или что-то здесь есть снимок экрана ...Почему это дублирование DIV?
Это же изображение в два раза.
Вот мой код:
<!DOCTYPE html>
<html>
\t <head>
<title>Vector Games</title>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" type="text/css" href="homecss.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<head>
<style>
body{
\t margin: 0;
\t padding: 0;
\t font-family: sans-serif;
}
header{
\t background-image: url('cubes.png');
\t width: 100%;
\t padding: 15px 0;
\t color: #49ac6f;
\t text-align: center;
\t font-size: 20px;
}
a{
\t text-decoration: none;
\t color: inherit;
}
nav ul{
\t background-color: #a2a2a2;
\t overflow: hidden;
\t color: white;
\t padding: 0;
\t text-align: center;
\t margin: 0;
\t -webkit-transition: max-height .4s;
\t -ms-transition: max-height .4s;
\t -moz-transition: max-height .4s;
\t -o-transition: max-height .4s;
\t transition: max-height .4s;
}
nav ul li:hover{
\t background-color: #49ac6f;
}
nav ul li{
\t display: inline-block;
\t padding: 20px;
}
.handle{
\t width: 100%;
\t font-size: 24px;
\t background: #a2a2a2;
\t text-align: right;
\t box-sizing: border-box;
\t padding: 15px 10px;
\t cursor: pointer;
\t display: none;
}
@media screen and (max-width: 650px){
\t nav ul{
\t \t max-height: 0;
\t }
\t .showing{
\t \t max-height: 21em;
\t }
\t nav ul li{
\t \t box-sizing: border-box;
\t \t width: 100%;
\t \t padding: 15px;
\t \t text-align: left;
\t }
\t .handle{
\t \t display: block;
\t }
}
.banner{
\t width: 100%;
\t margin: 0 auto;
\t padding-top: 1000px;
\t background-image: url('banner1.png');
}
</style>
<body>
\t <header>
<h1>Vector Games</h1>
<img src="logo.png" alt="logo"/>
</header>
\t <nav>
\t <ul>
\t <a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Racing</li></a>
<a href="#"><li>Arcade</li></a>
<a href="#"><li>Strategy</li></a>
<a href="#"><li>Puzzle</li></a>
<a href="#"><li>Sport</li></a>
</ul>
<div class="handle">
☰
</div>
</nav>
<div class="banner">
</div>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
<div class="banner">
</div>
</body>
</html>О, а также, как я был бы в состоянии сделать изображение под моим набом бара отзывчивые, как мне нужно это масштабируемый как навигационная панель. Нужно ли настраивать медиа-запросы?
спасибо, Микроэлементов
Задайте один вопрос в то время, пожалуйста, вы не получите лучшие ответы, делая все в одном:) ... – Michelangelo