Оцените код html и css. Можно ли так делать?

Question

Даниил Секретов @DannYLook

Программист

Оцените код html и css. Можно ли так делать?

Хочу узнать ваше мнение о моем коде. Весь сайт написан немного не стандартно, списками, а именно:

<ul class="slider_ul">
      <li class="slider_arrow_one"> < </li>
      <img src="media/photo.jpg" class="slider_img">
      <li class="slider_arrow_two"> > </li>
      <ul class="slider_ul_ul"> 
        <li class="slider_description">Описание Описание Описание Описание Описание Описание ...</li>
        <button class="default_button">Далее</button>
        <li class="slider_ul_ul_text">Рейтинг 4/5</li>
      </ul>
    </ul>

И вроде бы так гораздо быстрее получается писать код с минимальным использованием css. Что получилось из этого блока:

Вес код будет в комментариях (сайт пока не адаптировал).

Не видел, чтобы так кто-то делал, но как по мне интересная штука.

Вопрос задан 13 часов назад
90 просмотров

3 комментария

Подписаться 1 Простой 3 комментария

Даниил Секретов @DannYLook Автор вопроса

<body>
  <div class="container">

  <header>

    <div>

      <ul class="header_ul">
        <img src="media/logo.png" class="logo">
        <li class="header_li"><a>Регистрация</a></li>
        <li class="header_li"><a>Личный кабинет</a></li>
        <li class="header_li"><a>О нас</a></li>
        <li class="header_li"><a>Контакты</a></li>
        <li class="header_li"><a>Поиск</a></li>
        <li class="header_li"><a>Наши экскурсии</a></li>
      </ul>

    </div>
  </header>

<main>

  <div>
    
    <ul class="slider_ul">
      <li class="slider_arrow_one"> < </li>
      <img src="media/photo.jpg" class="slider_img">
      <li class="slider_arrow_two"> > </li>
      <ul class="slider_ul_ul"> 
        <li class="slider_description">Описание Описание Описание Описание Описание Описание ...</li>
        <button class="default_button">Далее</button>
        <li class="slider_ul_ul_text">Рейтинг 4/5</li>
      </ul>
    </ul>


    <ul class="registration_ul">
      <ul>
        <form>
          <input type="text" placeholder="Email" class="default_input">
        </form>
        <form class="form_two">
          <input type="text" placeholder="Email" class="default_input">
        </form>
        <ul class="registration_ul_ul">
          <a class="help_pasword">Забыл пароль</a>
          <button class="default_button">Войти</button>
        </ul>
      </ul>


      <ul class="description_ul">
        <li>О нас</li>
        <br/>
        <li>Наш слоган:</li>
        <br/>
        <li>Описание</li>
      </ul>
    </ul>

  </div>
  <div>
    <p class="instructions_p">Наши инструкции</p>
    <ul class="ul_instructions_find">
      <form>
        <input type="text" placeholder="Поис инструкции" class="default_input">
        <button class="default_button ul_instructions_find_button">Поиск</button>
      </form>
    </ul>

    <div>

      <ul class="card_ul">
        <div class="card_fon">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>

        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        
      </ul>


      <ul class="card_ul_two">
        <div class="card_fon">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>

        <div class="card_fon card_left">
          <p class="card_text_name">Название</p>
          <img src="media/photo.jpg" class="card_img">

          <p class="card_text_description">Описание ..................................
            <br/>...........................................................</p>
          <p class="card_text_description_two">Продолжительность 7 дней; 
            <br>
            Кол-во бронирований: 10; 
            <br>
            Рейтинг 3/5
          </p>


          <button class="card_button">Забрноировать</button> 

        </div>
        
      </ul>

      <div class="card_fon_last">
        <p class="card_text_name">Название</p>
        <img src="media/photo.jpg" class="card_img">

        <p class="card_text_description">Описание ..................................
          <br/>...........................................................</p>
        <p class="card_text_description_two">Продолжительность 7 дней; 
          <br>
          Кол-во бронирований: 10; 
          <br>
          Рейтинг 3/5
        </p>


        <button class="card_button">Забрноировать</button> 

      </div>
    </div>


    <div>
      
        <p class="reviews_text_main">Отзывы клиентов</p>
        <div class="reviews_card_fon">
                <img src="media/face.jpg" class="reviews_photo">
                <p class="reviews_card_name">Даниил</p>
                <p class="reviews_card_description">Описание, описание, описание, описание, описание, описание, описание...</p>
                <ul class="reviews_ul-ul">
                  <p class="slider_arrow_three"><</p>
                  <p class="slider_arrow_four">></p>
                </ul>
                <p class="reviews_card_link">Ссылка на описание экскурсии<p/>
                <p class="reviews_card_date">10.11.2024<p/>
        </div>
        
        <ul class="send_ul">
          <p class="send_text_main">Новости сервиса</p>
          <form>
            <input type="text" placeholder="Поис инструкции" class="default_input">
            <ul class="send_ul_ul">
              <button class="send_button"></button>
              <p>Согласие на оброботку персональных данных</p>
            </ul>
            <button class="default_button">Подписаться</button>
          </form>
        </ul>

    </div>
  </div>
  </main>
