<!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. it网站

    1:http://www.importnew.com/    importnew  专注于java的论坛 2:Github是最活跃的开源代码库和版本控制平台,可以说是程序员当中知名度最高的技术社区.各 ...

  2. MySQL：数据类型介绍

    数据类型介绍 一.整数类型(可以添加自增约束条件) 数据类型 存储需要 有符号 无符号 tinyint 1个字节 -2^7~2^7-1 0~2^8 smallint 2个字节 -2^15~2^15-1 ...

  3. php优秀框架codeigniter学习系列——CodeIgniter.php概览

    CodeIgniter.php是CI框架的核心文件.它在前端控制器index.php之后运行,加载各类基础组件,执行请求.文件执行完成后,这次请求也就结束了.所以,该文只能对CodeIgniter.p ...

  4. python 基础-爬虫-数据处理，全部方法

    生成时间戳 1. time.time() 输出 1515137389.69163 ===================== 生成格式化的时间字符串 1. time.ctime() 输出 Fri Ja ...

  5. 2019-03-04-day003-运算符

    01 上周内容回顾 格式化输出: msg = '我的名字%s,我的年龄%s' % ('太白',18) 单纯的表示% msg = '我的名字%s,我的年龄%s,学习进度3%%' % ('太白',18) ...

  6. LVM逻辑卷

    LVM逻辑卷 一.LVM逻辑卷概述 1.LVM的作用: 扩充磁盘:不动数据,在使用状态,将磁盘容量变大. 能把多个物理的磁盘整合成一张大的虚拟的磁盘,比如:有3个5G的磁盘,能把它们整合成一个15G的 ...

  7. str 类型

    1.capitalize():首字母大写 2.center(size,fillwith): 3.count(sub,start,end):计算子序列的个数 4.decode() 5.encode() ...

  8. php 怎样将有范围的ip转化为整型范围

    php中将IP转换成整型的函数ip2long()容易出现问题,在IP比较大的情况下,会变成负数.如下: <?php $ip = "192.168.1.2"; $ip_n = ...

  9. 【leetcode】278. First Bad Version

    problem 278. First Bad Version solution1:遍历: // Forward declaration of isBadVersion API. bool isBadV ...

  10. Python中的分支结构和循环结构

    一.分支结构 语法: if  条件  :     .... else :    .... 例子: num = int(input("输入一个整数:")) if num<=10 ...