十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
CSS3 :nth-child(odd) 选择器
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比康保网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式康保网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖康保地区。费用合理售后完善,十余年实体公司更值得信赖。
odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词
css选择器,百度一下,多了解一个就少走很多弯路,少些很多代码
代码如下:
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
title用html+CSS做表格/title
style type="text/css"
ul{padding:0;
width:324px; /*设置表格宽 */
height:42px; /*设置表格高*/
margin:30px;
border-top:#000 1px solid; /*设置表格上边框*/
border-right:#000 1px solid; /*设置表格右边框*/
}
li{ border-left:#000 1px solid; /*设置表格左边框*/
border-bottom:#000 1px solid;/*设置表格下边框*/
/*设置单元格边框*/
list-style:none; /*清除项目列表前的标记*/
float:left; /*设置单元格浮动,用于水平排列*/
display:block; /*设置单元格为块级元素于用语控制大小等*/
width:80px; /*设置单元格宽*/
height:20px; /*设置单元格高*/
text-align:center; /*设置单元格内文本对齐方式*/
}
/style
/head
body
!-- 原理就是利用项目列表的每个项目做出表格中的每个单元格,然后通过设置ul和li的边框达到设置表格的边框效果 --
ul
li表格1/li
li表格2/li
li表格3/li
li表格4/li
li表格A/li
li表格B/li
li表格C/li
li表格D/li
/ul
/body
/html
----希望对你有帮助 ----
-------满意采纳奥-----
给你写了个简单的课程表样式的表格 看一下 table { border-collapse:collapse;text-align:center; vertical-align:middle;} table tr{ height:25px;} table td{ width:100px;} .bg1{ background:#ccc;} table tr:hover{ background:#09C;}