Работа с блоками

273
09 января 2017, 20:15

<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="utf-8"> 
    <title> С чего начинается любой проект? </title> 
    <style type="text/css"> 
        .block1 { 
            padding: 10px; 
            background: #ccc; 
            border: solid 2px green; 
           
        } 
         
        .block2 { 
			width: 50%; 
            margin: auto;  
            padding: 10px; 
            background: #006600; 
            border-top: dashed 2px yellow; 
            border-bottom: dashed 2px yellow; 
        } 
		 
    </style> 
</head> 
 
<body> 
 
    <h1><span style="background-color: #000000; color: #ffffff; margin 0 auto;">С чего начинается любой проект?</span></h1> 
    <p>Поисковая система учитывает следующие параметры сайта при вычислении его&nbsp; 
        <a href="http://www.webeffector.ru/wiki/%D0%A0%D0%B5%D0%BB%D0%B5%D0%B2%D0%B0%D0%BD%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C">релевантности</a>&nbsp; (степени соответствия введёному запросу):</p> 
    <div> 
        <ul style="list-style-type: square;"> 
            <li><strong>плотность ключевых слов&nbsp; 
        </strong>(сложные алгоритмы современных поисковиков позволяют производить семантический анализ текста, чтобы отсеять&nbsp; 
                <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BF%D0%B0%D0%BC">поисковый спам</a>, в котором ключевон слово встречается слишком часто).</li> 
            <li><a href="https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D0%B4%D0%B5%D0%BA%D1%81_%D1%86%D0%B8%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2">индекс цитирования</a>&nbsp; 
                <strong>сайта</strong>, зависящий от количества и авторитетности веб-ресурсов, ссылающихся на данный сайт; многими поисковиками не учитываются взаимные ссылки (друг на друга). Зачастую также важно, чтоб ссылки былы с сайтов схожей тематики, что и оптимизируемый сайт.</li> 
        </ul> 
    </div> 
 
    <h2>История</h2> 
 
    <div class="block1">Вместе с появлением и развитием поисковиков в середине 1990-х появилась и оптимизация. В то время поисковики придавали значение тексту на странице, ключевым словам в <br> мета тегах и прочим внутренним фактором которыми владельцы сайтов могли легко манипулировать.</div> 
 
    <p>Это привело к тому, что в выдаче многих поисковиков первые несколько страниц заняли мусорные сайты, что резко снизило качество работы поисковиков и привело многих из них к упадку. С появлением технологии PageRank больше веса стало придаваться внешним факторам, что помогло Google выйти в лидеры поиска в мировом масштабе, затруднив оптимизацию одного лишь текста на сайте. </p> 
 
    <div class="block2"><span style="color: #ffff00;">Однако оптимизация развивается вместе с поисковиками, и в современных результатах поиска можно видеть всё больше и больше коммерческих сайтов с искуственно раздутой популярностью, особенно по коммерчески привлекательным запросам.</span></div> 
 
    <p><strong><span style="color: #0000ff;">Методы внешней поисковой оптимизации:</span></strong></p> 
    <ul style="list-style-type: circle;"> 
        <li>Регистрация в самостоятельных каталогах. Она может осуществляться вручную, либо с помощью специальных ресурсов.</li> 
        <li>Регистрация в каталогах поисковых систем таких как: Яндекс.каталог, Рамблер Top 100, каталог DMOZ (<a href="https://ru.wikipedia.org/wiki/Open_Directory_Project">AOL</a>), каталог Апорта, каталог Mail.ru, каталог Yahoo и другие.</li> 
        <li>Обмен ссылками. Существуют <span style="background-color: #000000; color: #ffff00; font-size: 14pt;">несколько способов обмена:</span>&nbsp;&mdash; прямой, кольцевой, односторонний (покупка ссылок).</li> 
        <li>Размещение статей.</li> 
        <li>Социальные сети.</li> 
        <li>Пресс-релизы.</li> 
        <li>Создание и ведение блогов.</li> 
    </ul> 
    <p>Лицо, проводящее работу по оптимизации.</p> 
</body> 
 
</html>

Есть вот такое вот чудо, которое я написал по примеру картинки (вчера только начал "изучать" html)

помогите, подскажите, как сделать такое же форматирование для блоков c рамками и названия. (страницу нужно развернуть на полный экран)

Answer 1
<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title> С чего начинается любой проект? </title>
    <style type="text/css">
        .block1 {
            padding: 10px;
            background: #ccc;
            border: solid 2px green;
        }
        .block2 {
            width: 50%;
            margin: auto; 
            padding: 10px;
            background: #006600;
            border-top: dashed 2px yellow;
            border-bottom: dashed 2px yellow;
        }
    </style>
</head>
<body>
    <h1><span style="display:block; padding: 5PX; background-color: #000000; color: #ffffff; margin 0 auto;">С чего начинается любой проект?</span></h1>
    <p>Поисковая система учитывает следующие параметры сайта при вычислении его&nbsp;
        <a href="http://www.webeffector.ru/wiki/%D0%A0%D0%B5%D0%BB%D0%B5%D0%B2%D0%B0%D0%BD%D1%82%D0%BD%D0%BE%D1%81%D1%82%D1%8C">релевантности</a>&nbsp; (степени соответствия введёному запросу):</p>
    <div>
        <ul style="list-style-type: square;">
            <li><strong>плотность ключевых слов&nbsp;
                </strong>(сложные алгоритмы современных поисковиков позволяют производить семантический анализ текста, чтобы отсеять&nbsp;
                <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BF%D0%B0%D0%BC">поисковый спам</a>, в котором ключевон слово встречается слишком часто).</li>
            <li><a href="https://ru.wikipedia.org/wiki/%D0%98%D0%BD%D0%B4%D0%B5%D0%BA%D1%81_%D1%86%D0%B8%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2">индекс цитирования</a>&nbsp;
                <strong>сайта</strong>, зависящий от количества и авторитетности веб-ресурсов, ссылающихся на данный сайт; многими поисковиками не учитываются взаимные ссылки (друг на друга). Зачастую также важно, чтоб ссылки былы с сайтов схожей тематики, что и оптимизируемый сайт.</li>
        </ul>
    </div>
    <h2>История</h2>
    <div class="block1">Вместе с появлением и развитием поисковиков в середине 1990-х появилась и оптимизация. В то время поисковики придавали значение тексту на странице, ключевым словам в <br> мета тегах и прочим внутренним фактором которыми владельцы сайтов могли легко манипулировать.</div>
    <p>Это привело к тому, что в выдаче многих поисковиков первые несколько страниц заняли мусорные сайты, что резко снизило качество работы поисковиков и привело многих из них к упадку. С появлением технологии PageRank больше веса стало придаваться внешним факторам, что помогло Google выйти в лидеры поиска в мировом масштабе, затруднив оптимизацию одного лишь текста на сайте. </p>
    <div class="block2"><span style="color: #ffff00;">Однако оптимизация развивается вместе с поисковиками, и в современных результатах поиска можно видеть всё больше и больше коммерческих сайтов с искуственно раздутой популярностью, особенно по коммерчески привлекательным запросам.</span></div>
    <p><strong><span style="color: #0000ff;">Методы внешней поисковой оптимизации:</span></strong></p>
    <ul style="list-style-type: circle;">
        <li>Регистрация в самостоятельных каталогах. Она может осуществляться вручную, либо с помощью специальных ресурсов.</li>
        <li>Регистрация в каталогах поисковых систем таких как: Яндекс.каталог, Рамблер Top 100, каталог DMOZ (<a href="https://ru.wikipedia.org/wiki/Open_Directory_Project">AOL</a>), каталог Апорта, каталог Mail.ru, каталог Yahoo и другие.</li>
        <li>Обмен ссылками. Существуют <span style="background-color: #000000; color: #ffff00; font-size: 14pt;">несколько способов обмена:</span>&nbsp;&mdash; прямой, кольцевой, односторонний (покупка ссылок).</li>
        <li>Размещение статей.</li>
        <li>Социальные сети.</li>
        <li>Пресс-релизы.</li>
        <li>Создание и ведение блогов.</li>
    </ul>
    <p>Лицо, проводящее работу по оптимизации.</p>
</body>

READ ALSO
Динамическое изменение атрибута id
HTML

Динамическое изменение атрибута id

Есть такой код

 300
Как сделать загрузку с помощью символов на JavaScript?
HTML

Как сделать загрузку с помощью символов на JavaScript?

Как сделать анимацию загрузки с помощь символов, как было на DOS или в Ubuntu терминале? А символы эти:

 259
Почему IsBackground не работает?
c#

Почему IsBackground не работает?

Изучаю C#Подскажите, почему поток не становится асинхронным после IsBackground (окно просто подвисает пока едет кнопка)? Как правильно?

 409
C# Вывод данных sqlite в datagridview без datasource
c#

C# Вывод данных sqlite в datagridview без datasource

Подскажите, как вывести данные из sqlite в datagridview таким образом, чтобы привязать "DATE" и "FULLNAME" к конкретным столбцам datagridviewВариант с datasource не устраивает,...

 631