CSS3案例之日历图案

最新推荐文章于 2025-06-05 15:34:45 发布

原创

最新推荐文章于 2025-06-05 15:34:45 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

本文通过CSS3技术详细讲解如何创建一个富有创意的日历图案，包括使用选择器、盒模型、边框、背景、渐变、伪类等特性，实现日历的布局和美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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-height: 1;
		}

		.calendar