此篇博文主要记录一些标签的常用属性

Font标签

  • size：字体大小
  • color：颜色
  • face：字体
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ASK 第一个网页</title>
 </head>
 <body>
     <font color="red" size="3" face="verdana">verdana字体</font>
 </body>
 </html>

Body标签

  • text：文本颜色
  • bgcolor：背景色
  • background：背景图片
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ASK 第一个网页</title>
 </head>
 <body text="orange" background="15.jpg">
     <font color="red"><p>一些段落</p></font> <!-- 因为设置了红色字体 所以是红色的 -->
     <p>又一些段落</p>                         <!-- 默认为橙色 -->
 </body>
 </html>

一些文本修饰标签

  • <big>相对默认文字大一些
  • <small>对默认文字小一些
  • <b>加粗
  • <strong>加强语气
  • <i>斜体
  • <em>斜体
  • <u>下划线
  • <s> 删除线
  • <ins><del> 下划线和删除线
  • <sup> <sub> 上标和下标
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ASK 第一个网页</title>
 </head>
 <body>
 <big>大字体</big><br />
 <small>小字体</small><br />
 <b>加粗字体</b><br />
 <strong>加强语气字体</strong><br />
 <i>斜体</i><br />
 <em>斜体</em><br />
 <u>下划线</u><br />
 <s>删除线</s><br />
 <ins>下划线</ins><br />
 <del>删除线</del><br />
 <sub>下标</sub>
 <sup>上标</sup>
 </body>
 </html>

段落标签(p标签)

段落标签会自动换行。并且会省略在编译时所输入的多余的换行和空格。

  • align：排列方式。
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ASK 第一个网页</title>
 </head>
 <body>
 <p align="center">
 一个段落，
 就算在段落中换行，
 但是浏览器还是会省略换行     和    多余的空格。
 </p>
 <p>段落标签是一段段落，它会自动换行。</p>
 </body>
 </html>

换行单标签

<hr>：分割线标签。

  • size：分割线的高度。
  • width：分割线的宽度。
  • align：排列样式。
  • noshade：不添加阴影效果 值为:noshade

<br>：强制换行标签。

<pre>标签

<pre>：预格式化文本，通常用来表示计算机源代码，在pre标签中的内容会保留所有的空格和换行。

  • width：定义每行的最大字符 (一般是40、80、132)。
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>ASK 第一个网页</title>
 </head>
 <body>
 <pre>
     <font color="purple">var</font> someObj = <font color="purple">AnyClass</font>()
     <font color="green">someObj</font>.<font color="purple">set</font>("<font color="red">someValue"</font>)
 </pre>
 </body>
 </html>

<h1>~<h6>标签

标题标签，h1是字体最大的标签，h6是最小的标签。

  • align：排列样式
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <body>
     <h1>大标题</h1>
     <h6>小标题</h6>
 </body>
 </html>

center标签

居中显示

<ol> <ul> <li> 标签

<ol>标签是有序列表标签。

  • start：序号的起始值(数字)
  • type：默认是数字序号，如果想用字母序号 值为"a"

<ul>标签是无序列表标签。

  • type：序号类型 disc是实心圆圈，square实心方块，circle空心圆圈

<li>标签是列表中的项目标签

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <body>
     <ol type="1" start="3">
         <li>北京</li>
         <li>天津</li>
         <li>上海</li>
     </ol>
 </body>
 </html>

自定义列表标签

<dl>是自定义列表标签，它配合着<dt>(自定义列表中的定义项目标签)标签和<dd>(自定义列表中的描述项目标签)标签来使用。

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
 </head>
 <body>
     <dl>
         <dt>苹果公司</dt>
         <dd>苹果公司（Apple Inc. ）是美国的一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗·韦恩(Ron Wayne)等三人于1976年4月1日创立。</dd>
         <dt>华为公司</dt>
         <dd>华为有限公司是一家生产销售通信设备的民营通信科技公司，总部位于中国广东省深圳市龙岗区坂田华为基地。华为的产品主要涉及通信网络中的交换网络、传输网络、无线及有线固定接入网络和数据通信网络及无线终端产品，为世界各地通信运营商及专业网络拥有者提供硬件设备、软件、服务和解决方案。华为于1987年在中国深圳正式注册成立。</dd>
         <dt>绿地集团</dt>
         <dd>绿地集团是中国第一家也是目前（截止2013年）唯一一家跻身《财富》世界500强的以房地产为主业的企业集团。2015年位居《财富》世界500强第258位[1]  。绿地集团房地产开发项目遍及全国主要省区市，特别在超高层、大型城市综合体、高铁站商务区及产业园开发领域遥遥领先，目前的世界十大高楼近一半来自绿地。2014年实现经营收入超过42,51.51亿元，较上年增长3.7%，预计2015年经营收入突破5000亿。</dd>
     </dl>
 </body>
 </html>

