标签归档：html教程

html中如何合并表格边框线呢？


摘要:
下文讲述合并表格边框线的方法分享，如下所示；

实现思路：
   设置table的
    border-collapse属性值为collapse
   即可使表格的边框线合并

例:
合并表格边框线的示例分享

 <!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <style>
        table{border:1px solid green; border-collapse:collapse;}
        td{border:1px solid green;}   
  </style>
 </head>
 <body>
       <table>
        <tr><td>keyId</td><td>备注说明</td></tr>
        <tr><td>1</td><td>maomao365.com</td></tr>
        <tr><td>2</td><td>猫猫教程</td></tr>
        <tr><td>3</td><td>个人博客教程</td></tr> 
       </table>
 </body>
</html>
html表格合并边框线的示例分享

html表格合并边框线的示例分享

CSS边框样式大汇总


摘要：
下文讲述css边框样式的设置方法大汇总，如下所示；


边框汇总样式设置border

borer:
可以设置Html标签的宽度 颜色 样式


border-style

用于设置边框的样式
常见的参数值有:
none/hidden,
solid(实线)
dashed(虚线)
dotted(点线)
double(双线)
inset(内凹)
outset(外凹)
ridge(脊凹)
groove(脊凸)

我们也可以使用
border-top-style，border-right-style，border-bottom-style，border-left-style
分别设置指定边框的样式

 border-style:可以同时设置 上，右，下，左的样式
 border-style同时设置三个值为：上，左右，下
 border-style同时设置二个值为：上下，左右
 border-style同时设置一个值为：全部方向的边框为一个样式


border-color

设置边框的颜色
border-top-color，border-right-color，border-bottom-color，border-left-color
也可以单独指定方向设置颜色
也可以设置三个值，两个值，四个值，一个值设置边框的颜色


border-width

设置边框宽度
border-top-width，border-right-width，border-bottom-width，border-left-width
也可以单独指定方向设置宽度
也可以设置三个值，两个值，四个值，一个值设置边框的宽度


border-radius

为边框设置圆角效果


border-image

为边框设置背景图片


box-shadow

为边框设置阴影
box-shadow：x-shadow y-shadow blur spread color inset/outset;
模糊半径blur用于设置边框阴影半径大小，spread控制阴影的延展大小，为可选参数
，outset外阴影与inset内阴影


outline

outline:指定Html标签的外边框
其拥有同Border设置相同的方法

outline-color
设置外边框的颜色
outline-style
设置外边框的样式。
outline-width
设置外边框的宽度。

outline-offset属性

outline-offset:length
设置外边框的偏移值，此属性在IE浏览器中无效

HTML中有哪几种标签呢？


摘要:
下文讲述html中标签的种类，如下所示:


块级标签

块级标签:
在html网页中会独占一行，
块级标签可设置其宽,高,内边距，外边距等特殊的属性

当我们将多个块级标签放置在一起时，标签会依次从上到下排列
常见的块级标签有:
   <div>、<p>、<h1>
   <h6>、<ol>、<ul>、
   <dl>、<table>、
   <address>、<blockquote>、
   <form>


内联标签

内联(行级)标签:
内联标签同内联标签一起时，所有标签会在一行内显示，
内联标签的高度和高度由内容自动决定，当内容超过宽度时，会自动换行

内联标签的特性:
    1.无法设置宽高
    2.margin-top,margin-bottom无效
      margin-left,margin-right设置有效
      padding属性有效
    3.box-sizing:border-box无效

常见的内联标签有:
    <a>、<span>、<i>、
    <em>、<strong>、<label>、
    <q>、<var>、<cite>、<code>


内联块状标签

内联块状标签(inline-block):
拥有内联标签和块状标签的特性,
由display:inline-block属性设置

内联块状标签特点:
    1.可设置宽高
    2.内容从左到右依次排列
    3.可使用text-align:center居中
    4.内联块状标签水平排列时，所有标签默认会右空隙

常用的内联块状标签有:
<img>、<input>

三种类型标签互相转换方法：
css方法:
 display:inline;转换为行内标签
display:linline-block;转换为行内块标签
display:block;转换为块级标签