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. oracle-OFA模型
			
    用于unix文件系统和安装点的命名约定 用于目录路径的命名约定 用于数据文件的命名约定 用于oracle相关文件的标准位置
    
			
    2. 
						
  2. Python之常用模块1
			
    1.time datetime模块 #_*_coding:utf-8_*_ __author__ = 'Alex Li' import time # print(time.clock()) #返回处理 ...
    
			
    3. 
						
  3. QLabel添加Click信号
			
    使用自定义label来实现此功能 其他控件可参照此例. #include "customerqlabel.h" CustomerQlabel::CustomerQlabel(QWi ...
    
			
    4. 
						
  4. Apache Camel 与 Spring Boot 集成，通过FTP定时采集、处理文件 （转）
			
    1.概要: 本项目主要是通过在Spring平台上配置Camel.FTP,实现定时从FTP服务器下载文件到本地.解析文件.存入数据库等功能. 2.搭建空项目: Spring Boot有几种自动生成空项目 ...
    
			
    5. 
						
  5. 安装LoadRunner11时，缺少vc2005_sp1_with_atl_fix_redist错误的解决方案
			
    安装LoadRunner11时,会报缺少vc2005_sp1_with_atl_fix_redist错误,类似下图所示: 由提示信息可知,这里是由于本机缺少该组件所致,解决方案就是安装此组件,可以去网 ...
    
			
    6. 
						
  6. More Effective C++: 06杂项讨论
			
    32:在未来时态下发展程序 世事永远在变,好的软件对于变化有良好的适应能力:可以容纳新的性质,可以移植到新的平台,可以适应新的需求,可以掌握新的输入.所谓在未来时态下设计程序,就是接受“事情总会改变” ...
    
			
    7. 
						
  7. openjudge dp水题记录
			
    当发现自己竟然不会打dp的时候内心是崩溃的,然后按照一年前的刷题记录刷openjudge,然后发现自己准确率比一年前(刚学信竞两个月时)的准确率低得多,已经没救. 列一下最近打的几道sb题 2985: ...
    
			
    8. 
						
  8. python爬虫：一些爬虫常用的技巧
			
    1.基本抓取网页 get方法 import urllib2 url = "http://www.baidu.com" response = urllib2.urlopen(url) ...
    
			
    9. 
						
  9. WPF自定义控件 依赖属性绑定
			
    控件cs文件 using System.ComponentModel; using System.Windows; using System.Windows.Controls; using Syste ...
    
			
    10. 
						
  10. 用dreamweaver查找页面位置
			
    复制页面的一段代码,然后用Dreamweaver在整个项目中查找代码. 找不到的原因:1.查找的内容是从数据库中读出来的.连数据库文件一起查便知. 2.查找的代码是某个函数生成的.
    
			
    11.