css列表标签list与表格标签table详解
列表list,无序列表ul,有序列表ol
1.列表项样式list-style-type
无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0)
其他无序列表常用none无样式,circle空心圆,square实心方块
有序列表常用decimal-leading-zero以0开头的数字,lower-roman、upper-roman小写、大写罗马数字,lower-alpha、upper-alpha小写、大写英文字母
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
2.列表项标记的图像list-style-image: url
ul { list-style-image: url('sqpurple.gif'); }
3.列表项标记的位置list-style-position
默认值outside,标记位于文本的左侧,且放置在文本以外,环绕文本不根据标记对齐
inside,标记放置在文本以内,且环绕文本根据标记对齐
上述三个属性可集合在一起,通过list-style表示,顺序为type、position、image,可根据需要选择
例如ul { list-style: square url("sqpurple.gif"); }
表格table
1.边框border
如果仅使用border,例如table, th, td { border: 1px solid black; },得到的效果如下,因为th和td都有各自的边框
可再通过border-collapse属性设置表格的边框被折叠成一个单一的边框或隔开
table {border-collapse: collapse;} table, td, th {border: 1px solid red;background-color:lightgray;color:green;text-align:center}
2.表格宽度和高度,例如
table{width:100%;} th{height:40px;} tr{height:30px;}
3.表格内文本对齐方式
text-align水平对齐,vertical-align垂直对齐(设置垂直对齐方式时必须指定td的高度)
您可能感兴趣的文章
- 01-11纯CSS实现鼠标放上去改变文字内容
- 01-11CSS可以做的几个令你叹为观止的实例分享
- 01-11CSS3中Transition属性详解以及示例分享
- 01-11详细分析css float 属性以及position:absolute 的区别
- 01-11HTML <!DOCTYPE> 标签
- 01-11使用css实现全兼容浏览器的三角形
- 01-11使用css实现全兼容tooltip提示框
- 01-11从零学CSS系列之文本属性
- 01-11用css截取字符的几种方法详解(css排版隐藏溢出文本)
- 01-11CSS3+Js实现响应式导航条
阅读排行
本栏相关
- 04-02html5算法,html5协议
- 04-02html5图形,html5图形缩放
- 04-02html5登录模板,html5登录注册模板
- 04-02html5的例子,HTML示例
- 04-02html5的canvas,html5的canvas的作用
- 04-02关于html5播放视频代码的信息
- 04-02html5chm手册,html操作手册
- 04-02朋友圈html5,朋友圈发泄情绪的句子
- 04-02html5的新特性有哪些,HTML5的新特性有哪
- 04-02html5扫二维码,html5调用手机摄像头扫描
随机阅读
- 08-05织梦dedecms什么时候用栏目交叉功能?
- 01-10使用C语言求解扑克牌的顺子及n个骰子
- 01-11Mac OSX 打开原生自带读写NTFS功能(图文
- 04-02jquery与jsp,用jquery
- 08-05DEDE织梦data目录下的sessions文件夹有什
- 01-11ajax实现页面的局部加载
- 01-10delphi制作wav文件的方法
- 08-05dedecms(织梦)副栏目数量限制代码修改
- 01-10C#中split用法实例总结
- 01-10SublimeText编译C开发环境设置