博客列表 >内联框架与CSS基础知识--2019年9月2日

内联框架与CSS基础知识--2019年9月2日

Victor的博客
Victor的博客原创
2019年09月03日 14:29:02795浏览

2019年9月2日作业:

1. 实例演示:<iframe>标签的使用
2. 实例演示: css样式设置的优先级
3. 实例演示: css的id, class与标签选择器的使用规则
4. 实例演示盒模型的五大要素: width, height, padding, border, margin(margin可暂忽略)

课程学习总结:

  • 本次课程学习了HTML5中新增的几个结构化语义标签:<header><footer><article><aside><section>并与之前常用的<div>布局进行了对照;

  • CSS是层叠样式表,用来设置HTML元素的布局和显示方式;

  • CSS的引用有三重方式,优先级从高到低依次为:内联样式  >  内部样式  >  外部样式。

  • 内联样式:<p style="color : red">php.cn</p>

  • 内部样式:<style>p {color : red;}</style>

  • 外部样式:<link ref=stylesheet href="style.css">

  • CSS的选择器学习了常用的:ID、CLASS 和 标签 选择方法,且优先级从高到低依次为:id  >  class  >  标签

  • CSS盒模型学习了内外边距margin / padding:默认透明,只有宽度属性;border边框:不透明,除宽度外,还可设置其他样式;练习在设置中的简化规则。

作业说明:

利用一段代码,练习上述知识。代码及运行视图如下:

实例
.box1 {
    margin: 0px;
    padding: 10px 5px 30px;
    height: 200px;
}

.box2 {
    margin: 0px auto;
    padding: 0px;
    width: 100px;
    height: 80px;
    background-color: bisque;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例

上述代码写入外部的样式文件0902style.css中。

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="0902style.css">
    <title>iframe使用与css基础练习</title>
    <style>
        header {
            background: rgb(63, 52, 52);
            height: 65px;
            display: block;
        }
        
        footer {
            background: #000;
            display: block;
            clear: both;
            height: 40px;
            padding: 0px;
        }
        
        article {
            background: rgb(214, 103, 12);
            float: left;
            width: 14.8%;
            height: 600px;
            margin: 2px 1px;
            display: block;
        }
        
        aside {
            /* background: rgb(43, 128, 224); */
            float: right;
            width: 84.9%;
            height: 600px;
            margin: 2px 1px;
            display: block;
        }
        
        h3 {
            color: white;
            margin: 0px;
            padding: 20px;
            text-align: auto;
        }
        
        .footerfont {
            color: blue;
        }
        
        #footerfont {
            color: red;
        }
        
        p {
            padding: 5px;
            margin: 0;
        }
    </style>
</head>

<body>
    <header>
        <h3 align="center">使用iframe框架,打开不同的网站</h3>
    </header>
    <main>
        <article>
            <div class="box1">
                <div class="box2">
                    <img src="hmx.png" width="100px" height="80px" alt="盒模型">
                </div>
                <ul>
                    <li><a href="http:\\www.baidu.com" target="show">打开百度</a></li>
                    <li><a href="http:\\www.360.cn" target="show">打开360</a></li>
                    <li><a href="http:\\www.bilibili.com" target="show">打开B站</a></li>
                    <li><a href="http:\\www.pnp.cn" target="show">打开PHP中文网</a></li>
                </ul>
            </div>

        </article>
        <aside>
            <iframe src="" frameborder="0" name="show" width="100%" height="100%" style="float:left;"></iframe>
        </aside>
    </main>
    <footer>
        <p class=" footerfont " id="footerfont " align="center " style="color:white; ">Posted by: Victor</p>
    </footer>
</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例

上述代码练习了布局、CSS选择器、CSS的内联、内部、外部样式引用、在运行调试中可以看到样式引用和选择的优先权。

运行结果如下:

0902作业截图.png






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