meta标签

meta元素是提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。meta元素一般定义在文档头部，且不包含任何内容。

  • name：提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称，"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
  • <!DOCTYPE html>
<html>
<head>
    <!-- 告诉搜索引擎 你的页面关键字 -->
    <meta name="keywords" content="html,html新手学习笔记" />

    <title>day2</title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE html>
<html>
<head>
    <!-- 告诉搜索引擎 你的页面的主要内容 -->
    <meta name="description" content="新手学习HTML的笔记分享,HTML的标签笔记(随时更新)" />

    <title>day2</title>
</head>
<body>

</body>
</html>
  • http-equiv：http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对，当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
  • <!DOCTYPE html>
<html>
<head>
    <!-- 可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输，时间必须是GMT时间 -->
    <meta http-equiv="expires" content="Thur,18Aug201616:00:00GMT" />

    <title>day2</title>
</head>
<body>

</body>
</html>
    <!DOCTYPE html>
<html>
<head>
    <!-- 不可使用本地的缓存来访问网页(无法脱机预览) -->
    <meta http-equiv="pragma" content="no-cache" />

    <title>day2</title>
</head>
<body>

</body>
</html>
    <!DOCTYPE html>
<html>
<head>
    <!-- 自定刷新，指定3秒后跳到新的URL -->
    <meta http-equiv="refresh" content="3;www.baidu.com" />

    <title>day2</title>
</head>
<body>

</body>
</html>
  • content：content 属性提供了名称/值对中的值。该值可以是任何有效的字符串，content 属性始终要和 name 属性或 http-equiv 属性一起使用。

图片标签

  • src：图片的路径。
  • alt：图片的代替文本。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>day2</title>
</head>
<body>
    <b>Apple Watch 是苹果公司于2014年9月公布的一款智能手表，有Apple Watch、Apple Watch Sport 和Apple Watch Edition 三种风格不同的系列。Apple Watch 采用人造蓝宝石水晶屏幕与Force Touch触摸技术，有多种颜色可供选择。</b>
    <img src="apple.jpg" alt="Apple" align="middle" />
</body>
</html>

<a>标签

  • href：指向哪个链接。
  • target：在什么地方打开链接(新建页面还是当前页面)。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>day2</title>
