HTML и CSS Framework

Question

Я начинающий веб-разработчик, который изучил все основы html и css. В настоящее время я познакомился с концепцией фреймворков, чтобы облегчить размещение элементов на веб-странице.

В связи с этим я все еще смущен тем, как вы их внедряете в свой код. Всякий раз, когда я загружаю один, я получаю кучу файлов и не знаю, что с ними делать. Я удивлен, что не так много объяснений в Интернете, как их использовать, может быть, я искал не то место.

Во-вторых, есть ли дружественная среда для начинающих, с которой я должен начать? Я видел, как люди предлагают 960 Grid System.

Кроме того, что делает рамки «легкими»? В чем разница и какой цели служит «легкая основа

Answer 1

Я знаю, что вы должны быть немного потеряли, как мы теперь по другим предметам

Перейти к этой ссылке:?.

This is the code of 960 Grid System

вы должны скопировать все содержимое ссылки.

в текущей сети, вы будете иметь основной HTML-файл (вероятно, index.html или подобный). в той же папке, где ваш главный HTML файл или индекс, создайте папку называемый CSS и внутри этого, создайте файл, называемый, например, grid960.css. Теперь откройте его, скопируйте весь контент ссылки и вставьте его в файл grid960.css. Сохраните его, и в своем основном HTML-файле вы должны вызвать его, чтобы он работал. Для этого в разделе заголовка HTML скопируйте это:

<link rel="stylesheet" href="css/grid960.css"> 

Теперь вы можете использовать его. И вы должны знать, что лучший способ использовать его - применять его классы с div. Для того, чтобы объяснить некоторые из grid960.css классов имеет, я собираюсь дать вам пример:

<div class="container_16"> <!--The other option is container_12.--> 
    <div class="grid_8"> 
     This div is going to occupy half part of the window. 
    <div> 
    <div class="grid_4"> 
     This div is going to occupy a quarter of the window. 
    <div> 
    <div class="grid_4"> 
     This div is going to occupy a quarter of the window. 
    <div> 
</div> 

Вы также можете сделать это:

<div class="container_12"> 
    <div class="grid_12"> 
     This div is going to occupy the whole window. Next grid you put is going to be below it because is not going to fit. 
    <div> 
    <div class="prefix_2 grid_8 suffix_2"> 
     This div is going to occupy the whole window too, but with a margin-left (prefix_2) with the same width of a div of class grid_2, and the same for the margin-right (suffix_2) 
    <div> 
</div> 

Конечно, вы можете сделать комбинации:

<div class="container_16"> 
    <div class="preffix_1 grid_7 suffix_8"> 
    </div> 
    <div class="preffix_6 grid_10"> 
    </div> 
</div> 

И что бы вы ни пожелали. Попробуй. Это очень просто. Надеюсь, я помог вам.