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个数值,则对应所有。