Основы CSS

Модель блока CSS

Основы CSS3

CSS-руководство

CSS @правила (RULES)

Макет веб-страницы CSS

CSS-расположениеЛегко проектировать. Мы можем использовать CSS-расположение для дизайна наших веб-страниц, например, домашняя страница, свяжитесь с нами, о нас и т.д.

Есть три способа проектировать веб-расположение:

HTML Div+CSS-расположение：Теперь широко используется.
HTML-таблицы：Медленный, не очень популярный.
HTML-рамки：Теперь не используется.

CSS-расположение может включать заголовок, подвал, левую панель, правую панель и часть текста. Давайте посмотрим на простой пример CSS-расположения.

Пример CSS-расположения

Пример

!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
.header{отступ:-8px　-8px　0px;фоновое-изображение:linear-gradient(145deg,#7379ff,#b524ef);цвет:белый;выравнивание:text-align:center;padding:10px;}　　
.container{width:100%}　　
.left{width:15%;float:left;}　　
.body{width:65%;float:left;background-color:pink;padding:5px;}　　
.right{width:15%;float:left;}　　
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div class="header"><h2>Базовые教程 oldtoolbag.com</h2></div>　　
　　
<div class="container">　　
<div class="left">　　
<p>Левый сайдбар</p>　　
</div>　　
<div class="body">　　
<h1>Основной текст</h1>　　
<p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p>　　
<p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p>　　
<p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p>　　
<p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p><p>Содержимое страницы здесь</p>　　
<p>Содержимое страницы здесь</p>　　
</div>　　
<div class="right">　　
<p>Правый сайдбар</p>　　
</div>　　
</div>　　
　　
<div class="footer">　　
<p>Низ страницы</p>　　
</div>　
</body>　　
</html>

Проверьте‹/›

Результат вывода:

Базовые教程 oldtoolbag.com

Левый сайдбар

Основной текст

Содержимое страницы здесь

Правый сайдбар

Низ страницы

Полное руководство по CSS Счетчик CSS