css模仿ipad的日历
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="css模仿ipad的日历的更多相关文章
- iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇—模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
- css模仿微信弹出菜单
css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
- 100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全
Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的 ...
- div+css模仿登录界面
我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...
- vue 模仿机票自定义日历组件，区间选择
1.创建组件 components > calander > index.vue <template> <div class="page" v-if ...
- html+css模仿的锤子官方首页
<div id="wrapper"> <header> <div class="container"> <h1> ...
- js+css模仿打字效果
1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- 【HTML】实战阿里云src页面css模仿基础学习
实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...
- HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
随机推荐
- System.ArgumentException: 回发或回调参数无效。在配置中使用 < pages enableEventValidation="true"/>
转载自http://blog.csdn.net/dongge825/article/details/7868151 关于在同一个页面中使用Gridview控件的时候发现气updaeting事件无法被服 ...
- FatMouse' Trade (贪心)
#include <iostream> #include <stdio.h> #include <cstring> #include <cmath> # ...
- DOM,jquery,vue
DOM 部分引用自引用自七色花的姐姐 1.DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面.窗口和文档 2.DOM的作用 做网页的都知道,想要做 ...
- php手册常用的函数
<?php ************************************************************/ header("Content-type:tex ...
- 2019-10-18-dotnet-修复找不到-System.ServiceProcess-定义
title author date CreateTime categories dotnet 修复找不到 System.ServiceProcess 定义 lindexi 2019-10-18 21: ...
- ubuntu更新问题
ubuntu 下出现E: Sub-process /usr/bin/dpkg returned an error code 在用apt-get安装软件时出现了类似于install-info: No d ...
- day39-Spring 18-Spring的JDBC模板：查询的操作
package cn.itcast.spring3.demo2; import java.sql.ResultSet; import java.sql.SQLException; import jav ...
- js的下拉刷新和上拉加载，基于iScroll v4.2.5
html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...
- oracle-600错误
event='10841 trace name context forever' 可以屏蔽这个ORA-00600错误. SQL> show parameter event NAME TYPE V ...
- 【风马一族_mysql】mysql基本指令
船停在港湾是很安全的,但那不是造船的目的! 用户 创建用户 mysql>grant 权限(select,insert,update,delete) on 数据库.数据表 to 用户名@电脑 ...