表格文本框按钮个人笔记

最新推荐文章于 2024-08-21 16:08:40 发布

qiansixi

最新推荐文章于 2024-08-21 16:08:40 发布

阅读量133

点赞数

分类专栏： css html 文章标签： css3 html

本文链接：https://blog.csdn.net/qiansixi/article/details/103836110

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

本文记录了使用CSS3和HTML5进行网页元素样式设计的一些个人心得，主要探讨如何优雅地定制表格、文本框和按钮的外观与交互效果，包括边框样式、填充颜色、响应式布局等关键点。

摘要由CSDN通过智能技术生成

table：表格  文本框 按钮
<table>
<caption>表格标题</caption>
<thead>                                  ！表头
   <tr>                                      行
        <th>                                表头单元格
        </th>
   </tr>
</thead>
<tbody>                                  ！表体
    <!-- tr*2>td*3{$$表格内容} -->
    <tr>
        <td>01表格内容</td>  单元格
        <td colspan="2">02表格内容</td>      !合并2列
         <td>03表格内容</td>
    </tr>
    <tr>                                  
        <td  rowspan="2">01表格内容</td>      !合并下面两行
        <td>02表格内容</td>
        <td>03表格内容</td>
    </tr>
</tbody>
<tfoot>                                   !表尾
</tfoot>
<table>

table{border-spainf:0;               !是消去表格空格
border-collapse:collapse           !合并单元格边框线
}

栅格：<div class=“col－xs－12（最小的时候一个占12份占满） col－md－2（中等的时候一个占两份） col－lg －1（最大的时候一个占一份”>123</div>          ！宽度总占12份
.visible-xs-*（block）仅手机可见                                           .hidden-xs （仅手机隐藏）


<select></select>            ！下拉菜单
<option></option>            ！下拉菜单选项
<textarea cols=“30” rows=“30”></textarea>  ！  输入框

<input type=“text（password checkbox checkbox radio button submit email file color number date）” placeholder=“提示信息”  value=“框内的值” name=“自定义名”/> 
！文本框（加密文字 复选框 单选框 按钮 提交按钮 邮箱 输入文件路径 取色器 只能数字 日期）        点击提交松开后刷新表单
maxlength=“1”     字符限制数量

<button>登录</button>    登录按钮