css011 表格和表单的格式化
css011 表格和表单的格式化
一、 让表格专司其职
Html中创建一个三行三列的表格
<table>
<caption align="bottom">
table 1:cosmofarmer.com's indoor mower roundup
</caption>
<colgroup>
<col id="brand"></col>
<col id="price"></col>
<col id="power"></col>
</colgroup>
<thead>
<tr>
<th scope="col">brand</th>
<th scope="col">price</th>
<th scope="col">power</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>$988</td>
<td>lal</td>
</tr>
<tr>
<td>hi</td>
<td>$1000</td>
<td>lalala</td>
</tr>
</tbody>
</table>
用到的标签比较多<table> <caption> <colgroup> <col> <thead> <tr> <th> <td>
二、 给表格定义样式
1、添加padding
td{padding:10px 5px 2px 6px;}
2、调整垂直对齐和水平对齐
text-align和vertical-align
text-align控制水平定位方向
值:left right center justify
table {text-align:center; }
vertical-align调整垂直定位方向
值:top baseline middle bottom
3、创建边框border
控制表格之间的空格
border-spacing:5px;
table{ border-spacing:5px; }
4、消除双边框
table{ border-collapse:collapse; }
5、圆角
border-radius
td{
border:1px solid black;
border-radius:5px;
}
6、给行和列定义样式
tr:nth-of-type(odd) {background-color:red;}
tr:nth-of-type(even) {background-color:blue;}
td:nth-of-type(odd) {background-color:red;}
td:nth-of-type(even) {background-color:red;}
三、 给表单定义样式
font background-color color margin padding等
1、html表单元素
<fieldset>
<legend></legend>
</fieldset>
text fields(文本域)
button
drop-down menus(下来菜单)
checkbox(复选框)
2、利用css布置表单
a、 每一个label标签都用一个tag标签包围起来
b、用display属性值设为inline-block,并设置宽度
.albel{
display:inline-block;
width:20px;
}
c、 调整样式
.albel{
float:left;
width:20px;
vertical-align:top;
text-align:right;
margin-top:20px;
}
css011 表格和表单的格式化的更多相关文章
- CSS3-animation,表格表单的格式化
animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes fadeI ...
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- 第3天:CSS浮动、定位、表格、表单总结
今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性: Ø 理解表单的作用 Ø ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
- Unit01: Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- 13、Semantic-UI之表格与表单
13.1 定义基础样式表格 在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...
- 框架,表格,表单元素,css基础以及基本标签的结合
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- ASP.NET配置Ueditor编辑器上传图片路径
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- 转-Spring单例模式与线程安全
问题背景 这段时间在做项目的时候,考虑到Spring中的bean默认是单例模式的,那么当多个线程调用同一个bean的时候就会存在线程安全问题.如果是Spring中bean的创建模式为非单例的,也就不存 ...
- canvas判断边距,反弹和拖拽的综合实例
效果如图所示,可以实现精准拖拉和触界反弹 var canvas = document.getElementById("canvas"); var cxt = canvas.getC ...
- Timer定时任务
// main方法 public static void main(String[] args) { timerEnter(); } // 设定指定任务task在指定延迟delay后进行固定延迟per ...
- spring mvc mybatis 搭建 配置文件信息
参考地址:http://blog.csdn.net/fox_lht/article/details/16952683 shiro集成:http://www.cnblogs.com/miskis/p/5 ...
- 【BZOJ 2301】【HAOI 2011】Problem b
今天才知道莫比乌斯反演还可以这样:$$F(n)=\sum_{n|d}f(d) \Rightarrow f(n)=\sum_{n|d}\mu(\frac{d}{n})F(d)$$我好弱,,,对于$$F( ...
- js-处理金额(正则表达式)
function checkRates(str){ var re = /^(([1-9][0-9]*\.[0-9][0-9]*)|([0]\.[0-9][0-9]*)|([1-9][0-9]*)|([ ...
- 如何提高redmine的访问速度
刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...
- Java多线程与并发库高级应用-传统定时器技术回顾
传统定时器技术回顾(jdk1.5以前) public class TraditionalTimerTest { static int count = 0; public static void mai ...
- [日常训练]常州集训day7
T1 Description 给定一个序列,初始为空.依次将$1-n$插入序列,其中$i$插到当前第$a_i$个数的右边($a_i=0$表示插到序列最左边).求最终序列. Input 第一行一个整数$ ...