Jump to content

Оцените первый сайт


Odinokiy_volk
 Share

Recommended Posts

Сайт https://knyaz85.github.io/

Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов

Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др.

Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер..

Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)

Link to comment
Share on other sites

Вообще класс .container , воспринимается как контейнер из бутстрапа. 

.clear::before, .clear::after {

content: "";

display: table;}

.clear::after{

clear:both}

, нужно для того чтобы дочерние элементы(у элемента с классом .clear), которые float`ятся, не портили верстку. В противном случае оно не нужно.

Мне кажется лучше смотреть как делают профи, простую верстку, чем самому изобретать велосипед. Ну и месяцы(годы) изучания html, css нужны. Опыт реально сверстанных страниц и пройденные грабли.

 

Edited by andrew312
Link to comment
Share on other sites

andrew312, Почти все сделано на основе руководства Шэя Хоу, переведенного Владом Мержевичем https://webref.ru/layout/learn-html-css.

Там советуется все элементы где применяется float, а также элементы которые их обтекают брать в группу очистки содержимого float (в моем примере .clear) НА ВСЯКИЙ СЛУЧАЙ, даже если бы другие элементы до или после нее не смогли бы испортить верстку в результате, обтекая элемент с float. Как я понял это делается ВСЕГДА для страховки чтоб точно быть уверенным что верстка не испортиться.

Что-то свое я конечно тоже добавил, например не знал как на одной строке одновременно расположить часть текста выровненной по левому краю, а часть по правому потому и применил позиционирование, получилось может быть не совсем правильно. Ну и другие подобные мелочи.

В общем, спасибо за критику!

 

Link to comment
Share on other sites

  On 1/28/2018 at 12:46 PM, Odinokiy_volk said:

Там советуется все элементы где применяется float, а также элементы которые их обтекают брать в группу очистки содержимого float (в моем примере .clear) НА ВСЯКИЙ СЛУЧАЙ

 

Expand  

Смотри как в бутсрапе 3 применяется способ clear:both, для блоков у которых дочерним может оказаться элемент с .col.

<div class="conatiner">
    <div class="row">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
    <div class="col1"></div>
    <div class="col2"></div>
</div>

.col* -floatятся. А container и row ихние родители. Поэтому к ним применяются выше приведенные свойства. Куда попало clearfix в бутстрапе не суют, а он сделан профессионалами.

 

Link to comment
Share on other sites

В моем случае clearfix применяется к header и footer, если ты обратишь внимание)) они как раз выступают здесь вместо container и row.. как раз внутри header и footer расположены элементы c float и обтекаемые их элементы - в моем случае картинки и меню..  то есть к родителям header и footer у которых дочерние элементы флотятся я и применяю .clear  

а колонки уже в секции .container безо всякого флота.. расположены как строчно-блочные элементы с шириной в процентах поэтому там и нет .clear для .section

и кстати.. с бутстрапом я еще не работал но мне кажется для семантики лучше использовать section aside article чем бесконечные div

 

Link to comment
Share on other sites

  On 1/28/2018 at 4:13 PM, Odinokiy_volk said:

В моем случае clearfix применяется к header

 

Expand  

<header class="clear container">
    
      <a href="index.html"><img height="150" src="assets/images/logo.jpg" alt="Логотип (мое фото)"></a>
      
      <a href="index.html"><h1>В облаке медиа</h1></a><br>
      
      <nav class="nav primary-nav">
        <a href="index.html">Главная</a>
        <a href="photo.html">Фото</a>
        <a href="video.html">Видео</a><br>
        <div class="line-bottom-nav">
          <a href="calendar_pfc_cska.html">Календарь ПФК ЦСКА</a>
          <a href="it_instructions.html">IT-инструкции</a>
          <a href="website_development.html">Создание сайта</a>
        </div>
      </nav>
      
    </header>

Какой у тебя дочерний элемет header флоатится? Ты не путаешь вложенный элемент и дочерний?

Link to comment
Share on other sites

 <a href="index.html"><img height="150" src="assets/images/logo.jpg" alt="Логотип (мое фото)"></a>

header img {
    border-radius: 50%;
    margin: 5px;
    float: left;
}

h1 и nav обтекают img справа

поэтому для header применяется .clear

Link to comment
Share on other sites

  On 1/28/2018 at 4:28 PM, Odinokiy_volk said:

header img {
    border-radius: 50%;
    margin: 5px;
    float: left;
}

Expand  

Вот я тебе и говорю, не путай вложенный селектор (header img) и дочерний(header>img). claerfix применяется только к элементу у которого дочерний флоатится.

 

Edited by andrew312
Link to comment
Share on other sites

  On 1/28/2018 at 4:40 PM, Odinokiy_volk said:

хз мне казалось это не имеет значения.. значит надо просто применить флот к ссылке в которую обернут img

Expand  

Да.

Вот я developers tools смотрю размер ссылки header>a  и он показывает 0х0. Теперь я добавил ссылке класс .clear и он мне показывает размер a.clear 900х160. Вот зачем нужно .clear добавлять. Чтобы родитель не страдал за флоаты ребенка.

Правда теперь у тебя все верстка поехала из-за того что я правильно сделал))

Link to comment
Share on other sites

  On 1/28/2018 at 4:51 PM, Odinokiy_volk said:

Как все сложно)) ладно, благодарю за критику)

Expand  

Пожалуйста. Правда не уверен что clearfix можно применять к ссылке(строчным элементам). Я применяю только к блочным.

Link to comment
Share on other sites

  On 1/28/2018 at 4:59 PM, Odinokiy_volk said:

 если для строчного элемента указать float, его значение display изменится на block 

https://webref.ru/layout/learn-html-css/positioning-content

 

Expand  

Тогда получается к img нельзя применять было float. Т.к. ты вложил блочный элемент в строчный, а так не рекомендуется делать. Хз не помню почему.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



    • By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy