Ответы пользователя по тегу CSS
  • Как сделать такую верстку?

    twentytvvo
    @twentytvvo
    если в кратце
    tr {
    border-bottom:1px solid white;
    }
    tr td:first-child {
    border-right:1px solid white;
    }
    tr:last-child  {
    border-bottom:none;
    }
    Ответ написан
    1 комментарий
  • Как сделать смену цвета кнопки и фона при наведение мыши?

    twentytvvo
    @twentytvvo
    C помощью псевдокласа :hover и селектора дочерных элементов ( > ) , создал вам пример:
    Ответ написан
  • Как разместить блоки как сетку?

    twentytvvo
    @twentytvvo
    Используй flex.
    <div class=“boxes”>
    <div class=“box”>
    <div class=“box”>
    <div class=“box”>
    <div class=“box”>
    <div class=“box”>
    <div class=“box”>
    <div class=“box”>
    <div class=“box”>
    </div>

    .boxes{display:flex;flex-wrap:wrap;}
    .box{width:25%;}/* таким образом выводим по 4 в линии */
    Ответ написан
    Комментировать
  • Как выровнять ссылки по центру?

    twentytvvo
    @twentytvvo
    <!-- Новый блок -->
      <nav id="top" class="navbar navbar-default navbar-full">
        <div class="container">
    <div>
          <div class="navbar-header">
          <div id="logo">
                                                      <a href="https://procraft.com.ua/"><img src="https://procraft.com.ua/image/catalog/main/logo_procraft.jpg" title="Procraft" alt="Procraft" /></a>
                                                </div> 
          </div>
     <ul class="nav navbar-nav">
              <li class="dropdown" id="contacts">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-mobile"></i> <span class="phone">098 187 4958 | 050 399 2808 | 093 170 5641</span> <span class="hidden-sm"> </span><i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                                                          <li class="dropdown-header keep-open">Телефоны</li>
                                                                                                      <li class="keep-open"><a target="_blank" href="tel:+380981874958"><i class="fa fa-lg fa-fw fa-phone"></i> 098 187 4958</a></li>
                                                                                                                    <li class="keep-open"><a target="_blank" href="tel:+380503992808"><i class="fa fa-lg fa-fw fa-phone"></i> 050 399 2808</a></li>
                                                                                                                    <li class="keep-open"><a target="_blank" href="tel:+380931705641"><i class="fa fa-lg fa-fw fa-phone"></i> 093 170 5641</a></li>
                                                                        </ul>
                          </li>
                      </ul>
          </div>
          <div class="collapse navbar-collapse navbar-top-collapse">
           
            <ul class="nav navbar-nav navbar-right">
                                                  <li><a target="_blank" href="all-feedback-procraft/"><i class="fa fa-fw fa-comment-o"></i> Отзывы</a></li>
                                                                                                              <li class="dropdown">
                      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa--"></i> Информация <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu dropdown-menu-left">
                                              <li><a href="garantija-i-servis-procraft/">Гарантия и сервис</a></li>
                                              <li><a href="oplata-i-dostavka-procraft/">Оплата и доставка</a></li>
                                          </ul>
                    </li>
                                                                  <li><a target="_blank" href="contacts-procraft/"><i class="fa fa-fw fa--"></i> Контакты</a></li>
                                                    <li><a target="_blank" href="statyi-procraft"><i class="fa fa-fw fa--"></i> Статьи</a></li>
                                    
                        <li class="dropdown" id="cart">
      <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" data-loading-text="Загрузка..." role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-fw fa-shopping-cart"></i><small class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><span class="fa-stack-1x">0</span></small> <span class="hidden-sm"><span id="cart-total">0 грн</span> <i class="fa fa-angle-down"></i></span></a>
      <ul class="dropdown-menu keep-open">
            <li>
                  <p class="text-center">В корзине пусто!</p>
              </li>
          </ul>
    </li>
                                  
              <li class="dropdown" id="top-links">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-bars"></i> <span class="hidden-lg hidden-md hidden-sm">Меню <i class="fa fa-angle-down"></i></span></a>
                <ul class="dropdown-menu keep-open">
                                <li>
      <form action="https://procraft.com.ua/index.php?route=common/language/language" method="post" enctype="multipart/form-data" id="form-language">
        <ul class="dropdown-menu">
          <li class="dropdown-header">Язык</li>
          <li class="hidden">
            <input type="hidden" name="code" value="" />
            <input type="hidden" name="redirect" value="https://procraft.com.ua/" />
          </li>
                <li class="active"><a href="javascript:void(0);" class="language-select" onclick="$('input[name=\'code\']').val('ru-ru'); $('#form-language').submit();">Русский</a></li>
                <li ><a href="javascript:void(0);" class="language-select" onclick="$('input[name=\'code\']').val('uk-ua'); $('#form-language').submit();">Українська</a></li>
              </ul>
      </form>
    </li>
    <li role="separator" class="divider clearfix"></li>
                                              <li class="dropdown-header">Личный кабинет</li>
                  <li><a href="https://procraft.com.ua/login/" rel="nofollow"><i class="fa fa-fw fa-sign-in"></i> Авторизация / Регистрация</a></li>
                                                                        </ul>
              </li>
              
                        <li class="dropdown visible-xs">
                <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="collapse" data-target=".navbar-menu-collapse"><i class="fa fa-fw fa-th-large"></i> Каталог товаров <i class="fa fa-angle-down"></i></a>
              </li>
                      </ul>
          </div>
        </div>
    
      </nav>
        <!-- Новый блок -->

    nav#top .container{display:flex;flex-direction:row;}
    @media screen and (max-width:1200px){
    nav#top .container{display:flex;flex-direction:column;}
      nav#top .container div{margin:0 auto;}
    }
    Ответ написан
    8 комментариев
  • Можно ли заменить HTML и CSS чем-нибудь еще и будет ли им замена в будущем?

    twentytvvo
    @twentytvvo
    Если я правильно понял вопрос, то сам кодинг можно заменить частично на конструкторы, а верстальщиков на дизайнеров владеющих этими конструкторами. Но только частично. Тильда этому пример.
    Ответ написан
    Комментировать
  • Можно ли сделать repeat для тега img?

    twentytvvo
    @twentytvvo
    Скажите пожалуйста, а для каких целей вам это нужно?
    Может все-таки будет проще использовать div с background-image, нежели такие лютые костыли?
    Ответ написан
  • Как сверстать данную секцию, чтобы она адаптировалась как на макете?

    twentytvvo
    @twentytvvo
    Разбейте левую часть с текстом и правую с формой на две колонки с flat:left; и на ПК width:50%, а на мобайле width:100%;5f65ed536c34b219079100.png
    Ответ написан
    Комментировать
  • Как сделать такое меню?

    twentytvvo
    @twentytvvo

    Простое решение, берите и стилизируйте просто под себя.
    Ответ написан
  • Как заставить блоки сжиматься равномерно?

    twentytvvo
    @twentytvvo
    Изначально используйте альтернативы единице масштаба px, например em, px, pt, эксперементируйте, что бы текст и блоки уменьшались пропорционально от размера окна и не были четко привязаны к пикселям.
    Ответ написан
    Комментировать