Day03-HTML5 CSS3

前端拓海

已于 2023-12-02 15:15:37 修改

阅读量22

点赞数

文章标签： html5 css3 前端

于 2023-12-02 09:27:19 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134747550

版权

一.引入外部静态资源

<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>