Абстрактный Вид материала файлов для uCoz
 | |
| Сейчас нет почти дизайнерских видов, просто стали шаблоны стандартные и вот под них Абстрактный Вид материала файлов для uCoz, где по дизайну он только под светлый ресурс интернета. Но если он настроен под файлы, то можно просто убрать пару кнопок, которые отвечают к примеру, сколько скачали и вот уже на статью или блог модуля отличное решение. Как можно заметить, картинка у него широкая а не та которым мы привыкли, маленькое окно и при клике увеличение, здесь такой функций нет, вы просто перейдете на основной материал. Проверил на сервис для мобильного устройства, ошибок нет, но просто немного его нужно доработать, чтоб все изображение были на одной ширине, что здесь не сделаешь, хотя и так можно. Вид: Код <div class="h_mtr"> <div class="h_mtr_in"> <div class="h_mtr_image"> <div class="h_mtr_image_over"><a href="$IMG_URL1$" class="ulightbox" target="_blank"><img src="$IMG_URL1$" alt="$TITLE$"></a></div> </div> <div class="h_mtr_content"> <h2 class="h_mtr_title"><a href="$ENTRY_URL$">$TITLE$</a></h2> <hr> <div class="h_mtr_date"> <span class="hm_d hm_date">$DATE$ в $TIME$</span> <span class="hm_d hm_user"><a href="$PROFILE_URL$">$USERNAME$</a></span> <span class="hm_d hm_views">$READS$</span> <span class="hm_d hm_comm"><a href="$COMMENTS_URL$">$COMMENTS_NUM$</a></span> <span class="hm_d hm_cat"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span> </div> <hr> <div class="h_mtr_text post-d">$MESSAGE$</div> <hr> </div> </div> </div> CSS: Код .h_mtr{margin-bottom:30px;} .h_mtr_in{display:table;width:100%;} .h_mtr_image{display:table-cell;vertical-align:top;width:300px;} .h_mtr_content{display:table-cell;vertical-align:top} .h_mtr_image_over{width:270px;height:230px;} .h_mtr_image_over{object-fit: cover; border: 4px solid #FCFCFC; box-shadow: 0px 0px 1px 1px #DDD;} .h_mtr_image_over img{width:270px;height:230px;object-fit:cover;} .h_mtr_image_over a:hover img{opacity:0.7;} .dir_foto_image{display:table-cell;vertical-align:top;width:825px;} .dir_foto{width:825px;height:470px;} .dir_foto img{width:825px;height:470px;object-fit:cover;} .dir_foto a:hover img {opacity:0.7;} .h_mtr_title{font-size: 19px; font-family: serif; font-weight: bold} .h_mtr_title_mat{font-size:20px;font-family:'Lora',sans-serif;font-weight:bold;margin-bottom:10px;} .h_mtr_text{text-align:justify;color:#636363;max-height: 110px; overflow: hidden;} .h_mtr_date{margin-top:12px;font-size:14px;color:#818181;} .h_mtr_date a{color:#818181} .hm_d{display:inline-block;padding-left:22px;padding-right:10px;} .hm_date{background:url('/Ajaxoskrip/Forma_skriptov/tygsa/i_time.png') 0px 1px no-repeat;} .hm_user{background:url('/Ajaxoskrip/Forma_skriptov/tygsa/i_user.png') 0px 1px no-repeat;} .hm_views{background:url('/Ajaxoskrip/Forma_skriptov/tygsa/i_views.png') 0px 1px no-repeat;} .hm_comm{background:url('/Ajaxoskrip/Forma_skriptov/tygsa/i_comm.png') 0px 1px no-repeat;} .hm_cat{background:url('/Ajaxoskrip/Forma_skriptov/tygsa/i_cat.png') 0px 1px no-repeat;}
На сайте, здесь изначально стоит этот код, просто он был доработан по дизайну. Как можно заметить, что основная картинка не растянута, и не доходит до конца. Но по гуглу дает добро, что все нормально. Просто нужно в стилях выставить стили по размерам. Сильно в этом не понимаю, как адаптируют, но здесь так же было и только стили исправили, это что под мобильное устройства, под все остальные, смотрится корректно по актуализаций. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 17 | |
|
| |
