博客列表 >4月24作业

4月24作业

ifhover的博客
ifhover的博客原创
2019年04月25日 11:43:34665浏览

写一个案例, 演示css中的选择器优先级(忽略js)

实例

<!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>Document</title>
</head>
<body>
    <style>
        div{
            background-color: red;
        }
        .color{
            width:100px;
            height:100px;

            background-color: blue;
        }
        #color{
            background-color: green;
        }
    </style>
    <div class="color" id="color">

    </div>
</body>
</html>

运行实例 »

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

写一个盒模型的简单案例,体会padding/border的简写规则

实例

<!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>Document</title>
</head>
<body>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:red;
            border:2px solid #000;
            padding: 10px 20px 10px 20px;
        }
    </style>
    <div class="box" >

    </div>
</body>
</html>

运行实例 »

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


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