$(window).scroll(function(){
if($(this).scrollTop() > 1){
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
});
<form >
<input type="radio" name="name" id="r-1" class="input" checked>
<input type="radio" name="name" id="r-2" class="input">
<input type="radio" name="name" id="r-3" class="input">
<label for="r-1" class="label l-1">Текст 1</label>
<label for="r-2" class="label l-2">Текст 2</label>
<label for="r-3" class="label l-3">Текст 3</label>
</form>
.label {
display: none;
}
#r-1:checked~.l-1,
#r-2:checked~.l-2,
#r-3:checked~.l-3{
display: block;
}
Какие есть нюансы?
.header
, .footer
, .main
.width: 1000px;
на max-width: 1000px; width: 100%;
.@media screen and (max-width: XXpx ) { ... }
, лучше, конечно, @media screen and (min-width: XXpx ) { ... }
, либо применять ширину в %, где есть возможность.img { max-width: 100%; width: 100%; height: auto; }
* Текст
    * Текст     
* Текст
<br/>
<br/>
* Текст
<br/>
<br/>
<div class="wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
.box-1 {
width: 5rem;
height: 10rem;
background: #000;
}
.box-2 {
width: 10rem;
height: 5rem;
border: .25rem solid #000;
margin-left: -5px;
}
.box {
display: inline-block;
vertical-align: middle;
}
<div class="wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
.box-1 {
width: 5rem;
height: 10rem;
background: #000;
}
.box-2 {
width: 10rem;
height: 5rem;
border: .25rem solid #000;
}
.wrap {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
<div class="wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
.box-1 {
width: 5rem;
height: 10rem;
background: #000;
}
.box-2 {
width: 10rem;
height: 5rem;
border: .25rem solid #000;
margin-top: 2rem;
}
.box {
float: left;
}
h1>a>img^^span.tel{123-456-7890}
<h1><a href=""><img src="" alt=""></a></h1>
<span class="tel">123-456-7890</span>
h1>a>img^span.tel{123-456-7890}
<h1><a href=""><img src="" alt=""></a>
<span class="tel">123-456-7890</span>
</h1>