<div class="header">HEADER</div>
<div class="content">
<div class="left">MENU</div>
<div class="data">DATA</div>
<div class="right">SIDEBAR</div>
</div>
<div class="footer">FOOTER</div>html,
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 150px;
background:red;
}
.content { font-size:0px; }
.left,
.right,
.data {
display:inline-block;
height:200px;
}
.left { width:20%; background:green; }
.right { width:20%; background:green; }
.data { width:60%; background:blue; }
.footer {
width: 100%;
height: 100px;
background:yellow;
}/* --- RESET ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
* {
border:0;
margin:0;
padding:0;
outline: none;
border-collapse: collapse;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
}
:focus {
outline:none;
box-shadow:none;
border-color:transparent;;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; }
body { line-height: 1; }
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; }
ol, ul { }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ''; content: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
a img { border: none; }
input, textarea{
-webkit-appearance: none;
}img {
width:100%; - заполняет всю область
height:auto; - сохраняет пропорцию
max-width:150px; - не больше этой величины по ширине
}width:100%;
height:auto;
border:none;
vertical-align:bottom;.abs {
position: absolute;
height: 50px;
width: 50px;
background: black;
bottom: 0;
color: #fff;
left:50%;
margin-left:-25px;
}$("a span").hover(
function() {
$( this ).parent().addClass('hover');
}, function() {
$( this ).parent().removeClass('hover');
}
);a.hover {
color: #4ec7e5 !important;
transition: 0.5s ease;
border-top: 1px solid red;
border-bottom: 1px solid red;
}<select name="offer_list" class="offer_list">
<option value="990 Р">Fullips Small Oval - "Маленький овал": 990 Р.</option>
<option value="990 Р.">Fullips Medium Oval - "Средний овал": 990 Р.</option>
<option value="3">3</option>
</select>
<span class="oldprice">Старая цена:<span> 1980 Р.</span></span>
<span class="newprice">Новая цена:<span></span></span><script>
// инициализация значения при открытии - первое - естественно
$('span.newprice').find('span').text($("select option:selected").val());
// если происходит изменение значения
$( "select.offer_list" ).change(function() {
$('span.newprice').find('span').text($("select option:selected").val());
});
</script>