zoukankan      html  css  js  c++  java
  • 用div画一个圣诞树

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>圣诞树</title>
        <style>
               #container{
                   width: 100px;
                   height: 300px;
                   background: blue;
               }
               #aa{
                   width:0px;
                   height: 0px;
                   margin-left: 25px;
                   margin-right: 25px; 
                   border-top: 40px solid transparent;
                   border-left: 25px solid transparent;
                   border-right: 25px solid transparent;
                   border-bottom: 50px solid red;
               }
               #bb{
                   width: 0px;
                   height: 0px;
                   border-top: 0px solid transparent;
                   border-bottom: 80px solid red;
                   border-left: 40px solid transparent;
                   border-right: 40px solid transparent;
                   margin-left: 10px;
                   margin-right: 10px;
               }
               #cc{
                   width: 26px;
                   height: 100px;
                   margin-left: 37px;
                   margin-right: 74px;
                         background: brown;
                         margin-bottom: 50px;
               }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="aa"></div>
            <div id="bb"></div>
            <div id="cc"></div>
        </div>
    </body>
    </html>

    div id与div class的区别:

    1、使用区别
    id具有唯一性,在一个网页中同一个命名只能使用一次;
    class命名的类可以在一个网页中使用无数次。

    2、css中区别
    id在css代码中是以“#”井号符号开头命名的类
    class在css代码中是以“.”小写句号符号命名开头的类

  • 相关阅读:
    JavaScript变量存储浅析
    AngularJS学习篇(二十二)
    css目录
    html目录
    javascript目录
    第一篇 dom
    第五篇、css补充二
    第六篇 javascript面向对象
    第三篇 css属性
    jmeter之-图形监控
  • 原文地址:https://www.cnblogs.com/lq13035130506/p/10458394.html
Copyright © 2011-2022 走看看