css3怎么实现table表格thead立体感

html-css09

css3怎么实现table表格thead立体感,第1张

给你写了个简单的课程表样式的表格 看一下 table { border-collapse:collapsetext-align:centervertical-align:middle} table tr{ height:25px} table td{ width:100px} .bg1{ background:#ccc} table tr:hover{ background:#09C}

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局

3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分：

子元素纵向等距排列：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

关于CSS3，可以先查看一下文档

新特性有：

border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient 等等

transform 转换

rotate(XYZ) 根据x,y,z轴旋转

translate(XYZ), scale(XYZ) 同理

perspective 透视，这个很多3D效果都要设置一下，不然3D还是只会有”2D”的效果

rotate 旋转，图片转个90或180度什么的

translate 位置移动

scale, skew, matrix 等

2D 转换

3D 转换

transition: 过渡，简单的动画（如：移个位置，变个长短），直接用这个属性就能搞定。

animation: 动画，3D可以调用硬件渲染。

新的长度单位：rem， ch，vw，vh，vmax，vmin 等。其中ch:数字“0”的宽度,vw 相对于视窗的宽度：视窗宽度是100vw.

clip-path: 绘制路径，类似SVG技术。 国外炫酷产品。

flex: flex布局，继 table 和 div 后的趋势，不了解或不熟悉的可以参考cssreference。

伪类选择器：如::target, :enabled, :disabed, :first-child, last-child等等

@media 媒体查询，适用于一些响应式布局中

columns: 分栏布局。

will-change: 改善渲染性能, 参考使用CSS3 will-change提高页面滚动、动画等渲染性能。