一.引入外部静态资源
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
main{
width: 1200px;
height: 2000px;
background-color:purple;
margin:100px auto 0px;
}
</style>
</head>
<body>
<iframe src="./09-公共头部.html" frameborder="0" width="100%" height="100%"></iframe>
<main></main>
<!-- 在当前页面无法用JS获取 iframe 引入过来的元素 -->
</body>
</html>
二.公共头部
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
header {
width: 100%;
height: 70px;
background-color: pink;
}
header .logo {
width: 20%;
height: 70px;
float: left;
background-color:skyblue;
}
header nav {
width: 80%;
height: 70px;
background-color: springgreen;
float: left;
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<nav></nav>
</header>
</body>
</html>
三.字体图标
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入字体图标的css文件 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4207157_714w9zshdcl.css?spm=a313x.manage_type_myprojects.i1.9.33113a81Ctb0nt&file=font_4207157_714w9zshdcl.css">
<!-- <link rel="stylesheet" href="../download/font_4207157_aq24k8rmwo/iconfont.css"> -->
<style>
/* .myfont {
color: red;
} */
</style>
</head>
<body>
<!-- <i></i> -->
<!-- iconfont 基类 -->
<div class="iconfont icon-GingerbreadMan myfont"></div>
<div class="iconfont icon-chicken-meat"></div>
<div class="iconfont icon-shiwutubiao-18"></div>
<div class="iconfont icon-a-2-63"></div>
<div class="iconfont icon-ICEDTEA"></div>
<div class="iconfont icon-pijiu"></div>
<div class="iconfont icon-baishikeleqishui"></div>
<script src="../download/font_4207157_aq24k8rmwo/iconfont.js"></script>
</body>
</html>
四.CSS3兼容性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
/* 过渡 */
/* transition: ; */
/* 浏览器内核 */
/* IE */
/* O */
/* 苹果 */
/* 火狐 */
/* 谷歌 */
/* IE */
/* -ms-transition: ; */
/* O */
/* -o-transition: ; */
/* 苹果 */
/* -webkit-transition: ; */
/* 火狐 */
/* -moz-transition: ; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>