<!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. wpf 使用Font-Awesome图标字体

    wpf 使用Font-Awesome图标字体 1.http://fontawesome.io/ 中下载Font-Awesome字体 然后把字体文件fontawesome-webfont.ttf 拷贝到 ...

  2. python3.6 安装第三方库 pyCryptodome 实现AES加密

    起因 前端日子写完的Python入库脚本,通过直接读取配置文件的内容(包含了数据库的ip,数据库的用户名,数据库的密码),因为配置文件中的数据库密码是明文显示的,所以不太安全,由此对其进行加密. 编码 ...

  3. 32位linux(ubuntu) exec: arm-none-linux-gnueabi-g++未找到;The tslib functionality test failed!

    请先参考:http://blog.csdn.net/ankwyq/article/details/7768809 通过上面那篇文章,我确实把问题又推进了一步,接下来就是下面这个问题: exec: ar ...

  4. redis 基础应用

          redis 安装  -redis安装 -window的安装 -redis支持5大数据类型 -字符  Memcached 只支持字符串类型 -列表 -字典 -集合 -有序集合  面试题:游戏 ...

  5. HDU 1251 统计难题（字典树 裸题 链表做法）

    Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己 ...

  6. 大数据-06-Spark之读写Hive数据

    简介 Hive中的表是纯逻辑表,就只是表的定义等,即表的元数据.Hive本身不存储数据,它完全依赖HDFS和MapReduce.这样就可以将结构化的数据文件映射为为一张数据库表,并提供完整的SQL查询 ...

  7. pandas的聚合操作: groupyby与agg

    pandas提供基于行和列的聚合操作,groupby可理解为是基于行的,agg则是基于列的 从实现上看,groupby返回的是一个DataFrameGroupBy结构,这个结构必须调用聚合函数(如su ...

  8. JAVA小程序-----买衣服

    import java.util.Scanner; //引用扫描器 public class TestDemo1 { public static void main(String [] args){ ...

  9. 给电脑换源 npm 国内镜像 cnpm

    (1)通过 config 配置指向国内镜像源 npm config set registry http://registry.cnpmjs.org //配置指向源 npm info express   ...

  10. multi-head attention

    ■ 论文 | Attention Is All You Need ■ 链接 | https://www.paperweekly.site/papers/224 ■ 源码 | https://githu ...