<!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. VCL界面控件DevExpress VCL Controls发布v18.2.5|附下载

    DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...

  2. day73 母版 中间件

    关于母版自定义的问题 模板引擎: 基本实用{{k1}}  if  for  在页面传参数 并判断  通过母版进行交互 一 模板中自定义函数:操作步骤 1在已经注册的App中创建一个名字叫templat ...

  3. setcookie

    cookie 中值的部分在发送的时候会被自动用 urlencode 编码并在接收到的时候被自动解码并把值赋给与自己同名的 cookie 变量 首先声明,浏览的Cookie操作都是通过HTTP Head ...

  4. 爬虫系列4：scrapy技术进阶之多页面爬取

    多页面爬取有两种形式. 1)从某一个或者多个主页中获取多个子页面的url列表,parse()函数依次爬取列表中的各个子页面. 2)从递归爬取,这个相对简单.在scrapy中只要定义好初始页面以及爬虫规 ...

  5. 【Python】xml 解析

    1. XML:指可扩展标记语言,是一种标记语言,用于存储数据和传输数据,但没有像HTML那样具有预定义标签,需要程序猿自定义标签 2. XML的解析:读取XML数据结构中的某些信息,比如读取书的属性 ...

  6. HttpClient(4.5.x)正确的使用姿势

    前言: httpclient(4.5.x)默认是启动连接池的, 其降低时耗(避免连接初3次握手, 以及关闭4次握手的消耗), 显著提升高并发处理能力(大量减少time_wait), 确实扮演了重要的角 ...

  7. MySQL篇，第三章：数据库知识3

    MySQL 数据库 3 索引 1.普通索引(MUL)   2.唯一索引(UNI)   3.主键索引(PRI) 1.使用规则 1.一个表中只能有一个主键(primary)字段 2.对应字段的值不允许重复 ...

  8. Python用re正则化模块在字符串查找特定字符串

    实验需要,在一个含有几亿个字符的txt文件中查找特定的字符串,首先用re模块进行查找 from time import clock import re start=clock() label_file ...

  9. strcmp用法

    strcmp() 用来比较字符串(区分大小写),其原型为:    int strcmp(const char *s1, const char *s2); [参数]s1, s2 为需要比较的两个字符串. ...

  10. 2018牛客27---D---愤怒: (有关子序列的dp问题)

    链接:https://www.nowcoder.com/acm/contest/188/D来源:牛客网 题目描述 小w很生气 小w有一个长为n的括号序列 愤怒小w想把这个括号序列分为两个括号序列 小w ...