Blogger Information
Blog 3
fans 0
comment 0
visits 1745
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP学习第三课
阿布的博客
Original
480 people have browsed it

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;
}

运行实例 »

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


Correction status:qualified

Teacher's comments:你是刚报名的学员吗? 这些前端作业可以慢慢补交, 目前已进入到php学习, 尽快跟上进度
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post