</head>
<body>
    <!-- 打开一个内部的URL -->
    <a href="learn2.html" target="_blank">另一个链接</a>

    <!-- 外部链接 -->
    <a href="http://www.baidu.com">百度一下</a>

    <!-- 图片链接 -->
    <a href="http://www.apple.com" target="_blank"><img src="apple.jpg" alt="watch" /></a>

    <!-- 下载链接 -->
    <a href="auto.rar">点击下载</a>

    <!-- 空连接 -->
    <a href="#">空链接</a>

    <!-- 邮箱链接 -->
    <a href="mailto:alexsunkang@163.com">联系我们</a>

    <!-- 锚点标签 -->
    <!-- 在这里设置一个锚点 -->
    <h1><a name="top"></a>一个标题 设置为这个页面的顶点</h1>
    <p>一些段落：PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。</p>
    <p>PHP原始为Personal Home Page的缩写，已经正式更名为 "PHP: Hypertext Preprocessor"。注意不是“Hypertext Preprocessor”的缩写，这种将名称放到定义中的写法被称作递归缩写。PHP于1994年由Rasmus Lerdorf创建，刚刚开始是Rasmus Lerdorf为了要维护个人网页而制作的一个简单的用Perl语言编写的程序。这些工具程序用来显示 Rasmus Lerdorf 的个人履历，以及统计网页流量。后来又用C语言重新编写，包括可以访问数据库。他将这些程序和一些表单直译器整合起来，称为 PHP/FI。PHP/FI 可以和数据库连接，产生简单的动态网页程序。</p>
    <p>在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本，Lerdorf写了一些介绍此程序的文档。并且发布了PHP1.0！在这的版本中，提供了访客留言本、访客计数器等简单的功能。以后越来越多的网站使用了PHP，并且强烈要求增加一些特性。比如循环语句和数组变量等等；在新的成员加入开发行列之后，Rasmus Lerdorf 在1995年6月8日将 PHP/FI 公开发布，希望可以透过社群来加速程序开发与寻找错误。这个发布的版本命名为 PHP 2，已经有 PHP 的一些雏型，像是类似 Perl的变量命名方式、表单处理功能、以及嵌入到 HTML 中执行的能力。程序语法上也类似 Perl，有较多的限制，不过更简单、更有弹性。PHP/FI加入了对MySQL的支持，从此建立了PHP在动态网页开发上的地位。到了1996年底，有15000个网站使用 PHP/FI。</p>
    <p>在1997年，任职于 Technion IIT公司的两个以色列程序设计师：Zeev Suraski 和 Andi Gutmans，重写了 PHP 的剖析器，成为 PHP 3 的基础。而 PHP 也在这个时候改称为PHP：Hypertext Preprocessor。经过几个月测试，开发团队在1997年11月发布了 PHP/FI 2。随后就开始 PHP 3 的开放测试，最后在1998年6月正式发布 PHP 3。Zeev Suraski 和 Andi Gutmans 在 PHP 3 发布后开始改写PHP 的核心，这个在1999年发布的剖析器称为 Zend Engine，他们也在以色列的 Ramat Gan 成立了 Zend Technologies 来管理 PHP 的开发。</p>
    <p>在2000年5月22日，以Zend Engine 1.0为基础的PHP 4正式发布，2004年7月13日则发布了PHP 5，PHP 5则使用了第二代的Zend Engine。PHP包含了许多新特色，像是强化的面向对象功能、引入PDO（PHP Data Objects，一个存取数据库的延伸函数库）、以及许多效能上的增强。PHP 4已经不会继续更新，以鼓励用户转移到PHP 5。</p>
    <p>2008年PHP 5成为了PHP唯一的有在开发的PHP版本。将来的PHP 5.3将会加入Late static binding和一些其他的功能强化。PHP 6 的开发也正在进行中，主要的改进有移除register_globals、magic quotes 和 Safe mode的功能。
PHP最新稳定版本：5.4.30(2013.6.26)
PHP最新发布的正式版本：5.5.14(2014.6.24)
PHP最新测试版本：5.6.0 RC2(2014.6.03)
2013年6月20日，PHP开发团队自豪地宣布推出PHP 5.5.0。此版本包含了大量的新功能和bug修复。需要开发者特别注意的一点是不再支持 Windows XP 和 2003 系统。
2014年10月16日，PHP开发团队宣布PHP 5.6.2可用。四安全相关的错误是固定在这个版本，包括修复cve-2014-3668，cve-2014-3669和cve-2014-3670。所有的PHP 5.6鼓励用户升级到这个版本。</p>
    <!-- 因为在标题处设置了锚点，所以在这里可以定义一个标签，点击后可以返回设置锚点处 -->
    <a href="#top">回到文本顶部</a>
</body>
</html>

<table>标签

  • width：表格宽度。
  • align：对齐方式。
  • bgcolor：表格背景色。
  • background：表格背景图案。
  • border：表格边框宽度，如果不设置或设置为0，就代表没有边框。
  • tr：行。
  • td：列。
  • th：标题，会在表格中居中显示。
  • <!DOCTYPE html>
<html>
<head>
    <title>day3</title>
    <meta charset="utf-8">
</head>
<body>
<table border="1" width="800">
<tr>
    <th>
        姓名
    </th>
        <th>
        电话
    </th>
        <th>
        地址
    </th>
</tr>
<tr align="center">
    <td>
        Alex-Mercer
    </td>
    <td>
        159-0000-0000
    </td>
    <td>
        china-beijing-someaddress
    </td>
</tr>
</table>
</body>
</html>
  • caption：表格标题。
  • <!DOCTYPE html>
<html>
<head>
    <title>day3</title>
    <meta charset="utf-8">
</head>
<body>
<table border="1">
    <caption>跨两列的单元格</caption>
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>
    </tr>
    <tr>
        <td>Alex-mercer</td>
        <td>159-0000-0000</td>
        <td>8500-0000</td>
    </tr>
