<!DOCTYPE html>
<html style="height: 100%;">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>预约体检</title>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_DOMAIN; ?>/1.0/model.css?v=<?php echo VERSION_NUMBER ?>" />
<style type="text/css">
html,body{
background-color: #F8F7F7;
}
.examination_top{
width: 100%;
/* height: 8rem;*/
background-color:#FFFFFF;
}
.examination_top_text{
width: 100%;
height: 4rem;
text-align: center;
line-height: 5rem;
font-weight: 600;
color: #F85D35;
}
.examination_top_date{
width: 90%;
height: 5rem;
margin-left: 5%;
border-top: 2px #A8A7A7 dashed;
text-align: center;
line-height: 3rem;
}
.examination_top_date>.examination_top_date_time{
color: #6C6B6C;
}
.examination_top_date>.examination_top_date_fuhao{
color: #6C6B6C;
}
.examination_bottom{
width: 100%;
background-color: #FFFFFF;
position: absolute;
top: 9.7rem;
bottom: 0;
}
.examination_bottom_text{
margin: .5rem 0 .5rem .5rem;
font-weight: 500;
color: #6C6B6C;
}
.examination_bottom_textarea{
margin: 0 .5rem .5rem .5rem;
}
.examination_bottom_textarea>textarea{
width: 100%;
height: 10rem;
border-radius: 5px;
}
.examination_bottom_button{
text-align: center;
padding: .5rem 0;
color: #FFFFFF;
background-color: #12B9F7;
position: absolute;
bottom: 2rem;
left: .5rem;
right: .5rem;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="examination_top">
<div class="examination_top_text">体检日期</div>
<div class="examination_top_date">
<span class="examination_top_date_time">
<?php echo date('Y-m-d', time()); ?>
</span>
<span class="examination_top_date_fuhao">></span>
</div>
</div>
<div class="examination_bottom">
<div class="examination_bottom_text">备注</div>
<div class="examination_bottom_textarea">
<textarea></textarea>
<div id="titlelen" style="float:right;color: gray;">0/100</div>
</div>
<div class="examination_bottom_button">提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</div>
</div>
</body>
<!-- <script src="<?php echo JS_DOMAIN; ?>/1.0/jquery-3.1.0.min.js?v=<?php echo VERSION_NUMBER ?>"></script> -->
</html>

html5+css3 h5页面生成的思路的更多相关文章

  1. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  2. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  3. 超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）

    在线演示 使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)

  4. H5页面项目的思路整理

    这是H5项目完成后的一些整理,有些理解不能非常准确,希望大家能帮忙指出. 移动端的适配 一些名词解释 visual viewport 可视视图 layout viewport 布局视图 vm 可视视图 ...

  5. 记录一个h5页面生成canvas画布做签名的js插件--signature_pad

    demo地址:https://jsfiddle.net/02dLn15g/5/ GitHub地址:https://github.com/szimek/signature_pad 配置项: dotSiz ...

  6. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  7. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  8. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  9. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

随机推荐

  1. 【转载】wondows下wget的使用

    原文地址:http://www.cnblogs.com/Randy0528/archive/2011/10/21/2219831.html 感觉要放弃windows了,,,哎,,,, 下载window ...

  2. Spring Boot后台启动不打印nohup.out

    #!/bin/bashnohup java -jar websocket-server-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod --serve ...

  3. HTML5新增的本地存储功能(笔记)

    HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内).②会话存储对应sess ...

  4. 内核：为了fan的健康，我的重新编译记录

    email: jiqingwu@gmail.com date: 2008-02-13 关键词:ubuntu cpu cpufreqd cpufrequtils 编译 内核 装上ubuntu7.10后, ...

  5. bzoj1190 [HNOI2007]梦幻岛宝珠

    传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1190 [题解] 首先,我们把所有物品都分解成$a\times 2^b$的形式,然后把物品按 ...

  6. HDU1693 Eat the Trees（zerojudge a228）

    传送门: https://zerojudge.tw/ShowProblem?problemid=a228 http://acm.hdu.edu.cn/showproblem.php?pid=1693 ...

  7. 【leetcode 简单】 第一百五十题 两个列表的最小索引总和

    假设Andy和Doris想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答案不止一个,则输出所有答 ...

  8. C# XML序列化和反序列化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  9. css3新增的属性

    由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀, 如:-moz-       firefox火狐 -ms-         IE ...

  10. windows环境cmd下执行jar

    项目目录结构 一,在pom.xml文件里添加配置 <build> <plugins> <plugin> <groupId>org.apache.mave ...