H5 以及 CSS3
<!DOCTYPE html>
<html>
<head>
<style>
*{
padding:0;
margin:0;
}
header{
display:block;
background-color:red;
width 100%;
height: 100px;
}
nav{display:block;
background-color:green;
width 100%;
height: 36px;
}
main{display:block;
background-color:gray;
width 100%;
height: 500px;
}
main>article{
background-color:pink;
width: 20%;
height: 100%;
float:left;
}
main>aside{background-color:yellow;
width: 80%;
height: 100%;
float: right;
}
footer{display:block;
background-color:skyblue;
width 100%;
height: 100px;
}
</style> </head>
<body style="background-image:url('9.jpg') no-repeat">
<script type="text/javascript">
// IE 9 及以下版本默认是行级元素，而行级元素设置高宽是会被忽略的,所以要加上 display:block 显式指定为块级元素
// 解决 IE 8 兼容性问题,方法一是 手动创建标签
document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
</script>
<header> 头部 </header>
<nav>导航栏</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>页脚</footer>
</body>
</html>
H5新增语义标签学习
<!DOCTYPE html>
<html>
<head>
<title>学生档案</title>
<meta charset="utf-8"/> <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="./action.js"></script>
<link rel="stylesheet" type="text/css" href="form.css" /> </head> <body>
<form action="" >
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input id="userName" type="text" name="userName" placeholder="请输入姓名:"/>
<label for="userPhone">手机号码:</label>
<input type="tel" id="userPhone" name="userPhone" placeholder="请输入手机号" pattern="^1\d{10}$" required>
<label for="userEmail">邮箱地址:</label>
<input type="email" id="userEmail" name="userEmail" placeholder="请输入邮箱地址" required/>
<label for="college">所属学院</label>
<input type="text" id="college" placeholder="请选择输入所属学院" list="collegeList"/>
<datalist id="collegeList">
<option>web前端开发</option>
<option>web后台开发</option>
<option>数据库开发</option>
<option>运维</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" id="score" placeholder="请输入入学成绩" min="0" max="100" value="60"/>
<label for="level">基础水平:</label>
<meter id="level" min=0 max="100" low="59" high="90"></meter>
<label for="enrollTime">入学时间:</label>
<input type="date" id="enrollTime"/>
<label for="leaveTime">毕业时间:</label>
<input type="date" id="leaveTime"/>
<input type="submit" value="提交"/>
</fieldset>
</form>
</body></html>
学生档案综合表单小例子
/*
$(function(){ $('input#score').on('input propertychange', function() {
$("meter#level").val($(this).val());
}); });
*/
window.onload=function(){
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
}
学生档案综合表单小例子自定义的action.js文件
*{
padding:;
margin:;
}
form{
width:600px;
margin:20px auto;
}
form>fieldset{
padding:10px;
}
form>fieldset>meter,
form>fieldset>input{
width:100%;
height:40px;
line-height:40px;
margin:10px 0;
border:none;
border:1px solid #ccc;
border-radius:4px;
font-size:16px;
padding-left:5px;
box-sizing:border-box;
}
form>fieldset>meter{
padding-left:1px;
}
form.css学生档案综合表单小例子自定义样式
示例效果如下：
多媒体标签：
<audio>
<video>
autoplay
controls
height
width
辅助 <source src="xxx" type="video/mp4"/> type="audio/mp3"
表单中新增的 标签有意义
DOM 操作：
querySelector(); 传入 li 标签 或者 .green ， #id 返回单个标签对象
querySelectorAll(); 传入 xxx 返回 一组标签对象
添加移除样式 class="red" 移除 red class 仍然在的
自定义属性：
H5 以及 CSS3的更多相关文章
- H5+JS+CSS3 综合应用
慕课网新教程H5+JS+CSS3 实现的七夕言情主题效果已经出炉了 从设计到实现到录制与编写用了快1个月的时间,说真的这个案例是慕课定制的,我之前也没有系统的做过这样的一个效果,在实现的时候自己也重新 ...
- 假如 Micromedia 没被收购，会不会早于 Apple 推动 H5、CSS3 的发展
看着如今大行其道的 H5.CSS3,想想当年的“网页三剑客”,不禁感慨:假如 Micromedia 没被收购,会不会早于 Apple 推动 H5.CSS3 的发展? 当时 Apple 先是询问 Ado ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- h5、css3基础
一.html(超文本标记语言) 作用:实现页面布局 页面由许多标记符号组成 由浏览器解释执行 二.html主题创建方式 !(英文状态)+tab html:4s+tab html:5+tab 三.标签 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- IE6，7，8在boostrap中兼容h5和css3
IE6.7.8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可: <script src="https://oss.maxcdn.com/libs/html5 ...
- H5和CSS3新增内容总结
CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴影(text-shadow.) 边框: 圆角(border-rad ...
- h5学习-css3的一些内容整理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- HTML-JS 循环 函数 递归
[循环结构的执行步骤] 1.声明循环变量 2.判断循环条件 3.执行循环体操作 4.更新循环变量 然后,循环执行2-4,直到条件不成立时,跳出循环. while循环()中的表达式,运算结果可以是各种类 ...
- 云服务器+tomcat+mysql+web项目搭建部署
云服务器+tomcat+mysql+web项目搭建部署 1.老样子,开头墨迹两句. 作为我的第二篇文章,有很多感慨,第一篇人气好低啊,有点小丧气,不过相信我还是经验少,分享的都是浅显的,所以大家可能不 ...
- B1015 德才论 （25 分)
19/25 #include<bits/stdc++.h> using namespace std; /* 1.de>=H && cai>=H 2.de> ...
- FUNMVP:几张图看懂区块链技术到底是什么？(转载)
几张图看懂区块链技术到底是什么? 本文转载自:http://www.cnblogs.com/behindman/p/8873191.html “区块链”的概念可以说是异常火爆,好像互联网金融峰会上没人 ...
- “Linux内核分析”实验二报告
张文俊 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.第二周学习内 ...
- 《Linux内核分析》 之 计算机是如何工作的
[李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...
- (Alpha)Let's-NABC
效果图 NABC Need 在日常生活中我们也许经常有这样的疑问:在空闲时间内经常感到无处可去:抑或是有个心血来潮的想法却无人响应:或者困扰于自己狭小的交际圈,希望能有更多的朋友.(打个羽毛球没人一起 ...
- Beta阶段冲刺三
Beta阶段冲刺三 Task1:团队TSP 团队任务 预估时间 实际时间 完成日期 新增其他学院的爬虫 180 130 11.30 新增其他学院的数据库字段修改 180 160 12.1 新增其他学院 ...
- SqlServer 获取字符串中小写字母的sql语句
SQL字符串截取(SubString) 作用:返回第一个参数中从第二个参数指定的位置开始.第三个参数指定的长度的子字符串. 有时候我们会截取字符串中的一些特殊想要的东西,大小写字母.模号.汉字.数字等 ...
- 【bzoj4771】七彩树 树链的并+STL-set+DFS序+可持久化线段树
题目描述 给定一棵n个点的有根树,编号依次为1到n,其中1号点是根节点.每个节点都被染上了某一种颜色,其中第i个节点的颜色为c[i].如果c[i]=c[j],那么我们认为点i和点j拥有相同的颜色.定义 ...