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. 微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
			
    wxml: <image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{i ...
    
			
    2. 
						
  2. DIV+CSS网页布局常用的一些基础知识整理
			
    CSS命名规范 一．文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 二．常 ...
    
			
    3. 
						
  3. RestController注解下返回到jsp视图页面(转)
			
    这个问题我也遇到过,下面的方法可以试试 蓝萝卜blu @RestController注解下返回到jsp视图页面 spring4.1中添加了@RestController注解很方便,集成了@Respon ...
    
			
    4. 
						
  4. python csv文件打开错误：_csv.Error: line contains NULL byte
			
    当python读取文件出现_csv.Error: line contains NULL byte时, # -*- coding:utf-8 -*- import csv with open(r'E:\ ...
    
			
    5. 
						
  5. Spring_使用(JDBC)
			
    Spring_对JDBC的支持 使用JdbcTemplate更新数据库 导入jar包 创建applicationcontext.xml <?xml version="1.0" ...
    
			
    6. 
						
  6. java memory allocation（转）
			
    Java的运行时数据存储机制 Java程序在运行时需要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存储?这些数据结构有什么特点?本文试图说明此命题的皮毛之皮毛. 概念   对 ...
    
			
    7. 
						
  7. java读取项目路径下的中文文件乱码问题
			
    出现乱码错误: 处理方案: 对文件路径中存在中文的,都要进行URLDecoder.decode(path,"UTF-8")编码转换 wordContent = URLEncoder ...
    
			
    8. 
						
  8. 学习iOS设计--iOS8的颜色、文字和布局学习
			
    在去年,Apple针对新时代用户彻底更新了其设计语言.现在的设计语言相对之前大为简化,能够让设计师将精力集中到动画和功能上,而不是繁复的视觉细节上. 很多人都曾问过我:设计应当如何入门?成为一名优秀设 ...
    
			
    9. 
						
  9. SSM框架用JSON进行前后端数据传输
			
    一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输 前端代码 这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内 ...
    
			
    10. 
						
  10. #define 和常量 const 的区别
			
    const 后的常量,程序对其中只能读不能修改. #include <iostream> using namespace std; int main() { const double pi ...
    
			
    11.