CSS Ribbon

Reproducing the GitHub Ribbon in CSS

Pyhton学习——Day39

# CSS的常用属性
# 1  颜色属性
# <div style="color:rgb(255,0,0)">ppppp</div>
# 2  字体属性
# font-size: 20px/50%/larger
# font-family:'Lucida Bright'
# font-weight: lighter/bold/border/
# <h1 style="font-style: oblique">老男孩</h1>
# 3  背景属性
# font-style:italic;"># background-image: url('1.jpg');
# background-repeat: no-repeat;(repeat:平铺满)
# background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
#       简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">
#               <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">
# 4  文本属性
# font-size: 10px;
# text-align: center;   横向排列
# line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
# vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
# text-indent: 150px;   首行缩进
# letter-spacing: 10px;
# word-spacing: 20px;
# text-transform: capitalize;
# 5  边框属性
# border-style: solid;
# border-color: chartreuse;
# border-width: 20px;
# 简写：border: 30px rebeccapurple solid;
# 6   列表属性
# ul,ol{   list-style: decimal-leading-zero;
#          list-style: none; <br>         list-style: circle;
#          list-style: upper-alpha;
#          list-style: disc; }
# 7  dispaly属性
# none
# block
# inline
# display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决
# 8  外边距和内边
# margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
# padding:           用于控制内容与边框之间的距离；
# Border(边框)     围绕在内边距和内容外的边框。
# Content(内容)   盒子的内容，显示文本和图像。