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. C++学习笔记----4.5 C++继承时的对象内存模型
			
    推荐阅读:http://blog.csdn.net/randyjiawenjie/article/details/6693337 最近研究了一下,C++继承的内存对象模型.主要是读了读http://b ...
    
			
    2. 
						
  2. 阿里云CDN边缘脚本EdgeScript公测：简单语法完成CDN复杂配置
			
    CDN可以将源站内容分发至最靠近用户侧的节点,使得用户就近获取内容,提高用户的访问成功率和效率.作为CDN运维工程师,他的日常工作就是通过CDN系统的配置和管理,来确保CDN业务正常运转,以此来保障网 ...
    
			
    3. 
						
  3. python 导入整个模块
			
    
			
    4. 
						
  4. Ui自动化测试框架
			
    为了提高我们的UI测试效率,我们引用Ui自动化测试框架,这里简单先描述一下,后续会详细补充: 了解一个测试框架,我们就需要了解一下源码,能看懂源码即可: 1.稳定先封装wait EC,电脑性能配置较好 ...
    
			
    5. 
						
  5. N!分解素因子及若干问题【转载】
			
    这里写的非常好http://www.cnblogs.com/openorz/archive/2011/11/14/2248992.html,感谢博主,我这里就直接用了. 将N!表示成 N! = p1^ ...
    
			
    6. 
						
  6. UVa 10502【dp】
			
    uva 10502 题意:给定01矩阵,求有多少个由1构成的矩阵.1本事也算一个矩阵. 到最后还是想不出来..... 每次枚举两行,从第i行到第j行,k枚举矩阵的宽(column).这样就相当于每次看 ...
    
			
    7. 
						
  7. oracle函数 lag()和lead()
			
    [语法] lag(EXPR,<OFFSET>,<DEFAULT>) LEAD(EXPR,<OFFSET>,<DEFAULT>) [功能]表示根据COL1 ...
    
			
    8. 
						
  8. HDU-1069_Monkey and Banana
			
    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) P ...
    
			
    9. 
						
  9. Python 基础02 基本数据类型
			
    简单的数据类型以及赋值 变量不需要声明 Python的变量不需要声明,你可以直接输入: >>> a = 10 那么你的内存里就有了一个变量a,它的值是10,它的类型是 integer ...
    
			
    10. 
						
  10. pytorch源码解析：Python层  pytorchmodule源码
			
    尝试使用了pytorch,相比其他深度学习框架,pytorch显得简洁易懂.花时间读了部分源码,主要结合简单例子带着问题阅读,不涉及源码中C拓展库的实现. 一个简单例子 实现单层softmax二分类, ...
    
			
    11.