</table>
<br />
<table border="1" align="center">
    <caption>跨两行的单元格</caption>
    <tr>
        <th>姓名</th>
        <td>Alex-mercer</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>159-0000-0000</td>
    </tr>
    <tr>
        <td>8500-0000</td>
    </tr>
</table>
</body>
</html>
  • cellpadding：单元内容距离单元格的距离。
  • <!DOCTYPE html>
<html>
<head>
    <title>day3</title>
    <meta charset="utf-8">
</head>
<body>
<table border="1" cellpadding="10">
    <caption>cell padding</caption>
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
</body>
</html>
  • cellspacing：单元格距离表格边框的距离。
  • <!DOCTYPE html>
<html>
<head>
    <title>day3</title>
    <meta charset="utf-8">
</head>
<body>
<table border="1" cellspacing="10">
    <caption>cell padding</caption>
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
</body>
</html>
  • frame：规定边框的可见部分。值为：
    • void
    • above
    • below
    • hsides
    • lhs
    • rhs
    • vsides
    • box
    • border
  • <!DOCTYPE html>
<html>
<head>
    <title>day3</title>
    <meta charset="utf-8">
</head>
<body>
<table frame="box">
    <caption>box</caption>
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
<br />
<table frame="above" cellpadding="10">
    <caption>above</caption>
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
<br />
<table frame="below" cellspacing="20">
    <caption>below</caption>
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>
</body>
</html>

<form>标签

form标签是用于为用户输入创建表单，表单用于向服务器传输数据。form是块级元素，前后会产生折行。

  • enctype：规定在发送表单数据前如果对其进行编码。

    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • action：action属性定义在提交表单时执行的动作。
  • method：method属性是在提交表单的时候指定HTTP方法，GET或POST。
  • <input>标签：文本输入标签
  • <h4>普通文本输入框</h4>
<form action="">
    名:
    <input type="text" name="lastname" />
    <br />
    姓:
    <input type="text" name="firstname">
    <br />
    <!-- 提交表单 -->
    <input type="submit" name="提交">
</form>
<br />
<h4>密码文本输入框</h4>
<form>
    账户:
    <input type="text" name="user" size="20" maxlength="10">
    <br />
    密码:
    <input type="password" name="password">
</form>
<br />
<h4>复选框</h4>
<form>
    T恤:
    <input type="checkbox" name="T">
    <br />
    西装:
    <input type="checkbox" name="Suit">
</form>
<br />
<h4>单选框</h4>
<form>
    男:
    <input type="radio" checked="checked" name="Sex" value="male">
    <br />
    女:
    <input type="radio" name="Sex" value="female">
</form>
<br />
  • <fieldset>：用以组合表单数据
  • <form action="">
    <fieldset>
        <legend>个人资料</legend>
        <b>First Name</b> <br />
        <input type="text" name="first_name" value="Sun"><br /><br />

        <b>Last Name</b> <br />
        <input type="text" name="Last_name" value="Kang"><br /><br />

        <input type="submit" name="提交">
    </fieldset>
</form>
  • <select>：下拉表单
  • <form action="">
    <select name="name_list">
        <option value="alice">Alice</option>
        <option value="alex" selected="selected">Alex</option>
        <option value="alisa">Alisa</option>
    </select>
</form>
  • <textarea>：多行文本输入
  • <form action="">
    <p>请输入文字</p>
    <textarea rows="10" cols="40"></textarea> <br />
    <input type="submit" name="提交">
</form>
  • <button>：按钮
  • <button type="button" onclick="alert('hello')">点击有惊喜</button>

