登录  /  注册
博主信息
博文 77
粉丝 0
评论 0
访问量 76120
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
CSS基础_0902
Jet的博客
原创
1456人浏览过

一、实例演示:<iframe>标签的使用

1.jpg


实例

<h1>iframe框架</h1>
<a href="https://www.baidu.com" target="baidu">点击显示内容</a>
<p><iframe srcdoc="<h2>欢迎</h2>" frameborder="1" width="500" height="300" name="baidu"></iframe></p>

运行实例 »

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

二、实例演示: css样式设置的优先级

2.jpg

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--3.外部样式表-->
    <link rel="stylesheet" href="css/style.css">
    <title>css简介与引入</title>
    <style>
        /*2.内部样式*/        
        p {
            color: red
        }
    </style>
</head>

<body>
    <!--1.内联样式:将元素的样式使用熟悉英语到当前元素上,只适用于当前标签-->
    <p style="color:cornflowerblue">林志玲嫁给了日/本人</p>
    <p>苍老师是一个日/本人</p>
    <p>波波姐也是一个日/本人</p>
</body>

</html>

运行实例 »

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

三、实例演示: css的id, class与标签选择器的使用规则

3.jpg

实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css基本选择器</title>
    <style>
        /*id选择器*/        
        #red {
            color: red;
        }
        /*类选择器*/        
        .green {
            color: green;
        }
        /*标签选择器*/        
        p {
            color: aqua;
        }
    </style>
</head>

<body>
    <!--选择元素只会有二种可能:-->
    <!--1,找到了;双汇有两种可能,找到一个,找到了一批-->
    <!--2,没找到:第一种选择语法错误,第二是页面中不存也选择器匹配的元素-->
    <p id="red">买了MacBook的同学,后悔了吗</p>
    <p class="green" id="red">原来css非常简单</p>
    <p class="green">做一个快乐的学习者</p>
</body>

</html>

id > class > P

运行实例 »

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

四、实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

width:宽;

height:高;

padding:内边距;

    padding:10px 20px 30px 40px;     //对应位置:上 右 下左

    padding:10px 20px 30px;            //对应位置:上 【左右】 下

    padding:10px 20px;                    //对应位置:【上下】【左右】

    padding:10px;                           //对应位置:上下左右

margin:外边距;

border:边框;

常用相关属性值:solid 实线,dotted 点状虚线,dashed 虚线,double 双线,none 无边框,inherit 继承父级元素值。

4.jpg


  1. 实例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .con_menu {
                width: 200px;
                height: 200px;
                background-color: lightcyan;
                border: 5px solid red;
                padding: 20px;
                margin: 50px;
            }
            
            .con_tab {
                height: inherit;
                background-color: yellow;
            }
        </style>
    </head>
    
    <body>
        <div class="con_menu">
            <div class="con_tab"></div>
        </div>
    </body>
    
    </html>

    运行实例 »

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

批改状态:合格

老师批语:现在大家刚开发学习web开发, 基本上都是在复制或模仿课堂案例, 出错的概率不大, 但对于熟悉程序有要求, 一定要多写多看
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学