用HTML+CSS写一个请假条

       因为还没学到后端和数据存储，所以里面的数据都是死数据，而且只是一个小练习，里面的内容还需要一定程度的优化

1.导航条

<!-- 导航栏 -->
    <div class="nav">
        <!-- 导航栏内容 -->
        <div class="nav_con">
            <div class="nav_left">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="nav_cen">
                出示假条
            </div>
            <div class="nav_right">
                <i class="iconfont icon-wode">请出示请假条二维码</i>
            </div>
        </div>
    </div>

导航条样式（使用css引入操作）

.nav{
    width: 400px;
    height: 64px;
}
.nav_con{
    width: 400px;
    height: 64px;
    background-color: rgb(0, 128, 23);
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    padding: 0 15px;
}
.nav_left{
    float: left;
}
.nav_left i{
    font-size: 22px;
}
.nav_cen{
    width: 100px;
    font-size: 20px;
    text-align: center;
}
.nav_right{
    margin-left: 120px;
    font-size: 20px;
}
.nav_right i{
    font-size: 15px;
}

2.中间部分

 <div class="cen">
        <!-- 主题内容 -->
        <div class="cen_con">
            <div class="one">
                <h1>请假条</h1>
                <h2>CSDN学校 HTML学院 </h2>
            </div>
            <div class="one_img">
                <img src="自己的图片.jpg" alt="">
            </div>

            <div class="mk">
            <div class="two">
                <div class="two_img">
                    <img src="一张图片审核通过的图片" alt="">
                </div>
                <div class="two_txt">
                    <h2> 姓名：<span>张三</span></h2>
                    <h3>性别：<span>男</span></h3>
                    <h3>院系：<span>2018级</span></h3>
                    <h3>学号：<span>0000000000</span></h3>
                </div>
            </div>

            <div class="three">
                <h1>请假时间</h1>
                <h2 style="font-size:14px; text-indent:3rem;">起<span style="font-size: 20px; margin-left: 50px;">2020-10-09 下午</span></h2>
                <h2 style="font-size:14px ; text-indent:3rem;">至<span style="font-size: 20px;margin-left: 50px;">2020-10-09 下午</span></h2>
            </div>

            <div class="date">

            </div>
        </div>

            <div class="four">
                <h1>离校不出市</h1>
                <h2>审批人：<span>李四</span></h2>
                <h2>批准时间：<span>2022-20-09 12:59</span></h2>
            </div>
        </div>
    </div>

中间部分CSS样式

.cen{
    width: 400px;
    height: 600px;
    border: 1px solid gray;
    border-radius: 15px 15px;
    background-color: white;
    box-shadow:0px 0px 20px 0px #88888888;
    margin-left:7px;
    box-sizing: border-box;
    padding: 0px 5px;
}
.one{
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    margin-left: 100px;

}
.one h1{
    font-size: 22px;
    font-weight: 400;
}
.one h2{
    font-size: 16px;
    font-weight: 300;
    color: red;
}
.one_img{
    float: right;
    margin-top: 5px;
    margin-right: 20px;
    width: 100px;
    height: 90px;
    background-color: antiquewhite;
}
.one_img img{
    width: 100%;
    height: 100%;
    position: relative;
    
}

.two{
    margin: 5px 10px;
    height: 220px;
}
.two_img{
    width: 150px;
    height: 220px;
    float: left;

}
.two_img img{
    width: 100%;
    height: 100%;
}
.two_txt{
    width: 200px;
    float: right;
    margin-top: 15px;
}
.two_txt h2{
    font-size: 19px;
    font-weight: 500;
}
.two_txt>h3{
    color: gray;
    font-size: 17px;
    font-weight: 300;
}

.three{
    box-sizing: border-box;
    margin: 5px 0;
    padding: 0 10px;
}
.three h1{
    font-size: 20px;
    font-weight: normal;
    color: gray;
    border-bottom: 1px solid #ccc;
}
.three h2{
    color: gray;
    font-weight: 400;
    border-bottom:1px solid #ccc ;
}

.four h1{
    font-size: 24px;
    font-weight: normal;
    color: red;
    text-align: center;
    /* background-color: antiquewhite; */
    margin-top:25px;
    margin-bottom: 25px;
}
.four h2{
    font-size: 17px;
    font-weight: normal;
    color: gray;
    text-align: center;
}

3.底部

<div class="wb">
        <a href="">点击返校<span class="iconfont icon-xiangyoujiantou"></span></a>
    </div>

底部CSS样式

.wb{
        margin: 5px 150px;
    }
.wb a{
        text-decoration: none;
        color: blue;
     }

4.动态时间表示（此处使用JavaScrip）

 @keyframes move1{
            /* 最初状态：form{}
            最终状态：to{} */
            0%{
                transform: translateX(40px);
                transform: translateY(40px);
                opacity: 1;
            }
            33%{
                /* transform: translateX(100px); */
                transform: translateY(-200px);
                opacity: 1;
                
            }
            66%{
                transform: translateX(130px);
                opacity: 1;
            }
            100%{
                transform:translateY(-120px) ;
                opacity: 1;
            }

        }

       .date{
        position: absolute;
        top:200;
        width: 370px;
        font-size: 50px;
        font-weight: 600;
        color: #ccc;

         /* 指定要执行的关键帧动画（那个标签使用，添加在那个标签） */
         animation-name: move1;
            /* 动画需要时间 */
            animation-duration: 30s;
            /* 动画执行次数 */
           animation-iteration-count: 1000;
           /* 延迟执行 */
           animation-delay: 1s;
       }

<script>
	setInterval(function(){
		document.querySelector(".date").innerHTML = new Date().toLocaleString();
	},1000)
</script>

备注：代码中使用了阿里图标（iconfont),可以直接搜索使用

整体效果如下（时间为动态）

 

（以上代码，纯属娱乐，误伤及本人）