<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器 - 日历</title>
<style>
body, ul, dl, dt, dd {
margin: 0;
padding: 0;
}
body {
background-color: #F7F7F7;
}
ul {
list-style: none;
}
.calendar {
width: 385px;
height: 312px;
padding: 48px 141px 10px 12px;
margin: 100px auto;
background: url(./images/bg.jpg) 0 0 no-repeat;
}
.calendar dt, .calendar dd {
overflow: hidden;
}
.calendar span {
display: block;
width: 48px;
height: 48px;
text-align: center;
margin-right: 1px;
border: 3px solid transparent;
float: left;
}
.calendar dt {
border-top: 1px solid #5CADFF;
}
.calendar dt span {
height: 28px;
line-height: 34px;
font-size: 14px;
}
.calendar dd {
border-top: 1px solid #c8cacc;
cursor: pointer;
}
.calendar span > b,
.calendar span > b {
display: block;
line-hei
CSS3案例之日历图案
最新推荐文章于 2024-04-26 14:38:08 发布
本文通过CSS3技术详细讲解如何创建一个富有创意的日历图案,包括使用选择器、盒模型、边框、背景、渐变、伪类等特性,实现日历的布局和美化。
摘要由CSDN通过智能技术生成