在本文中，我们将使用简单的 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
输出： 