博客列表 >PHP学习第三课

PHP学习第三课

阿布的博客
阿布的博客原创
2019年09月15日 23:58:03479浏览

1.内联框架:指当前页面中加载另外一个页面。用iframe表示,src为插入的页面链接,sredoc为内联页面开始页面,有宽高和name属性,name属性可在A标签里面引用,frameborder为设置边框大小。一般用来制作网站管理后台。

实例

 <h3><a href="https;//baidu.com" target="baidu"></a></h3>
 <p>
 <iframe src="https://baidu.com" frameborder="1" width="500" height="800" name="baidu"></iframe>
 </p>

运行实例 »

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


CSS介绍

css用来设置HTML元素在文档中的显示方式与布局。

一。css样式

1.内联样式:将元素的样式使用style属性应用到当前的元素上,只适用于当前标签 

实例

<body>
    <p style="color: red">我在学习PHP</p>
    <p style="color: red">我在学习PHP</p>
    <p style="color: red">我在学习PHP</p>
</body>

运行实例 »

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

2.内部样式:将元素的样式使用style标签插入到当前的html文档中,这个样式规则仅适用于当前的这个html文档 

实例

<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">
    <link rel="stylesheet" href="style_zy.css">
    <title>css简介与引入</title>
    <style>
        p{
            color: blue;
        }
    </style>
</head>

运行实例 »

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

外部样式:创建在.css文档中,在使用的文档中通过link引用进来。

实例

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

    <link rel="stylesheet" href="style_zy.css">

    <title></title>
</head>


p {
    /* 外部样式 */
    color: yellow;
}

运行实例 »

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

css样式的优先级为内联样式(通过styles属性) >  内部样式(style标签) >  外部样式(.css文档).

二. css选择器

css选择器:1.id选择器;2.class选择器;3.标签选器;4:js选择器。

 选择器的优先级:标签选择器 < class类选择器 < id选择器 < js选择器 。

<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>
    <style>
        #red {
            /* id选择器:一个 */
            color: red;
        }
        
        .green {
            /* class类选择器:多个 */
            color: green;
        }
        /* 标签选择器 */
        
        p {
            color: aqua;
        }
    </style>
</head>

<body>
    <p id="red">明天要上班了,好难过!</p>
    <p class="green">现在还在赶作业</p>
    <p class="green">还有好多没有写</p>


</body>

运行实例 »

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

三. 盒子模型的基本属性

盒模型是布局的基础,页面上可见的元素都可以看作是盒子,盒模型默认都i是块级元素,独占一行,支持宽度设置。

盒模型有五个基本属性(宽高背景内外边距和边框)

width:宽度

height:高度

background-color:背景

padding:内边距,内容与边框之间的填充区域

margin:外边距,决定当前盒子与其他盒子之间的位置与关系

border:边框,位于内外边框之间,是可见元素,允许设置宽度样式和颜色

根据可见性分为两类:

一. 可见的:width,height,border

二. 不可见的: background-color,padding,margin

padding和margin只能设置宽度,不能设置样式和颜色。

实例

<body>
    <div class="box1">
        <div class="bos2"></div>
    </div>
</body>

运行实例 »

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

实例

.box1 {
    width: 200px;
    height: 200px;
    background-color: aqua;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;
    padding: 10px 20px 30px 40px;
    padding: 20px 30px 40px;
    padding: 20px 30px;
    padding: 20px;
    /* 上边框 */
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: blue;
    /* 简写 */
    border: 10px solid red;
}

运行实例 »

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


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