1. не просто возможно, а так и делается
2. Согласен, лучше начинать с основ, HTML4 и CSS2, и дальше углубляться в HTML5, CSS3, LESS, SCSS, а не просто отсеять старое и смотреть новое, далее JS и jQuery, без него туго в верстке, а потом можно и бутстрап смотреть, сразу смотреть не советую, многие прыгают от него, хотя кроме кучи лишнего кода, особенно у новичков, он мало чего дает (лично сам верстаю без бутстрапа), дальше, чтобы адаптировать под CMS, нужно знать как устроена эта CMS и соответственно знать PHP, потому вообще без разницы какую выбирать. А вот про PHP не совсем верно, клиентская часть тоже состоит из PHP, поэтому его просто нужно изучать с основ и до паттернов проектирования.
А теперь по шаблону:
Во первых, чтобы в каждом блоке не писать margin & padding 0px, лучше просто в начале указать
* {
margin: 0;
padding: 0;
}
body{
font-size: 12px;
}
p, ol {
line-height: 180%;
}
.logo h1{
letter-spacing: -2px;
font-size: 3.6em;
}
nav a {
font-size: 16px;
}
чуется, что, что-то в будущем пойдет не так? px, %, px, em,.., правильней все размеры указывать в пикселях, если в чем то другом, то хотя бы, чтоб было, что-то одно, либо px, либо em и т.п. иначе жизнь превратиться в ад).
<div class="banner-wrap">
<div class="banner">
<div class="banner-img">
<img src="images/header-img.jpg" alt="Наш банер"/>
</div>
</div>
</div>
.banner-wrap{
width: 1160px;
margin: 0 auto;
}
.banner{
margin: 20px auto 50px auto;
}
.banner-img{
height: 500px;
border: 20px solid #FFFFFF;
}
Для чего столько оберток? Все вложенные div'ы по сути ничего не делают, проще:
<div class="banner">
<img src="images/header-img.jpg" alt="Наш банер"/>
</div>
.banner{
width: 1120px;
height: 500px;
margin: 20px auto 50px auto;
border: 20px solid #FFFFFF;
}
Кода меньше, результат такой же.
Вместо
ul .first {
//...
}
Лучше
ul.sidebar > li:first-child{
//...
}
далее
<article>
<ul class="content">
<li> <h3>Lorem ipsum dolor interdum</h3>
<p>Ut vel nisl tristique justo ornare iaculis. Suspendisse suscipit, orci ac interdum viverra, nulla orci facilisis mi, a ultrices mi lectus vitae felis. Morbi suscipit adipiscing orci et blandit. Morbi a nulla ut tellus blandit placerat a quis eros.</p>
<p><a href="#" class="button-style">Read More</a></p>
</li>
</ul>
</article>
Нонсенс, главный вопрос, зачем? зачем писать лишние теги, да и еще не подходящие по контенту, ul li это элемент списка, а тут статья, не нужно так делать, так нужно:
<article>
<h3>Lorem ipsum dolor interdum</h3>
<p>Ut vel nisl tristique justo ornare iaculis. Suspendisse suscipit, orci ac interdum viverra, nulla orci facilisis mi, a ultrices mi lectus vitae felis. Morbi suscipit adipiscing orci et blandit. Morbi a nulla ut tellus blandit placerat a quis eros.</p>
<a href="#" class="button-style">Read More</a>
</article>
и соответственно стили
article{
width:70%;
float: right;
margin:0px;
margin-top:-2px;
padding-top: 0px;
padding-bottom:16px;
border-bottom: 1px solid black;
}
article:last-child{
border: none;
}
article > h3{
font-size: 14px;
font-weight:200;
margin: 0;
color: #222222;
}
article > a:hover {
text-decoration: underline;
color: #6B6B6B;
}
.button-articles {
display: inline-block;
margin: 30px 0 12px 0;
padding: 7px 30px;
background: #36332E;
border-radius: 5px;
line-height: 21px;
}
ну это если не придираться к мелочам))
и напоследок:
- Сверстал вот такой "резиновый" шаблон
- ширину блоков указывал явно (в пикселях)
Если указал ширину явно, то это уже не резиновый шаблон)
Простой
Простой