Реализовать с минимальным кодом CSS

Я хочу реализовать изображение с минимальным кодом CSS ... Что мне делать?Реализовать с минимальным кодом CSS

2015-08-01 Mahsa ehsani

пожалуйста, напишите то, что вы пробовали до сих пор. –

создать таблицу. дать цвет конкретному td, вот и все. –

без Javascript вы можете это сделать, как этот

<style> 
    .row { 
     width: 250px; 
    } 
    .divSquare { 
     width: 50px; 
     height: 50px; 
     float: left; 
    } 
    .red { 
     background-color: red; 
    } 
    .blue { 
     background-color: blue; 
    } 
    .green { 
     background-color: green; 
    } 
</style> 

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div class="row"> 
     <div class="divSquare red"></div> 
     <div class="divSquare blue"></div> 
     <div class="divSquare red"></div> 
     <div class="divSquare blue"></div> 
     <div class="divSquare red"></div> 
    </div> 
    <div class="row"> 
     <div class="divSquare blue"></div> 
     <div class="divSquare green"></div> 
     <div class="divSquare blue"></div> 
     <div class="divSquare green"></div> 
     <div class="divSquare blue"></div> 
    </div> 
    <div class="row"> 
     <div class="divSquare red"></div> 
     <div class="divSquare blue"></div> 
     <div class="divSquare red"></div> 
     <div class="divSquare blue"></div> 
     <div class="divSquare red"></div> 
    </div> 
    <div class="row"> 
     <div class="divSquare blue"></div> 
     <div class="divSquare green"></div> 
     <div class="divSquare blue"></div> 
     <div class="divSquare green"></div> 
     <div class="divSquare blue"></div> 
    </div> 
</body> 

</html>

источник

2015-08-01 08:22:57 kalkanbatuhan

Вы можете оптимизировать это еще больше, указав «.divSquare» по умолчанию цвет красного цвета. Тогда вам понадобятся только синие и зеленые классы для перезаписывания по умолчанию. –

Минимальный CSS? Я думаю, так как вы не можете иметь меньше, чем без CSS, решение без CSS будет вашим абсолютным минимумом.

Так вот, любезно старые добрые времена ужасного веб-программирования;)

<table width="250" height="200" border="0"> 
 
    <tr> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#ff00ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#ff00ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#ff00ff"></table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#00ff00"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#00ff00"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#ff00ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#ff00ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#ff00ff"></table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#00ff00"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#00ff00"></table> 
 
    </td> 
 
    <td> 
 
     <table width="50" height="50" bgcolor="#0000ff"></table> 
 
    </td> 
 
    </tr> 
 
</table>

источник

2015-08-01 08:57:14 mmgross

Используя линейный градиент.

body { 
 
    background: 
 
       linear-gradient(45deg, blue 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, blue 25%, rgba(0,0,0,0) 26%), 
 
       linear-gradient(45deg, green 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, green 25%, rgba(0,0,0,0) 26%), 
 
       linear-gradient(45deg, magenta 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, magenta 25%, rgba(0,0,0,0) 26%), 
 
       linear-gradient(45deg, blue 25%, rgba(0,0,0,0) 26%), linear-gradient(225deg, blue 25%, rgba(0,0,0,0) 26%); 
 
       
 
    background-position: 0 0, 25px 25px, 25px 50px, 100px 75px, 
 
         0 25px, 25px 50px, 25px 75px, 100px 100px; 
 
    background-size: 50px 50px; 
 
}

источник

2015-08-01 20:15:50

Реализовать с минимальным кодом CSS

ответ

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