Display:table Определяет, что элемент является блочной таблицей подобно использованию тега <table>. table-row Элемент отображается как строка таблицы (тег <tr>). table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
<nav>
<dl>
<li><a href="#">menu1<a/></li>
<li><a href="#">menu2<a/></li>
<li><a href="#">menu3<a/></li>
<li><a href="#">menu4<a/></li>
</dl>
</nav>dl {
display:flex;
justify-content:center;
}
li {
min-width:10vw;
min-height:10vh;
background:url(http://lorempixel.com/150/50);
list-style-type:none;
padding:0.5vw;
margin:0.5vw;
}
a {color:white; text-decoration:none; }<details>
<summary>Заголовок спойлера</summary>
Текст спойлера
</details><fieldset>
<legend>
<h2>
Services
</h2>
</legend>
<p>Before we sign a contract or write a line of code our team will spend the necessary<br>time needed to understand your product vision.
<br>The outcome of the scoping session is a proposal or high-level statment of work.
<br>Based on your requirements, we can provide a complete offering or just the pieces you need.</p>
</fieldset>body{
background:url(http://img1.joyreactor.cc/pics/post/full/anon-Картинка-2191131.jpeg) top left no-repeat;
}
legend{
width:300px;
margin:0 auto;
text-align:center;
}<div class="wrapper">
<div class="column-25 yelloybg">
<h1>Заголовок 1</h1>
<p></p>
</div>
<div class="column-50 yelloybg">
<h1>Заголовок 2</h1>
<p></p>
</div>
<div class="column-25 yelloybg">
<h1>Заголовок 3</h1>
<p></p>
</div>
</div>h1 {
text-align: center;
color: #FFF;
margin: 0;
}
.wrapper{
background: #34495e;
width: 1000px;
padding: 10px;
margin: 0 auto;
overflow: hidden;
}
.yelloybg {
background: #f1c40f;
height: 320px;
}
.column-25 {width:23.333333333333%;}
.column-50 {width: 48.333333333333%;}
*[class*="column-"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
float: left;
display: block;
}<ul>
<li><b>Вклад "Рантье"</b><br/>
Кредит Европа Банк</li>
<li><b>Вклад "Зимний специальный"</b><br/>
Кредит Европа Банк</li>
<li><b>Вклад "Выгодный"</b><br/>
Банк РСБ</li>
</ul>body{color:#999; font-family:tahoma;}
ul{list-style-image: url(http://htmlbook.ru/themes/hb/img/icon_yes.png);}
li b{color:#7085a0;font-size:12px;}
li {font-size:11px; padding-bottom:5px;}<span class="func">Функции и полномочия <br/>
учредителя Университета <br/>осуществляю я </span>.func{
background-color:red;
color:white;
font-size:1.4em;
font-family:tahoma;
font-weight:bold;
padding:4px;
line-height:2em;
}.first-form {
display:block;
width:200px;
margin:100px auto;
padding:10px;
background-color:white;
border:3px solid #fff;
border-radius:10px;
}
.first-form input{
margin: 10px;
height: 22px;
border:1px solid #249FEB;
border-radius:5px;
box-shadow: 0 0 10px rgba(35,155,230,0.7);
padding-left:10px;
color:#999;
}
.first-form button{
display:block;
width:120px;
margin:10px auto;
background-color:#239AE3;
border:1px solid #249FEB;
border-radius:5px;
color:white;
}<div class='first-form' >
<form id='input_form' action='register' name='input_name_form' method='post'>
<input name='name_input' type='text' placeholder='login'><br/>
<input name='mail_input' type='text' placeholder='mail'><br/>
<input name='pass_input' type='password' placeholder='password'><br/>
<button>
Sign up for Titanium
</button>
</form><center><h3>Pricing table</h3></center>
<center><p>
Accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident...</p> </center>
<table>
<tr>
<td class="table-head">Basic</td>
<td class="table-head">Standart</td>
<td class="table-head">Premium</td>
<td class="table-head">Professional</td>
</tr>
<tr>
<td class="bg-blue">
<div id="circle" class="circle"><div class="price">$19</div>/mo</div>
</td>
<td class="bg-green">
<div id="circle" class="circle"><div class="price">$49</div>/mo</div>
</td>
<td class="bg-red">
<div id="circle" class="circle"><div class="price">$69</div>/mo</div>
</td>
<td class="bg-orange">
<div id="circle" class="circle"><div class="price">$99</div>/mo</div>
</td>
</tr>
<tr class="bg-white">
<td>1 website<hr/>1GB storage<hr/>bla-bla</td>
<td>3 website<hr/>5GB storage<hr/>bla-bla</td>
<td>10 website<hr/>20 GB storage<hr/>bla-bla</td>
<td>Unlim website<hr/>100GB storage<hr/>bla-bla</td>
</tr>
<tr>
<td class="bg-blue">Buy now</td>
<td class="bg-green">Buy now</td>
<td class="bg-red">Buy now</td>
<td class="bg-orange">Buy now</td>
</tr>
</table>body{
background-color:#34495E;
color:#9DAFC0;
Font-family:arial;
}
table{
width:800px;
border-spacing:11px 0;
float:center;
}
td{
text-align:center;
}
h3{font-weight:normal;}
.table-head{
background-color:#283B4C;
color:#9DAFC0;
padding:10px;
width:800px;
text-align:center;
}
.bg-blue{background-color:#4797CC;color:#fff;}
.bg-green{background-color:#2E9F9D;color:#fff;}
.bg-red{background-color:#9C5D7A;color:#fff;}
.bg-orange{background-color:#F4B251;color:#fff;}
.bg-white{background-color:#fff;color:#999;}
#circle {
width: 80px;
height: 80px;
font-size:14px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:3px solid #fff;
text-align:center;
}
.circle{margin:0 55px;}
.price{font-size:24px;padding-top:15px;}