博客列表 >前端必备的4个知识点——2019年9月2号20点00分

前端必备的4个知识点——2019年9月2号20点00分

虎子爸爸
虎子爸爸原创
2019年09月03日 13:49:40892浏览

作业一:iframe标签的运用

  1. 独立静态运用


实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内联标签</title>
</head>

<body>
    <h3>内联标签iframe</h3>
    <iframe src="https://www.qq.com" frameborder="10" width="1200" height="300"></iframe>
    <p>如果不定义宽高,iframe标签默认宽380,高190</p>
    <b>有些网站本身设定了防内联,比如php中文网,就会出现对应的错误提示。</b>
    <code>frameborder=0,没有边框,只有滚动框;frameborder=1,有边框,也有滚动框;这个属性是个布尔值;</code>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


    2。iframe与a标签的静态结合运用

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内联标签的拓展应用</title>
</head>

<body>
    <h4>a标签和iframe标签的结合运用——静态版A</h4>
    <a href="https://www.qq.com" target="main">腾讯</a>
    <a href="https://www.163.com" target="main">网易</a>
    <iframe frameborder="0" name="main" width="600" height="200" src="https://www.163.com"></iframe>

    <h4>导航栏中a与iframe标签的运用</h4>
    <style>
        a {
            text-decoration: none;
        }
        
        li {
            display: inline-block;
            border: 1px solid red;
            margin-top: 5px;
            margin-left: 10px;
            padding: 5px 20px;
        }
        
        ul {
            width: 90%;
            height: 120px;
            border: 1px solid black;
        }
    </style>
    <ul style="list-style-type: none;">
        <h5>内部UL容器</h5>
        <li>
            <a href="https://www.qq.com" target="main">qq</a>
        </li>
        <li>
            <a href="https://www.163.com" target="main">163</a>
        </li>
        <li>
            <a href="https://www.qq.com" target="main">qq</a>
        </li>
        <li>
            <a href="https://www.163.com" target="main">163</a>
        </li>
    </ul>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

    3.iframe与a标签的JS动态结合运用——待续

作业未完,请勿批改!

作业二:CSS样式、选择器与盒模型

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒模型及css选择器</title>
</head>

<body>
    <style>
        h4 {
            border: 1px solid blue;
            padding: 10px 20px;
        }
        
        .dd-juli {
            color: crimson;
        }
        
        .dd-weizi {
            color: indigo;
        }
        
        #dd-quanzhong {
            font-size: 10px !important;
            color: black;
        }
        
        #dd-last {
            color: indigo;
        }
        
        .dd-quan-a {
            color: blueviolet;
        }
        
        dd {
            color: crimson;
        }
        
        dd:last-child {
            color: green;
        }
        
        ul {
            width: 300px;
            height: 80%;
            border: 2px solid cornflowerblue;
            padding: 30px 50px;
            margin: 20px auto;
            margin-top: 30px;
        }
    </style>
    <h4>盒模型及CSS选择器——所见即盒子</h4>


    <ul>
        <h5>CSS样式设置优先级:</h5>
        <li>
            <dl>距离远近</dl>
            <dd class="dd-juli" style="color:darkblue;">1: 比如同一个元素的样式设置,距离该元素最近的样式有效,距离远的会被覆盖。</dd>
            <dd class="dd-juli">2: 这里另外的对比示例</dd>
        </li>
        <li>
            <dl>位置前后</dl>
            <dd class="dd-weizi">1: 位置后的样式覆盖位置前的样式;</dd>
        </li>
        <li>
            <dl>页面内外</dl>
            <dd>当前页面的样式覆盖加载的样式</dd>
        </li>
        <li>
            <dl>权重大小</dl>
            <dd id="dd-quanzhong" class="dd-quan-a" style="font-size: 20px;color:limegreen;">!important最重</dd>
            <dd class="dd-quan-a">其次是——元素内样式</dd>
            <dd>再其次是——ID选择器</dd>
            <dd>再其次是——CLASS选择器</dd>
            <dd class="dd-quan-a" id="dd-last">最后是元素选择器</dd>



        </li>
    </ul>
    <style>
        .dd-weizi {
            color: darkseagreen;
        }
    </style>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议