<!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代码中是以“.”小写句号符号命名开头的类

用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. python笔记1-基础概念、python安装使用配置

    Python 1.基础概念 一.什么是python? python是一种面向对象.解释型的计算机语言,它的特点是语法简洁.优雅.简单易学.在1989诞生,Guido(龟叔)开发.这里的python并不 ...

  2. rnn-nlp-单词预测

    import reader import numpy as np import tensorflow as tf # 数据参数 DATA_PATH = 'simple-examples/data/' ...

  3. HTML 表单中的验证

    凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...

  4. 20165326 java第九周学习笔记

    第九周学习笔记 URL类 属于java.net包 最基本三部分:协议(对象所在的Java虚拟机支持).地址(能连接的有效IP地址或域名).资源(主机上的任何一个文件) 常用构造方法 public UR ...

  5. 五、LCD屏填充纯色

    废话不说,直接上代码: lcd.c #include "lcd.h" static int PEN_COLOR = LCD_RED; /* 定义画笔(前景)颜色 */ static ...

  6. 1-log4j2入门

    一.入门介绍 log4j apache实现的一个开源的日志组件 slf4j 日志接口即为所有日志框架制定的一种规范的标准接口,并不是一个框架的具体实现,需要配合具体的日志框架使用(如log4j2.lo ...

  7. Buildroot stress-ng Linux系统压力测试

    /********************************************************************** * Buildroot stress-ng Linux系 ...

  8. paddle实践

    Docker image阅读:https://github.com/PaddlePaddle/book/blob/develop/README.cn.md docker run -d -p 8888: ...

  9. Unity 3D动态修改Shader状态，使物体透明等等

    Unity动态改Shader状态透明 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...

  10. Gym .101879 USP Try-outs （寒假自训第七场）

    B .Aesthetics in poetry 题意:给定N个数,(N<2000 ,a[i] <=1e9),让你找一个最大的K,使得N个数膜K的余数个数全都等于N/K个. 思路:我们找到N ...