<!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. DevExpress Windows 10 UWP Controls新版亮点

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExpress Windows 10 U ...

  2. Html.DropDownList()的用法

    页面代码如下: <%= Html.DropDownList("Category", ViewData["Categories"] as SelectLis ...

  3. 如何HACK无线家用警报器？

    30年前,报警器都是硬连线的,具有分立元件,并由钥匙开关操作.20年前,他们已经演变为使用微控制器,LCD和键盘,但仍然是硬连线.10年前,无线报警器开始变得普及,并增加了许多之前没有的功能. 而如今 ...

  4. ArrayList方法综合练习

    package com.zs.windows; import java.util.ArrayList; import java.util.Scanner; import com.zs.entity.G ...

  5. MyBatis insert操作返回主键

    在使用MyBatis做持久层时,insert语句默认是不返回记录的主键值,而是返回插入的记录条数: Dao.java @Override public int insert(T record) { f ...

  6. java杨辉三角和空心菱形（二维数组篇）

    一.杨辉三角 import java.util.Scanner; //导入包 public class Test7 { public static void main(String[]args){ S ...

  7. MongDB篇，第一章：数据库知识1

    MongDB    数据库知识1 程序 =  数据结构 + 算法 数据存储阶段 1,文件管理阶段 (.txt .doc .xls) 优点: 数据可以长期保存:可以存储大量的数据:使用简单     缺点 ...

  8. 服务器安装wordpress，搭建自己的博客平台

    自己构造网站的话,建立一个简单的网页还可以(比如,yongjieshi.com),对于建立复杂的博客就需要借助第三方的工具,常见的有wordpress,在阿里云上安装wordpress,我主要参考了这 ...

  9. 归并排序merge_sort

    将区间递归分解,直到区间只有2个元素,然后比较大小,排序,等递归回来的时候就将排序好的子区间再排序合并....一直排序合并,最后就排序完成了. (可以做范围大的逆序数的题) #include < ...

  10. 前端解析websocket数据问题

    buf []byte //err = websocket.Message.Send(ws, buf) err = websocket.Message.Send(ws, string(buf[:])) ...