CSS3 分页、框大小、弹性盒子
/* 分页样式 */
.pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.pagination li {
margin-right: 5px;
}
.pagination a {
display: block;
padding: 5px 10px;
text-decoration: none;
background: #f0f0f0;
color: #333;
border: 1px solid #ddd;
}
.pagination a:hover {
background: #ddd;
}
/* 弹性盒子样式 */
.flex-container {
display: flex;
background-color: #f9f9f9;
padding: 10px;
margin: 10px 0;
}
.flex-item {
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
font-size: 16px;
}
/* 框大小样式 */
.box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
.box-large {
width: 200px;
height: 200px;
}
这个代码示例展示了如何使用CSS3的分页样式、弹性盒子布局样式和框大小样式。其中包含了基本的列表分页样式、弹性盒子布局样式和盒子模型的应用,这些是CSS布局中常用的技术。
评论已关闭