</div>
<footer class="footer_fon">
  <ul class="footer_ul">
    <p class="footer_text_one">Главная</></p>
    <p class="footer_text_Two">Ригистрация</p>
    <p class="footer_text_Three">Личный кабинет</p>

  </ul>

  <ul class="footer_ul_two">
    <p class="footer_text_one">О нас</></p>
    <p class="footer_text_Two">Контакты</p>
    <p class="footer_text_Three">Поиск</p>
    <p class="footer_text_Four">Наши экскурсии</p>

  </ul>

  <ul class="footer_three">
    <p class="footer_text_one">+7 (353) 123-45-67</></p>
    <p class="footer_text_Two">info@moscow.ru</p>

  </ul>
</footer>
</body>

Написано 13 часов назад

Даниил Секретов @DannYLook Автор вопроса

* {
  background: #1e1a1a;
  color: #ffffff;
  font-size: 20px;
  
}

.container {
  padding: 0 110px
}

.logo{
  width: 90px;
  height: 50px;
  margin-right: 35px;
  margin-top: -15px;

}

.header_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 35px;
}
.header_li {
  margin-right: 45px;
  cursor: pointer;
}

.slider_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 60px;
}

.slider_img {
  max-width: 680px;
  max-height: 350px;
  margin-left: 20px;
}
.slider_arrow_one {
  font-size: 70px;
  margin-top: 120px;
  cursor: pointer;
}

.slider_arrow_two {
  font-size: 70px;
  margin-left: 20px;
  margin-top: 120px;
  cursor: pointer;
}

.slider_ul_ul {
  list-style: none;
  margin-top: 80px;
}
.default_button {
  border: none;
  text-decoration: none;
  background: #0B63F6;
  width: 150px;
  height: 45px;
  cursor: pointer;
}
.slider_description {
  padding-bottom: 45px; /* оступ вниз */
}

.slider_ul_ul_text{
  color: #fff905;
  margin-top: 50px;
}

.registration_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 60px;
}
.registration_ul_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 15px;
}
.default_input {
  width: 330px;
  height: 55px;
  background-color: #3b3b3f;
  outline: none;
  border: none;
}
.default_input::placeholder {
  color: #676565; /* Цвет текста-заполнителя */
}

.form_two {
  margin-top: 15px;
}

.help_pasword {
  font-size: 13px;
  color: #0300ff;
  text-decoration: underline;
  margin-top: 10px;
  margin-right: 50px; /* отступ вправо след элимента*/
  cursor: pointer;

}

.description_ul {
  list-style: none;
  margin-left: 350px;
}

.instructions_p {
  text-align: center;
  margin-top: 70px;
  font-size: 30px;
}
.ul_instructions_find {
  list-style: none;
  margin-top: 25px;
}
.ul_instructions_find_button {
  margin-left: 100px;
}

