简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS基础（样式引入与优先级盒子模型入门）-9月2日
Blogger Information
Blog 27
fans 0
comment 0
visits 26610
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
CSS基础（样式引入与优先级盒子模型入门）-9月2日
渊的博客
Original
706 people have browsed it

9月2日作业:
1. 实例演示:<iframe>标签的使用


实例

<!DOCTYPE html>
<html lang="en">
<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>内联框架标签</title>
</head>
<body>
    <h1>内联框架演示</h1>
    <a href="https://baidu.com" target="main">百度</a>
    <iframe src="https://baidu.com" frameborder="1" width="500" name="main"> </iframe>

</body>
</html>

运行实例 »

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

2. 实例演示: css样式设置的优先级

实例

<!DOCTYPE html>
<html lang="en">
<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.css">
    <title>css样式设置的优先级</title>
    <style>
        p{
            color:pink;
        }
    </style>
</head>
<body>
        <p>林志玲嫁给了一个***人</p>
        <p style="color: blue;">苍老师是一个***人</p>
        <p>波波姐也是一个***人</p>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<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的id, class与标签选择器的使用规则</title>
    <style>
        #red{
            color:red;
        }
        .green{
            color:green;
        }
        p{
           color:blueviolet;     
        }
    </style>
</head>
<body>
        <p class="green" id="red">原来css非常简单</p>

    <script>
        document.getElementsByTagName('p').item(0).style.color='blue';
    </script>
</body>
</html>

运行实例 »

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

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

实例

<!DOCTYPE html>
<html lang="en">
<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="style2.css">
    <title>盒模型的五大要素: width, height, padding, border, margin</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color:lightblue;
            margin: 0 auto;
        }
        .box2{
            padding:50px;
            width: 260px;
            height: 260px;
            background-color:red;
            border:1px solid #040bec;
            margin:55px auto;
            color:white;
        }
    </style>
</head>
<body>
    <div class="box1">
            <div class="box2">中国人民解放军</div>
    </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！