CSS堆叠页面插件 _CSS

在本文中, 我们将学习如何使用CSS为网站界面实现堆叠页面效果codyhouse框架插入。这是一种用于开发网页的堆叠网页样式, 用于包括一些有吸引力的交互式界面。它为开发人员提供了一个轻量级的界面或框架。
注意：
请下载CSS
codyhouse框架
插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。另外, 创建一个" images"文件夹, 并将所有用于图像源的必需图像保存在代码中。请相应地注意文件路径。

< link href =" https://fonts.googleapis.com/css？ type =" text / css" /> < link href ="https://www.lsbin.com/style.css" rel =" stylesheet" type =" text / css" /> < script src ="https://www.lsbin.com/scripts.js"> < / script>

【CSS堆叠页面插件】例子：
以下示例演示了使用HTML元素和基于CSS的给定网页的堆叠页面效果
codyhouse框架
插入。 HTML元素, 例如
" main", " li", " p", " div"
用于设计页面结构以获得更好的外观。 HTML标记将不同的类(例如"堆栈卡", "网格", "文本组件", "容器", "对象覆盖"以及插件的" style.css"文件的更多类)附加到HTML标签上, 如下所示：如下所示的预期输出。
的HTML

< !DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link href = "https://fonts.googleapis.com/css?family=Playfair+Display|Roboto:400, 700& display=swap" rel = "stylesheet" /> < link rel = "stylesheet" href = "https://www.lsbin.com/style.css" /> < title > Stacking Page Plugins< / title > < / head > < body data-theme = "dark" > < main class = "padding-y-xl" > < div class="container max-width-adaptive-md margin-bottom-lg"> < !-- Plugin's classes are used --> < ul class = "stack-cards js-stack-cards" > < li data-theme = "default" class="stack-cards__item js-stack-cards__item bg radius-lg shadow-md"> < div class = "grid" > < div class="col-6 flex items-center height-100%"> < div class = "text-component padding-md" > < h2 > Stack 1< / h2 > < p class = "display@xs" > It is the easiest language you can say, very easy to grasp this language and easy to develop.. < / p > < p > < a href = "https://www.lsbin.org/hyperlink-vs-hypertext/" class = "btn btn--accent" > Add more content < / a > < / p > < / div > < / div > < div class = "col-6 height-100%" > < img class="width-100% height-100% object-cover" src = "https://www.lsbin.com/images/background1.jpg" alt = "image name" /> < / div > < / div > < / li > < li data-theme = "default" class="stack-cards__item bg js-stack-cards__item radius-lg shadow-md"> < div class = "grid" > < div class="col-6 flex items-center height-100%"> < div class = "text-component padding-md" > < h2 > Stack 2< / h2 > < p class = "display@xs" > This language is so much flexible that you can create whatever you want, a flexible way to design web pages along with the text.. < / p > < p > < a href = "https://www.lsbin.org/html-tutorials/" class = "btn btn--accent" > Add more content < / a > < / p > < / div > < / div > < div class = "col-6 height-100%" > < img class="width-100% height-100% object-cover" src = "https://www.lsbin.com/images/background2.jpg" alt = "Image name" /> < / div > < / div > < / li > < li data-theme = "default" class="stack-cards__item bg js-stack-cards__item radius-lg shadow-md"> < div class = "grid" > < div class="col-6 flex items-center height-100%"> < div class="text-component padding-md"> < h2 > Stack 3< / h2 > < p class = "display@xs" > You can make linkable text like users can connect from one page to another page or website through these characteristics. < / p > < p > < a href = "https://www.lsbin.org/css-tutorials/" class = "btn btn--accent" > Add more content < / a > < / p > < / div > < / div > < div class = "col-6 height-100%" > < img class="width-100% height-100% object-cover" src = "https://www.lsbin.com/assets/images/background3.jpg" alt = "Image name" /> < / div > < / div > < / li > < / ul > < / div > < div class = "container max-width-adaptive-sm" > < div class="text-component line-height-lg v-space-md"> < p > HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. HTML is a markup language that is used by the browser to manipulate text, images, and other content to display it in the required format. < / p > < / div > < / div > < / main > < / body > < / html >

输出如下：