CSS课堂案例1

使用类选择器画盒子

  1. 类选择器的使用
  2. <div></div>就是一个盒子,用来装网页内容的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用类选择器画三个盒子</title>
    <style>
        /*修改class属性为red的标签的样式*/
        .red {
            width: 100px; /*设置宽度为100px*/
            height: 100px; /*设置高度为100px*/
            background-color: red;/*设置背景颜色为红色*/
        }

        .blue {
            width: 50px;
            height: 20px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="blue">蓝色</div>
    <div class="red">红色</div>
</body>
</html>

效果:

CSS课堂案例1

上一篇:WEB开发-CSS入门学习总结


下一篇:JSday18—jQuery