1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>圣诞树</title>
  6.     <style>
  7.            #container{
  8.                width: 100px;
  9.                height: 300px;
  10.                background: blue;
  11.            }
  12.            #aa{
  13.                width:0px;
  14.                height: 0px;
  15.                margin-left: 25px;
  16.                margin-right: 25px;
  17.                border-top: 40px solid transparent;
  18.                border-left: 25px solid transparent;
  19.                border-right: 25px solid transparent;
  20.                border-bottom: 50px solid red;
  21.            }
  22.            #bb{
  23.                width: 0px;
  24.                height: 0px;
  25.                border-top: 0px solid transparent;
  26.                border-bottom: 80px solid red;
  27.                border-left: 40px solid transparent;
  28.                border-right: 40px solid transparent;
  29.                margin-left: 10px;
  30.                margin-right: 10px;
  31.            }
  32.            #cc{
  33.                width: 26px;
  34.                height: 100px;
  35.                margin-left: 37px;
  36.                margin-right: 74px;
  37.                      background: brown;
  38.                      margin-bottom: 50px;
  39.            }
  40.     </style>
  41. </head>
  42. <body>
  43.     <div id="container">
  44.         <div id="aa"></div>
  45.         <div id="bb"></div>
  46.         <div id="cc"></div>
  47.     </div>
  48. </body>
  49. </html>

div id与div class的区别：

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

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

用div画一个圣诞树的更多相关文章

  1. 如何用Python画一个圣诞树呢？

    # ./sd.py * *** ***** ******* ********* |[root@bogon shengdan]# vim sd.py[root@bogon shengdan]# cat ...

  2. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

  3. WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字

    <!DOCTYPE html> <!--两个DIV--> <html> <body> <div style="width:100%;he ...

  4. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  5. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  6. css3简单几步画一个乾坤图

    原文:[原创]css3简单几步画一个乾坤图 效果如上,鼠标移上去会有动画. 代码如下非常简单: <html> <head> <style> .outer{heigh ...

  7. 用CSS画一个带阴影的三角形的示例代码

    1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...

  8. 用div画三角/矩形/圆

    1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  9. Effective前端1---chapter 2 用CSS画一个三角形

    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...

随机推荐

  1. 玩转X-CTR100 l STM32F4 l NRF24L01+ 2.4G无线通信

    我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]      本文介绍X-CTR100控制器 NRF24 ...

  2. 安装google 框架

    使用  root exporer很方便   su cp /sdcard/google/busybox /data/local/tmp chmod 0755 /data/local/tmp/busybo ...

  3. POJ - 1942 D - Paths on a Grid

    Imagine you are attending your math lesson at school. Once again, you are bored because your teacher ...

  4. java.util.concurrent ThreadPoolExecutor源码分析

    实现的接口:Executor, ExecutorService 子类:ScheduledThreadPoolExecutor 这类为java线程池的管理和创建,其中封装好的线程池模型在Executor ...

  5. java.lang.OutOfMemoryError: GC overhead limit exceeded

    前端请求:{"code":400,"message":"Handler dispatch failed; nested exception is ja ...

  6. Spring、Commons的BeanUtils.copyProperties用法

    如果两个对象A.B的大部分属性的名字都一样,此时想将A的属性值复制给B,一个一个属性GET\SET代码量太大,可以通过复制属性的方式减小工作量,同时代码看起来更加简洁明了,复制属性可以用Spring或 ...

  7. endnote插入文献的一些问题

    1. 文末参考文献前面加上序号 eg.[1] 设置如下图,参考网址https://zhidao.baidu.com/question/360201207639069172.html edit-> ...

  8. SQL注入之Sqli-labs系列第十七关（UPDATA– 基于错误– 单引号– 字符型）

    开始挑战第十七关(Update Query- Error based - String) 首先介绍下update的用法: 作用:Update 语句用于修改表中的数据. 语法:UPDATE 表名称SET ...

  9. 微软Power BI 每月功能更新系列——7月Power BI 新功能学习

    Power BI Desktop 7月产品功能摘要 7月是Power BI Desktop团队的重要发布!但由于官方延迟更新,我们的讲述也就更晚了一点,也许大家觉得没有必要了,都8月了,谁还看7月的? ...

  10. exe程序嵌入Winform窗体

    1.新建winform程序,添加一个Panel控件和一个button控件,winform窗体命名为:Mainform: 2.新建一个类文件,方便引用,命名为:exetowinform: 3.Mainf ...