Макет CSS 3 - httpdoc.ru

Макет 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>

Выход

CSS 3 layout

Добро пожаловать на наш сайт

Привет, мир!


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 3 Multiple Column layout
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

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 3 Multiple Column Gap
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

Стиль правила столбца 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 3 Multiple Column Rule
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

Ширина правила столбца 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 3 Multiple Column Rule Width
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

Цвет правила столбца 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 3 Multiple Column Rule Color
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

Правило столбца 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 3 Multiple Column Rule
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

Диапазон столбцов 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 3 Multiple Column Rule Color
Заголовок

Lorem Ipsum Dolor Sit Amet

Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.

Ширина столбца 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>

Выход

CSS 3 Multiple Column width
Заголовок
Lorem ipsum dolor sit amet, Conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concquat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer Possim Assum.