Всем приветы и ответы!
В сегодняшнем готовом решении для сайта, мы рассмотрим очередной пример оформление внешнего вида цитат!
Он самый простой и понятный!
HTML каркас
Собственно говоря простой и понятный каркас цитаты, в котором присутствует текст цитаты и его автор:
<div class="cell-quote">
<div class="cell-quote-text">
Если вы хотите быть более удачливым, делайте больше попыток.
</div>
<div class="cell-quote-avtor">Брайан Трейси</div>
</div>
CSS стили
А теперь необходимо в файле под названием style.css, установить в самый низ вот такой код:
/* Понятный для глаза вид цитаты
------------------------------------------*/
.cell-quote {
float:left;
padding:10px;
margin-bottom: 35px;
position:relative;
background:#f2f4f8;
}
.cell-quote-text{
float:left;
padding: 20px 20px 50px 20px;
border: 2px dashed #d1d6e0;
max-height: 200px;
overflow: auto;
font-family: Comic Sans MS, sans-serif;
font-size: 15px;
color:#555;
}
.cell-quote-avtor {
float:left;
bottom: 30px;
right: 35px;
position:absolute;
}
На этом у меня всё! Удачных решений!
А Вы оставите комментарий первым?