Адаптивный вид материалов для uCoz на CSS | |
| Простой по стилистике вид материалов на одну колонку, что адаптирован под мобильные аппараты. И подойдет на любой тематический светлый сайт. Здесь все сделано очень просто и понятно, это вывод изображение, что будет автоматически становится под любой шаблон, это как с большой фиксаций и есть небольшая, где веб мастеру не нужно подгонять. Но главное это подача информации, что сделано прекрасно, где корректно выводит картинку, но и без эффектов не обошлось, они больше сделаны для красоты. Которые вы найдете на снимке, что перекреплен к материалу, также если вы будете наблюдать с мобильного телефона, где как понимаете экран будет не сильно широким. Вот как наз на нем и начнет работать адаптивность. Значимость заголовка, если он большой и в нем много знаков, то они автоматом будут переходить в многоточие, это только те буквы, что не будут влазить. Так что на любом размере как монитора или экраны изначально все в стилистике установлено. Вам только останется поставить шрифтовые кнопки, так как здесь они присутствуют, но и можно поиграть с палитрой цвета, так как все ресурсы разные и нужно сделать, так чтоб он смотрелся как одно целое на интернет порталом. Все было проверено на тестовом сайте, где убраны лишние элементы, чтоб оставить только востребованную информацию. У всех по умолчанию:  Примерно на смартфоне:  Мобильная версия:  HTML Код <div class="saheavy_gexpensem"> <div class="kaslargen_gastooles"> <?if($IMG_URL1$)?> <img src="$IMG_URL1$" class="amplitudes_gdersavermin"/> <?else?> <img src="https://zornet.ru/ZORNET-RU/ZR/niBj9DQDTV_GoFha4g1TLA.png" class="amplitudes_gdersavermin"/> <?endif?> </div> <a href="$ENTRY_URL$"><h4 class="kosresources">$TITLE$</h4></a> <span class="bigenses"><i class="fa fa-calendar icons"></i> Дата файла : $DATE$</span> <div class="greater_pudendum"> <p class="adeflectedun_angles"> $MESSAGE$ </p> </div> </div> CSS Код .saheavy_gexpensem { padding: 19px; border: 0px solid rgba(54, 64, 74, 0.02); border-radius: 5px; margin-bottom: 18.5px; background-clip: padding-box; background-color: #f3f3f3; box-shadow: 0 0 9px 1px rgba(101, 95, 95, 0.71); } a { text-decoration: none; } .kosresources {margin-bottom: 12px !important;color: #4a4141 !important;font-weight: 700;text-decoration:none;font-size: 17px;overflow: hidden;height: 18px;line-height: 15.9px;white-space: nowrap; overflow: hidden; padding: 0px; text-overflow: ellipsis;} .kosresources:hover { color : #454647 !important; text-decoration:none; } .bigenses { font-size : 12.3px ; margin-top: 0px !important; color : #f5f2f2; font-weight: 300; background-color: #12a70d; padding: 2px; border-radius: 2px; padding-right: 10px; padding-left: 10px; } .amplitudes_gdersavermin { border-radius : 5px 5px 3px 3px; margin-bottom: 10px !important; width:100%; height:209px; } .adeflectedun_angles { font-size : 15px !important; margin-top: 9px !important; margin-bottom: 4.7px !important; color: #5e6266 !important; } .kaslargen_gastooles:hover img { opacity: 0.7; -webkit-filter: grayscale(1); filter: grayscale(1); } .kaslargen_gastooles img { transition: all .3s cubic-bezier(0.25, 0.1, 0.18, 0.99); -webkit-transition: all .3s cubic-bezier(0.25, 0.1, 0.2, 0.89); -moz-transition: all .3s cubic-bezier(0.25, 0.1, 0.23, 0.9);} .greater_pudendum { overflow: hidden; height: 83px; line-height: 23px; } .icons { padding-right: 3.8px; } .portunitys:nth-child(even) { margin-right: 3.8%; } @media (max-width: 500px) { .portunitys { width: 100%; } .portunitys:nth-child(even) { margin-right: 0%; } } На обновленных браузерех, нужно после установки почистить историй, что после этого смотреть как вид установился на площадку. Источник: www.7uarts.ga | |
25 Января 2018 Просмотров: 2214
Поделиться в социальных сетях
Материал разместил
