零基础html学习-第五期

好久不见,兄弟们。我又回来继续更blog了!

博主主页:GUIDM

收入专栏:零基础html学习

 

一、表格

<table>
  <tr>
    <td></td>
  </tr>
</table>

tr:行 td:列

<tr>
   <th></th> 
</tr>

th:表头单元格,内部文本加粗并居中显示。

表格<table>属性

border:定义线条的粗细

width:定义表格的总宽度

height:定义表格的总高度

cellspacing:定义单元格之间的距离

cellpadding:定义单元格边框和文本之间的距离

align:定义表格在页面中水平方向上的对齐方式

bgcolor:修饰表格的背景颜色

bordercolor:修饰表格的边框颜色

想让单元格之间的距离,或者单元格与文本之间的距离变大,调整cellspacing和cellpadding即可。 

表格行<tr>属性

height:设置表格行的高度(总高度不变)

bgcolor:背景颜色(一整行)

align:设置tr内部所有单元格内容的水平对齐方式

valign:设置tr内部所有单元格内容的垂直对齐方式

tr无宽度属性

单元格中默认的对齐方式:水平左侧对齐,垂直居中对齐。 

单元格<td>属性

width:单元格宽度

height:单元格高度

bgcolor:单元格背景色

align:单元格里面内容的水平对齐方式

valign:单元格里面内容的垂直对齐方式 

调整任何单元格的高度/宽度,都会影响该单元格所有列的所有单元格的高度/宽度。

 清除单元格之间的距离/单元格跟文本之间的距离:

<table border="1" width="500px" height="150px" cellspacing='0' cellpadding='0' align="center" >
         <tr>
             <td>1</td>
             <td>2</td>
         </tr>  
         <tr>
             <td>1</td>
             <td>2</td>
            </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

单元格合并

rowspan:合并行

colspan:合并列

 可查看:合并案例

这个案例可以很好的了解如何使用合并

表格分组

表格标题:<caption></caption> 一般放在第一个<tr></tr>标签之前。

表格头:<thead></thead>

表格体:<tbody></tbody>

表格尾:<tfoot></tfoot>

表格如果没有使用任何分组标签,浏览器在渲染时,会把table中所有未分组的tr放在一个tbody标签里。

一个表格只允许使用一个thead和一个tfoot,但允许使用多个tbody。

列分组标签:

<colgroup></colgroup>:把一列或连续的几列分成一组,经常用于表格一整列单元格的颜色。

span属性:多少列为一组

bgcolor属性:背景颜色

二、svg

svg标签是svg图形的一个容器(绘制图形的画布)。

<svg></svg>

重要属性:

width:定义画布的宽度

height:定义画布的高度

形状元素:

  • 矩形<rect/>

width:定义矩形的宽度

height:定义矩形的高度

fill:填充颜色

stroke-width:边框宽度

stroke:边框颜色

x:左边位置

y:顶部位置

fill-opacity:填充颜色的不透明度(0-1)

stroke-opacity:描边颜色的不透明度(0-1)

opacity:整个元素的不透明度(0-1)

<svg width="500px" height="500px">
       <rect width="300px" height="200px" fill="green" stroke-width="2px" stroke="black" x="50" y='20'/>
   </svg>
  • 圆角矩形 

通过定义rx,ry属性,同值为圆角,不同值为椭圆。

<svg width="500px" height="500px">
       <rect width="300px" height="200px" fill="green" rx="50" ry="50"s/>
   </svg>
svg width="500px" height="500px">
       <rect width="300px" height="200px" fill="green" rx="50" ry="70"/>
   </svg>
  • 圆<circle/> 

cx:定义圆形中心的x坐标

cy:定义圆形中心的y坐标

r:定义圆形的半径

stroke:边框颜色

stroke-width:边框宽度

fill:背景色填充 

<svg width="500px" height="500px">
      <circle cx='100' cy='100' r='50' fill="yellow"/>
   </svg>
  • 椭圆<ellipse/>

cx:圆心x坐标

cy:圆心y坐标

rx:水平半径

ry:水平半径

stroke:边框颜色

stroke-width:边框宽度

fill:背景色填充 

<svg width="500px" height="500px">
      <ellipse cx='100' cy='100' rx='50' ry="60" fill="green"/>
   </svg>
  • 线条<line/>

x1:起点x坐标

x2:结束x坐标

y1:起点y坐标

y2:结束y坐标

  • 多边形 <polygon/>

points:图形每个点的坐标,至少三对坐标,每对坐标用空格隔开。

<svg width="500px" height="500px">
      <polygon points="200,20 250,190 160,210"/>
   </svg>
  • 多线条<polyline/>

points:2个以上的坐标,一般用于折现的表现。

 

 

转载请说明出处内容投诉
CSS教程_站长资源网 » 零基础html学习-第五期

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买