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. day38 15-Spring的配置文件引入的问题
			
    配置文件内容过多修改起来维护起来很麻烦.Struts 2可以在总的配置文件中引入其他的配置文件.这是一种办法.第二种办法在加载配置文件的时候,里面可以一次性传多个. <?xml version= ...
    
			
    2. 
						
  2. scorllview嵌套gridview和listview的兼容问题
			
    ScrollView嵌套GridView或ListView,由于这两款控件都自带滚动条,当他们碰到一起的时候便会出问题,即GridView会显示不全. 解决办法:自定义一个GridView控件 pac ...
    
			
    3. 
						
  3. 免费报名 | 汇聚HBase&大数据最前沿 Apache HBaseConAsia2019盛会火热来袭
			
    Apache HBase介绍 Apache HBase是基于Apache Hadoop构建的一个高可靠性.高性能.可伸缩的分布式存储系统,它提供了大数据背景下的高性能的随机读写能力,HBase是Goo ...
    
			
    4. 
						
  4. OpenCV在各版本上的安装教程
			
    目录 使用pip安装OpenCV 安装Python版的OpenCV 4 安装Python版的OpenCV 3 在OSX和 macOS上安装OpenCV 3 在Ubuntu上安装Python版的Open ...
    
			
    5. 
						
  5. Chrome的使用技巧总结
			
    设置一>” 首先设置打开特定的网页 设置--> “下载位置” (Ctrl+H),快速查找自己浏览器访问网页的历史记录 (Ctrl+D),将目前认为比较好的网页保存. ctrl+t  新建标 ...
    
			
    6. 
						
  6. phpcms信息模型使用
			
    PHPCMS V9 分类信息模型测试版下载 安装 1.确定您的phpcms版本为20110318版本以上 2.将所有文件覆盖到网站目录下,运行install_info. 3.将文件中所有的phpcms ...
    
			
    7. 
						
  7. TIJ——Chapter Fourteen:Type Information
			
    Runtime type information(RTTI) allows you to discover and use type information while a program is ru ...
    
			
    8. 
						
  8. IDI Open 2016 H 字符串模拟题
			
    H - Palindrome Names 题意:给定一个字符串,每次可以向末尾添加一个字符或者更改一个字符.求使得字符串为回文串(从前往后和从后往前读一样)所花费的最小步数. 题解: 看来需要多思考啊 ...
    
			
    9. 
						
  9. laravel setxxAttribute和getxxAttribute的使用
			
    setxxAttribute 在设置(sql: insert update) 的时候 会将$obj->xx = 'value'的时候, 操作数据库之前 自动转化一下 getxxAttribute ...
    
			
    10. 
						
  10. Oracle函数——TO_DATE
			
    TO_DATE 含义:将具有固定格式的字符串类型的数据转化为相对应的Date类型数据,官网解释如下图   使用方法 TO_DATE("需要转换的字符串","日期格式&qu ...
    
			
    11.