Периодическая таблица с css

Добрый день!Периодическая таблица с css

Так что в настоящее время у меня возникла проблема с созданием периодической таблицы с использованием только внешнего файла css (мне не разрешено использовать тег).

Вот пример:

<!DOCTYPE html> 
<html> 

    <head> 
     <title>Periodic Table</title> 
     <link rel="stylesheet" type="text/css" href="s3372661.css"> 
    </head> 

    <body> 
     <div id="row_0"> 
      <div id="1" class="element pos_0"> <span class="number">1</span> 
       <br> <span class="symbol">H</span> 
       <br> <span class="name">Hydrogen</span> 
       <br> <span class="molar">1.00794</span> 
       <br> <span class="group"></span> 
       <br> 
      </div> 
      <div class="element pos_1"></div> 
      <div class="element pos_2"></div> 
      <div class="element pos_3"></div> 
      <div class="element pos_4"></div> 
      <div class="element pos_5"></div> 
      <div class="element pos_6"></div> 
      <div class="element pos_7"></div> 
      <div class="element pos_8"></div> 
      <div class="element pos_9"></div> 
      <div class="element pos_10"></div> 
      <div class="element pos_11"></div> 
      <div class="element pos_12"></div> 
      <div class="element pos_13"></div> 
      <div class="element pos_14"></div> 
      <div class="element pos_15"></div> 
      <div class="element pos_16"></div> 
      <div id="2" class="element pos_17"> <span class="number">2</span> 
       <br> <span class="symbol">He</span> 
       <br> <span class="name">Helium</span> 
       <br> <span class="molar">4.002602</span> 
       <br> <span class="group">Element Noble p</span> 
       <br> 
      </div> 
    </body> 
    </htmt>

и файл CSS:

body { 
    background-color: #FFF; 
    width:960px; 
    display:table; 
} 
div { 
    display: table-row; 
    vertical-align: inherit; 
    border-radius: 7px; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 9px; 
    border: 3px solid #FFF; 
    background-color: red; 
} 
.element { 
    text-align: center; 
    padding: 10px 5px; 
    display: table-cell; 
    vertical-align: inherit; 
    min-width: 5em; 
    border: 2px #FFF solid; 
    background-color: inherit; 
} 
.number { 
    font-size:9px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
} 
.symbol { 
    font-size:20px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
    font-weight:bold; 
} 
.name { 
    font-size:15px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
    font-style:italic; 
} 
.molar { 
    font-size:10px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
} 
.group { 
    font-size:15px; 
    font-family:Arial, Helvetica, sans-serif; 
    color: white; 
}

Проблема заключается в том, как я могу сделать этот нежелательный блок исчезнет без использования специфичности для каждого блока?

Такие, как:

#row_0 .element.pos_1 { 
    background-color: white 
}

источник

2013-07-19 Trần Trung

Ссылка на [скрипку] (http://jsfiddle.net/venkateshwar/sCf2P/) –

ли разрешено CSS3 селекторы?

.element:empty { 
    visibility: hidden; 
}

источник

2013-07-19 12:18:36

Я думаю, вы можете достичь его с помощью CSS3, как показано ниже ... Это будет скрыть DIV ... Пожалуйста, измените свойство, если требуется

div[class^=pos_]{ 
display:none !important; 
}

Обновленный CSS для класса элемента ниже: удалить display: table-cell;

div {display: table-row; vertical-align: inherit; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 9px; border: 3px solid #FFF; } 
.element{text-align: center; padding: 10px 5px; vertical-align: inherit; min-width: 5em; border: 2px #FFF solid; background-color: red; }

источник

2013-07-19 11:39:18 Yogesh

Если вы установите его на дисплей: нет, все они будут разрушаться и результатом будет то, что водород и гелий будет рядом друг с другом, что неправильно. Я думаю, что видимость: скрытый был бы лучше –

@JonasGrumann Да. Согласно моим знаниям «Видимость: скрытая» скроет «div», но место будет занято ... поэтому я подумал об использовании свойства display: none, чтобы эти «DIV» приблизились ... то же самое происходит 'visibility: hidden' также потому, что существует класс' div' с свойством 'background-color: red' и тот же, что и в классе' element'. Я обновил ответ, обновив классы 'DIV' и' element' – Yogesh

Вы можете использовать v Достоверность: скрытая. Это скроет элементы, не удаляя их из модели коробки (таким образом, они все еще занимают пространство). Но вы все равно останетесь с пустыми элементами html. Я думаю, с помощью позиционирования или преобразования или комбинации поплавков будет лучше:

div[class^=pos_]{ 
visibility: hidden; 
} 

/* and then reset visibility for the elements that need to be visible */ 
.pos_1 { 
visibility: visible; 
}

Я сделал скрипку этого рабочего раствора:

http://jsfiddle.net/jonigiuro/sCf2P/1/

источник

2013-07-19 11:42:49

Я применил ваш код, но в других строках от pos_1 до pos_16 также исчез, образец html, который я просто установил, - это всего лишь первая строка периодической таблицы. Но в любом случае решение от Илья Стрельцин хорошо работает для меня, поэтому спасибо за ваши усилия и у меня хороший день! –

Периодическая таблица с css

ответ

Смежные вопросы