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的日历的更多相关文章
	

    
								
  1. iOS开发UI篇—模仿ipad版QQ空间登录界面
		
    iOS开发UI篇—模仿ipad版QQ空间登录界面 一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...
    
		
    2. 
						
  2. css模仿微信弹出菜单
		
      css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...
    
		
    3. 
						
  3. 100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全
		
    Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式,在 Mac 中的 Safari 浏览器 同样开启开发者模式后,进行联机调试.功能彪悍. 最近在做一个页面时,发现在 iPad 的  ...
    
		
    4. 
						
  4. div+css模仿登录界面
		
    我的代码,这种方式形成了遮罩层,遮罩层的"登录"按钮仍可被点击,非我想要的. <!DOCTYPE html> <html lang="en"& ...
    
		
    5. 
						
  5. vue 模仿机票自定义日历组件，区间选择
		
    1.创建组件  components > calander > index.vue <template> <div class="page" v-if ...
    
		
    6. 
						
  6. html+css模仿的锤子官方首页
		
    <div id="wrapper"> <header> <div class="container"> <h1> ...
    
		
    7. 
						
  7. js+css模仿打字效果
		
    1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
    
		
    8. 
						
  8. 【HTML】实战阿里云src页面css模仿基础学习
		
    实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...
    
		
    9. 
						
  9. HTMl+CSS 模仿京东网登录页面
		
    课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码:  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 官网svn提交到代码库，但是不能同步到web目录
			
    现象:数据库名字存在,但是数据库中表为空:svn提交代码能到svn库中,但不能同步到web目录. 原因:磁盘分区满了,导致内测服务器中数据库先删掉但没能从线上拉取回来,显示数据库中表为空: 磁盘满,导 ...
    
			
    2. 
						
  2. IO流1 --- File类的实例化 --- 技术搬运工（尚硅谷）
			
    构造器1 File(String pathname) //相对路径 File file1 = new File("hello.txt"); //windows绝对路径 File f ...
    
			
    3. 
						
  3. JSP Web第八章整理复习  过滤器
			
    P269  Filter过滤器的基本原理 P269  Filter过滤器体系结构 原理和体系结构看懂了就行 P270 例8-1过滤器代码与配置文件 略
    
			
    4. 
						
  4. NOIP模拟 17.8.15
			
    NOIP模拟17.8.15 A 债务文件名 输入文件 输出文件 时间限制 空间限制debt.pas/c/cpp debt.in debt.out 1s 128MB[题目描述]小 G 有一群好朋友,他们 ...
    
			
    5. 
						
  5. 遇到的bug
			
    1  div出现莫名其妙的空白bug 之前写了一个后台管理系统,项目不小加上是改版,很多的js都是用的之前的,  bug多到自己都不想看, 其中有个是用iframe 框架加载表格页面,但是右边跟下边出 ...
    
			
    6. 
						
  6. Java中时间和日期的处理
			
    一.日期转换为字符串 1.日期以特定的格式输出: // 创建日期并转换为yyyy-MM-dd格式_(MM一定要大写,以免与hh:mm:ss中的mm冲突) SimpleDateFormat sdf =  ...
    
			
    7. 
						
  7. 【JZOJ3873】【NOIP2014八校联考第4场第2试10.20】乐曲创作(music)
			
    ujfuiaty 小可可是音乐学院的一名学生,他需要经常创作乐曲完成老师布置的作业. 可是,小可可是一个懒惰的学生.所以,每次完成作业时,他不会重新创作一首新的乐曲,而是去修改上一次创作过的乐曲作为作 ...
    
			
    8. 
						
  8. 【Django入坑之路】Django后台上传图片，以及前端的显示
			
    #setting配置: MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(BASE_DIR, "media") # ...
    
			
    9. 
						
  9. Directx教程(28) 简单的光照模型(7)
			
    原文:Directx教程(28) 简单的光照模型(7)        现实生活中的点光源都是随着距离衰减的,比如一个电灯泡在近处会照的很亮,远处光线就很弱.本节中我们在前面光公式的基础上,再给漫反射和 ...
    
			
    10. 
						
  10. QT 引用之前项目模板导致计算速度严重下降
			
    最近做RRT规划算法,在新建工程中测试时,每一个周期大概花费20MS,但是当我把算法移植到之前写的工程模板中时,计算效率相当低,变为500毫秒.期初是以为代码有问题,然后就逐句查找,发现代码并没有问题 ...
    
			
    11.