HTML5使用规范
标准页面布局样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.fl {
float: left;
}
.clear::after {
content: '';
display: block;
clear: both;
}
/* 如果想占满全部屏幕需要先设置html和body的高度 */
html,
body {
height: 100%;
}
.box {
height: 100%;
background-color: aqua;
}
header {
line-height: 50px;
background-color: #FFC0CB;
text-align: center;
}
.main {
/* 这里的height是继承.box的多了个header的高度 */
/* height: 100%; */
/* calc计算属性 */
/* 这里-减号左右必须有空格 */
height: calc(100% - 50px);
background-color: blueviolet;
}
nav {
line-height: 38px;
background-color: #90EE90;
text-align: center;
}
section {
/* 这里的100%是.main的高度 */
height: calc(100% - 38px - 45px);
background-color: crimson;
}
section aside {
/* 这里的高度是container的高度 */
text-align: center;
height: 100%;
background-color: chocolate;
width: 35%;
position: relative;
}
section article {
/* 这里的高度是container的高度 */
height: 100%;
background-color: green;
width: 65%;
text-align: center;
position: relative;
}
footer {
line-height: 45px;
background-color: #FFC0CB;
text-align: center;
}
aside span{position: absolute;
top: 50%;
margin-top: -10px;
left: 50%;
margin-left: -24px;
}
article span{position: absolute;
top: 50%;
margin-top: -10px;
left: 50%;
margin-left: -16px;}
</style>
<body>
<div class="box">
<!-- 页面中某个区块的页眉 -->
<header>头部</header>
<div class="main">
<!-- 页面导航的链接组 -->
<nav>导航</nav>
<section class="clear">
<aside class="fl"> <span>侧边栏</span> </aside>
<article class=" fl"> <span>正文</span> </article>
</section>
<footer>底部</footer>
</div>
</div>
<!--section页面内容区块
article文章正文内容
aside侧边栏
footer页面区块的脚注-->
</body>
</html>
HTML5网页自动校准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 自动验证e-mail ,网址-->
<form action="">
<input type="url" value="123">
<input type="submit" value="提交">
<input type="color" name="colorname"><!--类型是color 点击提交会提交16位的颜色值给后台 -->
<input type="search" name="searchname"><!-- 表示一个搜索框 -->
<input type="number" name="number" min="2" max="20"><!-- step可以跳数字，设置步长为4可加数值 -->
<input type="submit" value="提交">
<input type="range" name="rangename" max="80" min="20" step="10" value="30">
<!-- placehholder搜索关键字，输入框提示信息，required表示必输入的文本框 -->
</form>
</body>
</html>
HTML5 CSS3 选择器举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ul li:first-of-type{background-color: red;} *//* li同类型的第一个 */
/* ul li:first-child 不适用， */
ul p:only-of-type{background-color: red;}/* 只选唯一的那个p */
ul::before{/* 伪类不是真正的元素，不会占用元素的空间 */
content: "123132";
color: red;
}
</style>
</head>
<body>
<ul>
<p>我是p元素</p>
<li>我是程序员1号</li>
<li>我是程序员2号</li>
<li>我是程序员3号</li>
<li>我是程序员4号</li>
<li>我是程序员5号</li>
</ul>
</body>
</html>
