简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > day3:CSS的引入及盒模型简单入门 20190902
Blogger Information
Blog 30
fans 1
comment 0
visits 24039
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
day3:CSS的引入及盒模型简单入门 20190902
阿乎乎的学习
Original
907 people have browsed it

 作业一：实例演示:<iframe>标签的使用


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内链框架</title>
</head>
<body>
<!--内链框架，在当前页面中加载另外一个网页-->
<a href="https://www.baidu.com" target="baidu">百度</a>
<iframe srcdoc="<h2>网站管理后台</h2>" frameborder="1" width="500" height="500" name="baidu"></iframe>
<a href="https://tie.163.com" target="tie">网易跟帖</a>
<iframe src="https://www.163.com" frameborder="1" width="500" height="500" name="tie"></iframe>
<!--内链框架重要属性name,可以使用A标签的target="name属性值"，在iframe框架中打开网页-->
</body>
</html>

运行实例 »

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

作业二：实例演示: css样式设置的优先级


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的引入及优先级</title><!--css是层叠样式表,用来控制页面布局，以及元素样式和显示！css的优先级谁离元素近，谁优先！-->
    <!--css的优先级，内联样式>内部样式>外部样式，内联样式高于内部样式高于外部样式-->
    <!--css第一种引入方式，外部样式，将样式声明写在外部的*.css文件内，用link标签进行引入，可以让多个html文件引入-->
    <link rel="stylesheet" type="text/css" href="main.css">
    <!--css第二种引入方式，内部样式，在html中设置style标签，将样式声明写在style标签内。仅适用于当前html文档中。-->
    <style>
        p{color:yellow;}  /*样式声明*/
    </style>
</head>
<body>
<p style="color:red;">这是一个P段落</p> <!--css第三种引入方式，内联样式，样式声明直接写在元素的style属性上，只适用于当前标签。-->
</body>
</html>

运行实例 »

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

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


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css基本选择器及优先级</title>
    <style>
        /*css的基本选择的优先级为，JS>id选择器>类选择器>标签选择器*/
        #yellow{
            color:yellow;    /*id选择器，id=值，同一个页面中，元素的ID属性都是唯一的*/
        }
        .green{
            color:green;     /*类选择器，class=值，可以用于设置多个元素的样式*/
        }
        p{
            color:red;      /*标签选择器，直接使用html的标签作为css的选择器*/
        }
    </style>
</head>
<body>
<p class="green" id="yellow">这段话是黄色的</p> <!--选择器优先级，id选择器的优先级最高，这个时候P元素内容的颜色是黄色-->
<p class="green">这段话是绿色的</p><!--选择器优先级，类选择器的优先级其次，这个时候P元素内容的颜色是绿色-->
<p>这段话是红色的</p><!--选择器优先级，标签选择器的优先级最低，这个时候P元素内容是红色-->
</body>
</html>

运行实例 »

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

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


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒模型</title>
    <!--盒模型是html布局的基础，-->
    <style>
        .box1{
            width:200px;
            height:200px;
            margin:30px; /*设置外边距30px*/
            /*margin:25px 26px;设置上下边距为25px，左右边距为26px*/
            /*margin:25px 26px 20px;设置上边距为25px，左右边距为26px，下边距为20px*/
            /*padding也可以像margin那样设置简写*/
            padding:30px;
            background-color:salmon;
            /*单独设置边框样式*/
            border-top:yellow 3px solid;
            border-right:red 3px double;
            border-bottom:darkgrey 4px dotted;
            border-left:blue 2px dashed;
            /*统一设置边框样式*/
            /*border:lightseagreen 3px solid;*/
        }
        .box2{
            width:inherit;
            height:100px;
            background-color: khaki;
            border:dimgrey 2px solid;
        }
        .box3{
            width:200px;
            height:200px;
            margin:10px; /*设置外边距30px*/
            /*margin:25px 26px;设置上下边距为25px，左右边距为26px*/
            /*margin:25px 26px 20px;设置上边距为25px，左右边距为26px，下边距为20px*/
            /*padding也可以像margin那样设置简写*/
            padding:20px;
            background-color:salmon;
            /*单独设置边框样式*/
            /*border-top:yellow 3px solid;
            border-right:red 3px double;
            border-bottom:darkgrey 4px dotted;
            border-left:blue 2px dashed;*/
            /*统一设置边框样式*/
            border:lightseagreen 3px solid;
        }
    </style>
</head>
<body>
<!--
盒模型有五个样式，宽高背景内外边距和边框
外边距是两个盒子之间的距离，指的是盒子本身到另一个盒子的距离
内边距是盒子内容到边框间的距离
-->
<div class="box1">
    <div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>

运行实例 »

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

Correction status：qualified

Teacher's comments：你的作业, 最值得表扬的地方, 就是加了大量的注释, 看来你有当老师的潜质, 作业内容是正确的
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！