简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 0902HTML中内联框架标签的使用及CSS基础
Blogger Information
Blog 12
fans 0
comment 1
visits 5167
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
0902HTML中内联框架标签的使用及CSS基础
唐长老
Original
794 people have browsed it

  1. 内联标签使用


实例

<ul>
    <li><a href="http://www.baidu.com" target="main">百度</a></li>
    <li><a href="https://www.sogou.com/" target="main">搜狗</a></li>
    <li><a href="https://www.so.com/" target="main">360</a></li>
</ul>
    <iframe srcdoc="<h1>  欢迎使用搜索  </h1>" name="main" width="1200" height="800"></iframe>

运行实例 »

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

2.css 优先级

内联样式 > 内部样式 >外部样式 

实例

    <style>
        li{
            color:yellow;
        }
        .test{
            color:green;
        }
        #test1{
            color: #0d3f6f;
        }
    </style>
</head>
<body>
<ul>
    <li class="test" id="test1">css层级优先实例演示1</li>
    <li class="test">css层级优先实例演示2</li>
    <li class="test">css层级优先实例演示3</li>
    <li class="test">css层级优先实例演示4</li>
    <li class="test">css层级优先实例演示5</li>
    <li class="test" style="color: red">css层级优先实例演示6</li>
</ul>

运行实例 »

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

盒子模型

实例

    <style>
        div{
            width: 150px;
            height: 150px;
        }
        #box1{
            background-color: red;
            margin: 10px 20px 30px 40px; /*外边距*/
        }

        #box2{
            border: 15px solid ;
            background-color: yellow;
            padding: 10px 20px 30px 40px; /*内边距*/
        }

        #box3{
            margin-top: 20px;
            border: 15px solid ; /*边框*/
            background-color: blue;
            margin-bottom: 20px;
        }

        #box4{
            background-color: green;
        }
    </style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
<div id="box4">盒子4</div>

运行实例 »

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


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！