css模仿ipad的日历
2024-09-20 23:28:43
https://www.cnblogs.com/sandraryan/
题外话之：最近的练习用js之类的写起来会简单点，但是为了巩固基础，只好html和css硬怼页面X﹏X
这是一个日历的代码
注释有写哦。
先上效果图
是ipad上的日历本历了。
大概思路是日期部分用弹性盒子，设置换行，让他们排列好。
写的很随意，因为我菜。
凑活看吧。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap {
width: 1000px;
border: 1px solid lightgray;
margin: 0 auto;
} /* 头部开始 */
.top {
display: flex;
padding: 5px;
justify-content: space-between;
border: 1px solid lightgray;
border-radius: 5px;
overflow: hidden;
background-color: #dddbdd;
} .topLeft span,
.topLeft input {
display: inline-block;
vertical-align: middle;
} .topLeft span {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
} .topLeft>span:nth-child(1) {
background-color: #ee6b60;
border: 1px solid #d16c63;
} .topLeft>span:nth-child(2) {
background-color: #f6c251;
border: 1px solid #dcb774;
} .topLeft>span:nth-child(3) {
background-color: #64c957;
border: 1px solid #5eb84d;
} .topLeft>input {
background-color: rgb(255, 255, 255);
border: 1px solid lightgray;
padding: 3px 10px;
border-radius: 5px;
margin: 0 5px;
} .topMiddle {
margin-top: 3px;
} .topMiddle span {
border: 1px solid lightgray;
padding: 3px 20px;
background-color: #fff;
border-radius: 5px;
} .topMiddle>span:nth-child(3) {
background-color: gray;
color: white;
} .topRight input {
border-radius: 5px;
border: 1px solid lightgray;
height: 25px;
} .topRight input::placeholder {
text-align: center;
} /* 头部结束 */
/* 中间开始 */
.center {
margin: 10px;
} .center .left {
font-size: 24px;
} .center>span>span {
box-sizing: border-box;
float: right;
border: 1px solid lightgray;
padding: 3px 10px;
margin: 0 2px;
border-radius: 5px;
} /* 中间结束 */
/* 内容开始 */
.main {
display: flex;
/* width: 800px; */
flex-wrap: wrap;
} .week span {
display: inline-block;
width: 138px;
/* border: 1px solid lightgray; */
} .main div {
display: inline-block;
width: 141.85px;
height: 90px;
border: 1px solid lightgray;
border-right: none;
border-bottom: none;
}
.main>div>span {
margin: 0 5px;
}
.main div>span:nth-child(2){
float: right;
}
.red {
background-color: red;
border-radius: 50%;
padding: 2px;
color: white;
}
.holidy {
background-color: pink;
display: block;
padding-left: 10px;
margin-top: 10px;
}
.main>div:nth-child(7n+1),.main>div:nth-child(7n){
background-color: #f5f5f5;
color: #878787;
}
.main>div:nth-child(1) {
color: #c3c3c3;
}
.main>div:nth-last-child(1),
.main>div:nth-last-child(2),
.main>div:nth-last-child(3),
.main>div:nth-last-child(4),
.main>div:nth-last-child(5),
.main>div:nth-last-child(6),
.main>div:nth-last-child(7),
.main>div:nth-last-child(8),
.main>div:nth-last-child(9),
.main>div:nth-last-child(10)
{
color: #c3c3c3;
}
/* 内容结束 */
</style>
</head> <body>
<div class="wrap">
<!-- 头部开始 -->
<div class="top">
<div class="topLeft">
<span></span>
<span></span>
<span></span>
<input type="button" value="日历">
<input type="button" value="+">
</div>
<div class="topMiddle">
<span>日</span>
<span>月</span>
<span>周</span>
<span>年</span>
</div>
<div class="topRight">
<input type="search" placeholder="最新文章
- 需求：输入一个年份和月份 ，显示当前月日情况 ，星期数要对应准确 * 1.1900年1月1号开始 * 2.星期 ： 直接用总天数对7求余数 31 28 59 / 7 = 5 * 3.以\t来个开
- 《java中异常和错误》
- java并发：线程同步机制之计数器&Exechanger
- Android WebView常见问题及解决方案汇总
- 安装Pod时提示ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/pod
- CSS3 圆角（border-radius）详解
- poj3565Ants(KM-几何与图论的结合）
- hdu 2027
- 谈 IIS7.5 Asp.Net模拟用户
- Camera 幻灯片播放
- easy ui 表单提交添加遮罩，避免数据重复提交
- PowerDesigner中在生成的数据库脚本中用name列替换comment列作为字段描述的方法
- 在查询用户的权限的时候 使用左外连接 和 access数据库中左外连接
- maven 常用命令及操作（转）
- 灰度共生矩阵（GLCM） 及matlab代码实现
- Mysql 使用CMD 登陆
- PHP curl之爬虫初步
- JMeter监控服务器CPU、内存的方法
- nginx/php-fpm 访问php文件直接下载而不运行
- Web开发环境搭建 Eclipse-Java EE 篇
热门文章