.card_ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    
}
.card_ul_two {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-top: 80px;
}
.card_fon {
  height: 700px;
  width: 330px;
  background-color: #3b3b3f;
  position: relative;
  
}

.card_fon_last{
  height: 700px;
  width: 330px;
  background-color: #3b3b3f;
  position: relative;
  margin-top: 80px;
  margin-left: 390px;
}

.card_text_name {
  position: absolute;
  background-color: #3b3b3f;
  left: 120px;
  margin-top: 11px;
  font-size: 25px;
}
.card_img {
  width: 300px;
  height: 200px;
  margin-top: 50px;
  margin-left: 15px;
}

.card_text_description {
  background-color: #3b3b3f;
  margin-left: 15px; 
}


.card_text_description_two {
  background-color: #3b3b3f;
  margin-left: 15px; 
  margin-top: 160px;
}

.card_button {
  border: none;
  text-decoration: none;
  background: #0B63F6;
  width: 330px;
  height: 60px;
  cursor: pointer;
  margin-top: 75px;
  text-align: center;
}
.card_left {
  margin-left: 60px;

}

.reviews_text_main {
  font-size: 25px;
  margin-top: 120px;
  margin-left: 80px;
}
.reviews_card_fon{
  height: 560px;
  width: 320px;
  background-color: #3b3b3f;
  position: relative;
}
.reviews_photo {
  width: 100px;
  height: 100px;
  margin-top: 25px;
  margin-left: 114px;
  
}

.reviews_card_name{
  background-color: #3b3b3f;
  text-align: center;
}

.reviews_card_description{
  background-color: #3b3b3f;
  text-align: center;
  margin-top: 55px;
}
.reviews_card_link {
  background-color: #3b3b3f;
  font-size: 16px;
  color: #0e2af3;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 20px;
  margin-top: 0px;
}
.reviews_card_date{
  background-color: #3b3b3f;
  font-size: 18px;
  margin-left: 20px;
  margin-top: -5px;
}

.reviews_ul-ul{ 
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #3b3b3f;
}
.slider_arrow_three {
  font-size: 65px;
  margin-top: 30px;
  margin-left: -60px;
  cursor: pointer;
}

.slider_arrow_four {
  font-size: 65px;
  margin-left: 365px;
  margin-top: 30px;
  cursor: pointer;
}
.send_text_main{
  font-size: 25px;
}
.send_ul_ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.send_button{
  width: 25px;
  height: 25px;
  background-color: #3b3b3f;
  cursor: pointer;
  border: none;
  text-decoration: none;
  margin-top: 18px;
  margin-right: 10px;
}
.send_ul{
  margin-left: 600px;
  margin-top: -635px;
}
.footer_fon{
  width: 100%;
  height: 300px;
  background-color: #3b3b3f;
  margin-top: 570px;
  position: relative;

}

.footer_text_one{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 40px;

}
.footer_text_Two{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 80px;
}
.footer_text_Three{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 120px;
}
.footer_ul {
  cursor: pointer;
}
.footer_ul_two {
  margin-left: 290px;
  cursor: pointer;
}

.footer_text_Four{
  position: absolute;
  background-color: #3b3b3f;
  font-size: 25px;
  margin-top: 160px;
}
.footer_three{
  margin-left: 800px;
  cursor: pointer;
}

Написано 13 часов назад

Сергей delphinpro @delphinpro Куратор тега Вёрстка

Прямым потомком UL/OL может быть только LI

Написано 13 часов назад

Пригласить эксперта

Ответы на вопрос 4

4 комментария

Сергей delphinpro @delphinpro Куратор тега Вёрстка

это кривая экономия на спичках.

А в чём экономия? Я что-то не уловил.

Написано 13 часов назад
Алексей Уколов @alexey-m-ukolov

Сергей delphinpro, автор утверждает, что у него так быстрее получается писать CSS. Так-то, конечно, никакой экономии нет.

Написано 12 часов назад
Сергей delphinpro @delphinpro Куратор тега Вёрстка

