Ответы пользователя по тегу HTML
  • Как сверстать такой блок?

    websitedev
    @websitedev
    Веб-разработчик. Разрабатываю сложные сайты.
    Алгоритм примерно такой — создаете один родительский div, которому присваивайте свойство display: flex, внутри этого div-а создаете 3 дочерних div-ов, которым присваивайте width: 33.333333%. Внутри этих div-ов размещаете изображения и тексты. Этим div-ам можете дать text-align: center, чтобы отцентрировать изображения и тексты.

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

    websitedev
    @websitedev
    Веб-разработчик. Разрабатываю сложные сайты.
    SELECT * FROM table;

    Потом полученные данные из БД крутите через цикл foreach, например,

    <table>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
      <?php foreach ($data as $item) {?>
      <tr>
        <td><?=$item['id']?></td>
        <td><?=$item['name']?></td>
      </tr>
      <?php }?>
    </table>
    Ответ написан
    1 комментарий
  • Как сделать ссылку в классе?

    websitedev
    @websitedev
    Веб-разработчик. Разрабатываю сложные сайты.
    Эти стили распространяются и на все li, которые находится внутри ulheader.

    ul.ulheader li a {
        position: relative;
        top: -20px;
        line-height: 80px; 
        padding: 0 20px; 
        height: 80px; 
        color: #777;
       -webkit-transition: all .1s ease-out;
       -moz-transition: all .1s ease-out;
       -ms-transition: all .1s ease-out;
       -o-transition: all .1s ease-out;
       transition: all .1s ease-out;
    }


    Нужно делать так, чтобы стили распространялись только на тех li, которые стоят на самом высоком уровне от родителя.

    ul.ulheader > li > a {
        position: relative;
        top: -20px;
        line-height: 80px; 
        padding: 0 20px; 
        height: 80px; 
        color: #777;
       -webkit-transition: all .1s ease-out;
       -moz-transition: all .1s ease-out;
       -ms-transition: all .1s ease-out;
       -o-transition: all .1s ease-out;
       transition: all .1s ease-out;
    }


    Смотрите готовый пример
    Ответ написан
    3 комментария