CSS堆叠页面插件

2021年3月13日17:21:15 发表评论 736 次浏览

在本文中, 我们将学习如何使用CSS为网站界面实现堆叠页面效果codyhouse框架插入。这是一种用于开发网页的堆叠网页样式, 用于包括一些有吸引力的交互式界面。它为开发人员提供了一个轻量级的界面或框架。

注意:

请下载CSS

codyhouse框架

插件在工作文件夹中, 并在HTML代码的开头部分包含必需的文件。另外, 创建一个" images"文件夹, 并将所有用于图像源的必需图像保存在代码中。请相应地注意文件路径。

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

例子:

以下示例演示了使用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 = "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 = "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 = "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 = "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 >

输出如下:

堆叠卡

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: