Макет CSS3
Макет CSS3 - это не что иное, как способ использования различных элементов HTML и CSS вместе для создания привлекательного веб-сайта. Макет CSS используется для разработки веб-страниц, таких как домашняя страница, контакты, информация о нас и т. Д., Которые вместе составляют веб-сайт. Существуют различные элементы и разные способы создания макета веб-сайта:Дизайн-макет веб-страницы
| Дизайн-макет | Описание |
|---|---|
| HTML Div с CSS | Это просто и широко используется. |
| HTML таблица | Он менее предпочтителен, чем драгоценный, и к тому же медленный. |
| Набор фреймов HTML | Сейчас он не используется в HTMl 5. |
Посмотрите на приведенный ниже пример и посмотрите, как все элементы собраны вместе, чтобы создать макет веб-страницы.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 layout </title>
<meta charset="UTF-8">
</head>
<style>
body{
margin-top:15px;
}
ul li{
margin:5px;
}
li a {
color: blueviolet;
}
table{
font:12px verdana, sans-serif;
width:80%;
margin:0 auto;
}
#in{
background-color:#f0f0f0;
width:80%;
vertical-align:top;
}
#footer{
background-color:#73b767;
}
#header{
background-color:#73b767;
}
#body-height{
height: 200px;
}
#sidebar{
background-color:lightgreen;
width:20%;
vertical-align:top;
}
#p{
text-align:center;
margin:5px;
}
</style>
<body>
<table cellpadding="10px;" cellspacing="0">
<tr>
<td colspan="2" id="header">
<h1>Coderepublics</h1>
</td>
</tr>
<tr id="body-height">
<td id="sidebar">
<ul style="list-style:none; padding:0px; margin:0px;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</td>
<td id="in">
<h2>Welcome to our site</h2>
<p>Hello World!</p>
</td>
</tr>
<tr>
<td colspan="2" id="footer">
<p style="text-align:center; margin:5px;">copyright © Coderepublics</p>
</td>
</tr>
</table>
</body>
</html>Выход
CSS3 с несколькими столбцами
Модуль макета с несколькими столбцами в CSS 3 используется для создания макетов с несколькими столбцами простым и эффективным способом, который также выглядит очень привлекательно. Этот макет позволяет легко определять несколько столбцов текста - как в газетах или в некоторых журналах.
Ниже перечислены различные свойства, посмотрите.
CSS-свойства с несколькими столбцами
- счетчик столбцов
- колонна-пробел
- стиль правила столбца
- ширина правила столбца
- столбец-правило-цвет
- столбец-правило
- колонна-пролет
- ширина колонки
Количество столбцов CSS
column-count
Свойство задает общее число столбцов элемент должен быть разделен на.
Посмотрите на пример ниже, в котором элемент div разделен на несколько столбцов -
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column layout </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.div{
height:25px;
max-width:100%;
background:blueviolet;
text-align:center;
padding:10px;
color:white;
font-size:25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.
</div>
</body>
</html>Выход
CSS Column Gap (пробел в столбце)
column-gap
Свойство задает ширину зазора между колоннами.
В приведенном ниже примере, если вы увеличите значение
column-gap
, расстояние между столбцами увеличится -
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Gap </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap:50px;
}
.div{
height:25px;
max-width:100%;
background:blueviolet;
text-align:center;
padding:10px;
color:white;
font-size:25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
</div>
</body>
</html>Выход
Стиль правила столбца CSS
column-rule-style
Свойство определяет стиль правила между колоннами.
В этом случае зазор между столбцом также будет отображать линию, стиль которой указывается в этом свойстве.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
.div{
height:25px;
max-width:100%;
background:#146082c4;
text-align:center;
padding:10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>Выход
Ширина правила столбца CSS
column-rule-width
Свойство задает ширину линейки между столбцами.
Когда вы увеличиваете значение этого свойства, ширина линейки также увеличивается.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule Width </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
.div{
height:25px;
max-width:100%;
background:#146082c4;
text-align:center;
padding:10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod.
</div>
</body>
</html>Выход
Цвет правила столбца CSS
column-rule-color
Свойство задает цвет линии между столбцами.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule Color </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
-webkit-column-rule-color: red; /* Chrome, Safari, Opera */
-moz-column-rule-color: red; /* Firefox */
column-rule-color: red;
}
.div{
height:25px;
max-width:100%;
background:purple;
color:white;
text-align:center;
padding:15px 0px 15px 25px;
color:white;
font-size:25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim.
</div>
</body>
</html>Выход
Правило столбца CSS
column-rule
Свойство является сокращенным свойством для установки всех свойств столбцов ,
перечисленных выше правил выше.
Взгляните на приведенный ниже пример, чтобы понять синтаксис сокращенного свойства.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule: 1px solid blueviolet; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid blueviolet; /* Firefox */
column-rule: 5px solid blueviolet;
}
.div{
max-width:100%;
background:seagreen;
text-align:center;
padding:10px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod .
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
</div>
</body>
</html>Выход
Диапазон столбцов CSS
В
column-span
определяет свойство ,
что для того,
как много столбцов элемент должен охватывать поперечник.
Обычно используется с заголовками.
Посмотрите на приведенный ниже пример, чтобы понять, как распределены столбцы.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column Rule Color </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
.div{
max-width:100%;
background:#24b3b7;
text-align:center;
padding:20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet.
</div>
</body>
</html>Выход
Ширина столбца CSS
column-width
Свойство определяет ширину столбцов.
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS 3 Multiple Column width </title>
<meta charset="UTF-8">
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
.div{
max-width:100%;
color:white;
background:#24b3b7;
text-align:center;
padding:20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="div">Heading</div>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming.
</div>
</body>
</html>