用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),可以直接搜索使用

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

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

用HTML+CSS写一个请假条相关推荐

[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
[css] 请用css写一个扫码的加载动画图
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rot ...
教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环
[css] 写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环 .animation-block {width: 50px;height: 50px;backgroun ...
[css] 写一个高度从0到auto的transition动画
[css] 写一个高度从0到auto的transition动画写不了吧,max-height 定值倒是可以个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一 ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
用Html+css写一个渐变背景的个人名片
原文地址:10分钟用Html+css写一个渐变背景的个人名片_网页制作_青青个人博客个人名片在个人博客网站上的位置一般是在首页右上角,一点开网站就能看见,信息量并不多,但是对于访客说,可以直观快速的 ...

用HTML+CSS写一个请假条

用HTML+CSS写一个请假条相关推荐

最新文章

热门文章