HTML -- 标签记录(随着学习不断更新)的更多相关文章

  1. centos DNS服务搭建 DNS原理 使用bind搭建DNS服务器 配置DNS转发 配置主从 安装dig工具 DHCP dhclient 各种域名解析记录 mydns DNS动态更新 第三十节课

    centos  DNS服务搭建  DNS原理  使用bind搭建DNS服务器 配置DNS转发 配置主从  安装dig工具  DHCP  dhclient  各种域名解析记录  mydns DNS动态更 ...

  2. 完成了C++作业,本博客现在开始全面记录acm学习历程,真正的acm之路,现在开始

    以下以目前遇到题目开始记录,按发布时间排序 ACM之递推递归 ACM之数学题 拓扑排序 ACM之最短路径做题笔记与记录 STL学习笔记不(定期更新) 八皇后问题解题报告

  3. 记录Python学习中的几个小问题

    记录Python学习中的几个小问题,和C#\JAVA的习惯都不太一样. 1.Django模板中比较两个值是否相等 错误的做法 <option value="{{group.id}}&q ...

  4. 记录android学习、开发过程温故知新

    记录android学习.开发过程温故知新

  5. ASP 代码当前记录集不支持更新问题的解决办法。

    错误类型: ADODB.Recordset (0x800A0CB3) 当前记录集不支持更新.这可能是提供程序的限制,也可能是选定锁定类型的限制. /Model/manage/Admin_Admin.a ...

  6. 关于EntityFramework 更新数据记录时字段全部更新问题和不从数据库中获取直接更新记录

    一.一直对这个比较疑惑感觉只修改一条数据记录的一个字段结果更新Savechages后跟踪生成sql竟然是全部被修改,感觉微软怎么这么傻,总觉得会有其它方式可以只更新部分字段,但一直没有找到相关设置,最 ...

  7. 视频+图文串讲：MySQL 行锁、间隙锁、Next-Key-Lock、以及实现记录存在的话就更新，如果记录不存在的话就插入如何保证并发安全

    导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 27 篇. 下文还是白日梦以自导自演的方式,围绕"如何实现记录存在的话就更新,如果记录不存在的话就插入."展开本话题.看看 ...

  8. Strus2学习记录整理【持续更新】

    Strus2学习记录 以后的Strus2学习记录地址都会集合在这里,希望大家可以一起愉快学习,相互学习! Exception: 地址:http://www.cnblogs.com/gcs1995/p/ ...

  9. MySQL的学习记录（3.31更新）

    MySQL的学习记录(3.31更新) 0x00 安装及配置 Windows 1.首先官网下载(https://dev.mysql.com/downloads/mysql/) ps:不想官网下载的可以到 ...

随机推荐

  1. Fedora 19修改主机名

    Distribution为Fedora 19 方式一(重启后失效,需root权限): hostname 新主机名 [root@promote hadoop]# hostname promote.cac ...

  2. 将centos 7改造为LINUX桌面系统

    http://www.3566t.com/news/ckan/1410774.html CentOS 桌面版安装配置(以CentOS 7为例) http://blog.csdn.net/zhanghu ...

  3. dedecms 知识点总结

    生成-更新主页html 将自定义字段在arclist调用:   内容模型管理＝＝>频道模型管理＝＝>增加新字段＝＝>列表处理:  使字段可以在列表的底层模板中获得(自定义字段默认仅能 ...

  4. ant design 自定义表单验证大全

     需求是 账号名可以是手机号也可以是邮箱 要做手机号和邮箱的验证,官网的那个验证规则不匹配  怎么自定义验证规则?  一:组件部分 <Form horizontal> <Row gu ...

  5. oracle的sid

    SID是一个数据库的唯一标识符!是你在建立一个数据库时系统自动赋予的一个初始ID,虽说他和数据库名(DB_NAME)都是一个数据库的唯一标识符,但是在作用上就有不小区别.SID主要用于在一些DBA操作 ...

  6. C# 接口的隐式与显示实现【转】

    以前在用到接口时,从来没注意到接口分为隐式实现与显示实现.昨天在浏览博客时看到相关内容,现在根据自己的理解记录一下,方便日后碰到的时候温习温习.通俗的来讲,“显示接口实现”就是使用接口名称作为方法名的 ...

  7. Linux VIM python 自动补全插件：pydiction

    Pydiction 可以是我们使用Tab键自动补全Python代码在Vim,是一款非常不错的插件. Pydiction不需要安装,所有没有任何依赖包问题,Pydiction主要包含三个文件. pyth ...

  8. Android开发之万能适配器

    ListView.GridView等等非常多的东西都需要适配器.而如果开发一个app每一个listview都有写一个Adapter的话,那还怎么愉快的玩游戏.. 什么是ViewHolider以及的用法 ...

  9. C# 编码约定

    参考自 MSDN     https://msdn.microsoft.com/zh-cn/library/ff926074.aspx , 只摘要个人觉得有用部分 命名约定 在不包括 using 指令 ...

  10. 利用css3动画和border来实现圆形进度条

    最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和 ...