博客列表 >a标签/ifame标签的组合应用,三种样式表的区别,盒模型特点—2019/7/3

a标签/ifame标签的组合应用,三种样式表的区别,盒模型特点—2019/7/3

降落伞的博客
降落伞的博客原创
2019年07月04日 10:33:01576浏览

1、运用a标签和iframe标签实现类似于 后台菜单效果。

  • 要使所有链接都在iframe框架中打开,关键在于将a标签中的arget属性值等于iframe的name属性值。

  • iframe框架可以设置样式,srcdoc属性中敲入的是H5代码,用于设置未打开任何链接的默认样式。

实例

    <ul><!--要将所有连接内容都在ifame打开,关键要在a标签中设置target属性,属性值等于iframe的name属性值-->
        <li><a href="demo1.html" target="kuang">用户列表</a></li>
        <li><a href="demo2.html" target="kuang">产品列表</a></li>
        <li><a href="demo3.html" target="kuang">订单列表</a></li>
        <li><a href="demo4.html" target="kuang">日志列表</a></li>
    </ul>
    <iframe srcdoc="<h1>未点击任何菜单时的默认展示</h1>" width="400" height="400" style="float:left" name="kuang"></iframe>

运行实例 »

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

2、三种样式表的组合应用

  • 三种样式表通常都会同时使用,优先级是内联样式>内部样式>外部样式。

  • 内部样式和外部样式都会使用到选择器,优先级是id > class > tag。

  • 编辑内联样式时,一定要在style="……"中编辑。

  • 编辑内部样式时,一定要在style标签中编辑。

  • 编辑外部样式时,一定要通过link标签引入。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="1.css">
    <style>
        #two {
            color: green;
        }
    </style>
</head>
<body>
    <!--内联样式适合针对某个标签,进行特定的样式,只有这个标签有,优先级最高-->
    <p id="one" style="color:red" >这是用内联样式表定义的样式</p>
    <!--内部样式适合针对此html文件,进行内部的专有设置,优先级是id > class > tag-->
    <p id="two">这是用内部样式表定义的样式</p>
    <!--外部样式适合针对多个html文件,进行统一的设置,效率高,但优先级最低-->
    <p id="three">这是用外部样式表定义的样式</p>
    <!--三种设置样式的优先级:内联样式>内部样式>外部样式-->
</body>
</html>

运行实例 »

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

3、任何标签都是一个盒模型,都可以对盒子的外部边距、边框、内部边距进行设置。

  • 其中,外边距margin和内边距padding都只能改变宽度,而边框可以设置其 宽度、样式(比如是虚线还是实线)、前景色。

  • 在对margin、padding设置宽度时,若直接在属性中填写数值,要注意填写顺序,依次对应“上右下左”。若只填写3个数值,则依次对应“上-左右-下”;若只填写2个数值,则依次对应“上下-左右”;若只填写1个数值,则对应所有。


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