Сеть наполнена качественным контентом, но его представление никогда не было таким первостепенным. В этой статье мы покажем вам популярный способ отображения содержимого вашего веб-сайта с помощью адаптивных плиток. Это позволяет вам создать плитку, которая при нажатии направляет на страницу сведений об этой конкретной плитке, которая имеет отношение к ее графике, заголовку и подзаголовку.
Ниже приведены HTML, CSS и JavaScript для добавления адаптивных плиток контента на ваш веб-сайт.
Шаг 1
Добавьте HTML-код ниже, где вы хотите заполнить свои адаптивные плитки.
<div class="container">
<section class="cms-boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 cms-boxes-outer">
<div class="cms-boxes-items cms-features">
<div class="boxes-align">
<div class="small-box">
<i class="fa fa-4x fa-laptop"> </i>
<h3>Data Management</h3>
<p>Gain valuable insights with WebCorpCo Data.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 cms-boxes-outer">
<div class="cms-boxes-items cms-security">
<div class="boxes-align">
<div class="small-box">
<i class="fa fa-4x fa-cog"> </i>
<h3>Enterprise<br> Data Funnel</h3>
<p>Pull in realtime data from every source on the web.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 cms-boxes-outer">
<div class="cms-boxes-items cms-scalability">
<div class="boxes-align">
<div class="small-box">
<i class="fa fa-4x fa-arrows-alt" aria-hidden="true"></i>
<h3>Pattern Analysis</h3>
<p>The world's most advanced algorithms let loose on your data.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 cms-boxes-outer">
<div class="cms-boxes-items cms-built">
<div class="boxes-align">
<div class="large-box">
<i class="fa fa-4x fa-heart" aria-hidden="true"></i>
<h3>Award-winning customer service</h3>
<p>Award-winning, U.S. based support 24/7. If you need help we are here.</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 cms-boxes-outer">
<div class="cms-boxes-items cms-documentation">
<div class="boxes-align">
<div class="large-box">
<i class="fa fa-4x fa-file-code-o"> </i>
<h3>Documentation</h3>
<p>From connecting data sources to styling reports, we have everything you need to get the most value out of WebCorpCo.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Шаг 2
Добавьте приведенный ниже CSS в основную таблицу стилей вашего сайта.
section.cms-boxes .cms-boxes-outer {
text-align: left;
margin-bottom: 6px;
padding: 0 3px;
}
section.cms-boxes .cms-boxes-outer .cms-boxes-items {
height: 350px;
display: table;
width: 100%;
}
section.cms-boxes .cms-features {
background-color: #b70457;
/* background: url(/_resources/images/content/website-mgmt.jpg) 0 0 no-repeat; */
background-size: cover;
}
section.cms-boxes .boxes-align {
display: table-cell;
vertical-align: middle;
}
section.cms-boxes .small-box, section.cms-boxes .large-box {
max-width: 350px;
margin: 0 auto;
text-align: center;
}
section.cms-boxes .cms-boxes-items h3 {
/* font-size: 50px; */
font-size: 35px;
/* font-family: 'nimbus-sans-condensed', sans-serif; */
color: #fff;
font-weight: 400;
line-height: 37px;
text-align: center;
margin: 20px 0 10px;
text-transform: uppercase;
}
section.cms-boxes .cms-boxes-outer .cms-boxes-items p {
color: #fff;
}
section.cms-boxes .boxes-align {
display: table-cell;
vertical-align: middle;
}
section.cms-boxes .cms-boxes-outer .cms-boxes-items {
height: 350px;
display: table;
width: 100%;
}
section.cms-boxes .cms-features {
background-color: #b70457;
/* background: url(/_resources/images/content/website-mgmt.jpg) 0 0 no-repeat; */
background-size: cover;
}
section.cms-boxes .cms-boxes-outer .cms-boxes-items {
height: 350px;
display: table;
width: 100%;
}
section.cms-boxes .cms-security {
background-color: #0489b7;
}
section.cms-boxes .cms-security, section.cms-boxes .cms-documentation {
/* background-color: #0082ca; */
background-color: rgb(66, 16, 88);
}
section.cms-boxes .cms-scalability {
background: url(https://www.solodev.com/assets/tiles/scalability.jpg) 0 0 no-repeat;
background-size: cover;
}
section.cms-boxes .cms-boxes-outer {
text-align: left;
margin-bottom: 6px;
padding: 0 3px;
}
section.cms-boxes .cms-built {
/* background: url(/_resources/images/content/solodevcms_bg2.jpg) 0 0 no-repeat; */
background: url(https://www.solodev.com/assets/tiles/customer-service.jpg) 0 0 no-repeat;
background-size: cover;
}
section.cms-boxes .cms-security, section.cms-boxes .cms-documentation {
/* background-color: #0082ca; */
background-color: rgb(66, 16, 88);
}
section.cms-boxes .cms-boxes-items:hover {
opacity: .2;
cursor: pointer;
}
Шаг 3
Добавьте приведенные ниже элементы на веб-страницу с вашими плитками.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
Первоначально опубликовано здесь, в блоге Солодева
Чтобы узнать больше о возможностях платформы веб-дизайна Solodev, посетите solodev.com!
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.