Алексей Уколов, =) тогда можно порекомендовать ему использовать однобуквенные теги, например <i>. Все равно на семантику и валидность положен болт.

Написано 12 часов назад
Aetae @Aetae

Сергей delphinpro, можно камтомный тег x использовать. Не менее семантично чем div и на буквах экономия:)

Написано 2 часа назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

Вёрстка

+1 ещё

Простой
Как правильно должна масштабироватся верстка сайта на десктопе?
- 1 подписчик
- 21 дек.
- 113 просмотров
1

ответ
CSS

+1 ещё

Простой
Как сделать обтекание одного блока другим CSS?
- 1 подписчик
- 01 дек.
- 127 просмотров
0

ответов
HTML

+3 ещё

Простой
Как правильно сделать наложение блоков друг на друга?
- 1 подписчик
- 30 нояб.
- 125 просмотров
1

ответ
HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- 26 нояб.
- 109 просмотров
1

ответ
Вёрстка

Простой
Как раздвинуть элементы в шапке сайта?
- 1 подписчик
- 10 нояб.
- 76 просмотров
1

ответ
Веб-разработка

+2 ещё

Простой
Что нужно знать веб-дизайнеру о вёрстке, чтобы адекватно коммуницировать с разработчиком сайта / верстальщиком?
- 1 подписчик
- 06 нояб.
- 583 просмотра
4

ответа
CSS

+2 ещё

Простой
Как исправить не корректное изменение свойства display css?
- 1 подписчик
- 25 окт.
- 94 просмотра
1

ответ
CSS

+1 ещё

Простой
Как сделать пропорциональное масшабирование блока?
- 1 подписчик
- 25 окт.
- 140 просмотров
1

ответ
Вёрстка

Средний
Что за баг с дублированием контента?
- 1 подписчик
- 23 окт.
- 107 просмотров
1

ответ
Показать ещё Загружается…

WEB-разработчик

TravelLine

До 70 000 ₽

Fullstack на Wordpress

SilverDuck

от 100 000 ₽

Frontend разработчик (React) One Day Offer

Ревамп АйТи

До 40 000 ₽

Исправить ошибки в консольном интерфейсе с применением C# и NET

28 дек. 2024, в 22:21

500 руб./за проект

Сделать бота

28 дек. 2024, в 21:56

25000 руб./за проект

Доработка Битрикс

28 дек. 2024, в 18:50

1200 руб./в час

Прямым потомком UL/OL может быть только LI

Answer 1 · 2024-12-28 19:12:02

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

Answer 2 · 2024-12-29 07:00:25

У каждого тега в HTML есть свое назначение. У некоторых есть строгая семантика среди них как раз ul ol li. Этими тегами оформляются списки. Список ссылок может быть навигацией по сайту, тогда ОК, но они должны быть внутри семантического тега nav. В некоторых случая слайдер может быть списком картинок, если это оправдано с точки зрения смысла. В общем почитайте доку по семантическим и не семантическим тегам HTML. Это действительно важная тема, от этого зависит то, как видят вашу страницу поисковые роботы.

Answer 3 · 2024-12-28 19:16:26

Так лучше не писать. Как по мне, такой код выглядит не очень красиво и в тегах списков не должно быть ничего кроме тегов элементов списка. Можно сделать например так:

<div class="slider">
    <div class="slider-left">
      <button class="arrow-left">&lt;</button>
      <img class="slider-image" src="media/photo.jpg" alt="">
      <button class="arrow-right>&gt;</button>
    </div>
    <div class="slider-right">
      <p class="slider-description">Описание Описание Описание Описание Описание Описание ...</p>
      <button class="slider-button">Далее</button>
      <p class="slider-text">Рейтинг 4/5</p>
    </div>
  </div>

Answer 4 · 2024-12-28 19:26:37

для проверки html можешь использовать https://validator.w3.org/
а для css https://jigsaw.w3.org/css-validator/#validate_by_u... (лично не использовал)

Оцените код html и css. Можно ли так делать?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт