более чистый способ кодирования с тегами div?

0

Я пытаюсь использовать теги div вместо таблиц, чтобы мой контент был более мобильным. Тем не менее, я уверен, что есть более чистый способ кодирования того, что у меня есть (что действительно работает). Есть ли лучший способ сделать то, что я делаю?

<div style="text-align: center;">
  <span style="font-size:22px;"><strong>Lehigh Athletics Awards and Achievements</strong></span>
</div>
<hr />
<div style="text-align: center;">
  <span style="font-size:18px;">2014 Convocation Highlights</span>
  <br /> 
</div>
<div style="float: left; width: auto; margin-right: 14px; text-align: center;">
  <img style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/6/ProgramIcon.png" />
</div>
<div style="float: left; width: auto; margin-right: 14px; text-align: center;">
  <iframe width="300" height="169" src="//www.youtube.com/embed/fmyazgq2p7k" frameborder="0" allowfullscreen=""></iframe>
</div>
<div style="float: left; width: auto; text-align: center;">
  <iframe width="300" height="169" src="//www.youtube.com/embed/fmyazgq2p7k" frameborder="0" allowfullscreen=""></iframe>
</div>
<div style="clear:both;height:1em;"></div>
<hr />
<div style="text-align: center;">
  <font size="4">2014 Covocation Department Awards</font>
  <br /><font size="2"><i>Lehigh Athletics values achievements in the following areas:</i></font>
</div>
<div style="clear:both;height:1em;">
  <div style="">
    <img mediaid="9491" style="float: left; width: 18%; margin-right: 50px;" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/8/Academics2.png" />
  </div>
  <div style="">
    <img mediaid="9491" style="float: left; width: 18%; margin-right: 10px;" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/5/8/Academics2.png" />
  </div>
  <div style="clear:both;height:1em;">
    <div style="float: left; width: 18%; margin-right: 50px;">
      <img mediaid="9484" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Taryn_Carroll_0082.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
    <div style="float: left; width: 18%; margin-right: 10px;">
      <img mediaid="9485" style="" src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg" />
    </div>
  </div>
</div>
  • 8
    Да, используйте таблицы стилей.
  • 1
    каждая строка не должна быть в своем собственном DIV ...
Показать ещё 2 комментария
Теги:
layout

2 ответа

3
Лучший ответ

Как упоминал Альберт в комментариях, вы можете использовать каскадные таблицы стилей вместо встроенных стилей в своем HTML-документе. С помощью CSS вы можете добавлять такие стили, как:

div {
    text-align: center;
}

Написанный в файле CSS один раз, этот стиль будет применяться ко всем элементам div. Вы можете дополнительно добавить классы и/или идентификаторы к вашим элементам div (или другим):

<div class="cool"></div>
<div class="cool"></div>
<footer class="cool"></footer>

И используйте CSS для применения стиля ко всем элементам этого класса:

.cool {
    text-align: center;
}
  • 0
    Спасибо - я, очевидно, новичок. Я ценю ваш простой, но четкий ответ!
  • 0
    Этот ответ действительно ваш следующий шаг. Встроенный стиль плох по разным причинам, но самая очевидная плохая вещь об этом - читаемость, о которой вы уже спрашиваете.
0

Во-первых, вам не нужно использовать div для каждого элемента. div - для целой группы элементов.

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

style="float: left; width: 18%; margin-right: 10px;"

или

mediaid="9485" style="" 
  src="/common/controls/image_handler.aspx?thumb_id=0&amp;image_path=/images/2014/4/15/Lynn_Babich_0069.jpg"

в таблице стилей (и она будет каскадом, а следовательно, и CSS) вместо повторения ее снова и снова в HTML-коде.

С наилучшими пожеланиями.

  • 0
    Пожалуйста, отформатируйте ваше сообщение так, чтобы оно было читабельным; В Stack Exchange также есть встроенное обнаружение кода, если вы знаете, как его использовать; Есть подсказки в боковой панели, когда вы пишете вопрос / ответ на случай, если вы не знаете их из головы.
  • 1
    Таблицы стилей CSS? Разве это не избыточно? По сути, вы говорите «Каскадная таблица стилей».
Сообщество Overcoder
Наверх
Меню