博客列表 >HTML中内联框架target与name属性的关联,CSS中各种标签样式及盒模型中内外边距、边框样式的设置及盒模型要素的顺序,2019年7月3日PHP学习第三课

HTML中内联框架target与name属性的关联,CSS中各种标签样式及盒模型中内外边距、边框样式的设置及盒模型要素的顺序,2019年7月3日PHP学习第三课

Johnson的博客
Johnson的博客原创
2019年07月09日 11:26:43511浏览

郁闷了,作业做完之前不小心点错了,点了个X窗口关了,全部重新写  o(╥﹏╥)o

今天学习了下内联框架,因为之前自己有想过如何做一个自己的网页,现在学习了内联框架,发现这是个很好用的东西,不需要额外新增窗口,可以给个很好的用户体验,如下代码:

<h1>内联框架</h1>
<a href="demo.html" target="reg">内联网址</a>
<iframe src="" frameborder="1" name="reg" width="500" height="300"></iframe>

其中a标签的target对象必须跟iframe的name元素的值对应起来,才能进行一个内部链接。

其次本课还学习了 元素的样式设置,按照优先级分别是:

最高的为直接在元素内部设置的样式:内部样式,如下代码:

<p style="color: yellow">我是应该是啥颜色?</p>

其次为HTML内部的样式代码:如下代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>PHP学习第三天</title>
   <style>
p{
           color: red;
}
       .blue{
           color: blue;
}
       #green{
           color: green;
}
   </style>
</head>
<body>
<h1>css中的内联样式,内部样式,外部样式的应用</h1>
<p>我是红色的!</p>
<p class="blue">我是蓝色的!</p>
<p class="blue" id="green">我是绿色的!</p>
<p style="color: yellow">我是应该是啥颜色?</p>
</body>
</html>

运行实例 »

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

最后就是外部引入的CSS代码

本课最后将的是盒模型,其中盒模型的margin和padding因本身是透明的,所以只有宽度属性,而border是边框,既有宽度属性,还有样式属性及颜色属性

而盒模型各个元素的排列方式  顺序为 顺时针方向旋转,即为  上  右  下  左


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