📜  如何使用 CSS 创建笔记本设计?

📅  最后修改于: 2021-10-29 06:42:29             🧑  作者: Mango

在本文中,我们将使用简单的 CSS 创建一个以笔记本为主题的网页模板。

HTML 代码: HTML 代码用于创建主体的基本结构。为了创建笔记本设计,我们使用无序列表项在行内添加文本。之后,我们使用一些 CSS 属性来调整笔记本行内项目的无序列表。



  

    Notebook Design using CSS

  

    
    

Geeks For Geeks

    
    
            
  • Courses
  •         
  • Contribute
  •         
  • Practice
  •         
  • Internships
  •         
  • Jobs
  •         
  • Articles
  •         
  • Profiles
  •         
  • Placements
  •         
  • Tutorials
  •     
  

CSS 代码: CSS 属性用于创建笔记本设计。

body { 
    width: 480px;
    height: 450px;
    margin: 0 auto;
}
h2 {
    color: green; 
    text-align: center;  
    letter-spacing: -2px;  
}
.listItemClass {
    color: #858585;
    font-size: 21px;
    padding: 0;
    width: 500px;
    border: 2px solid #cecece;
}
.listItemClass li {
    list-style: none;
    border-bottom: 2px dotted #cecece;
    text-indent: 20px;
    height: auto; 
    padding: 10px;
}
.listItemClass li:hover {
    background-color: #f5f5f5;
}
.verticalLines { 
    width: 1px;
    float: left;
    height: 425px;
    margin-left: 35px;
    border-left: 1px solid green;
    border-right: 1px solid green;
}

结合完整代码:在本节中,我们将结合以上两段代码(HTML 和 CSS 代码)来设计 notebook。



  

    Notebook Design using CSS
  
    

  

    

Geeks For Geeks

       
    
            
  • Courses
  •         
  • Contribute
  •         
  • Practice
  •         
  • Internships
  •         
  • Jobs
  •         
  • Articles
  •         
  • Profiles
  •         
  • Placements
  •         
  • Tutorials
  •     
  

输出: