前端学习笔记.pdfVIP

目 录 前言 表格隔行换色和细线边框实例 jekyll+markdown+github搭建个人博客 网页中使用自定义字体 JS时钟实例 JavaScript瀑布流 JavaScript图片切换 jQuery笔记 CSS选择器 Emmet语法(一) Bootstrap图片轮播 CSS Media Query 静态资源库CDN服务 本文档使用 看云 构建 - 2 - 前言 前言 原文出处 ：前端学习笔记 作者 ：napoay 本系列文章经作者授权在看云整理发布 ，未经作者允许 ，请勿转载 ！ 前端学习笔记 前端学习笔记 本文档使用 看云 构建 - 3 - 表格隔行换色和细线边框实例 表格隔行换色和细线边框实例 隔行换色 当表格行数较多的时候 ，每一行都是同一种颜色不方便阅读。通常的解决方法是采用隔行变色 ，使得 奇数行和偶数行的颜色背景不一样 ，方便阅读。这种效果非常常见 ，实现起来也非常简单 ，给奇数行 和偶数行分别设置不同的选择器 ，css设置不同的背景颜色即可. 细线边框 表格默认边框比较粗 ，可以给表格设置一个背景颜色 ，cellspacing设为1像素 ，td颜色设为白色覆盖掉背 景颜色 ，cellspacing空出1像素实现细线边框样式. 本文档使用 看云 构建 - 4 - 表格隔行换色和细线边框实例 代码 !DOCTYPE html html lang en head meta charset UTF-8 titleHTML表格隔行换色实例/title style type text/css body{ width: 960px; margin:0 auto; text-align: center; font-family : 微软雅黑 ; } 本文档使用 看云 构建 - 5 - 表格隔行换色和细线边框实例 .even{ background-color: #8DEEEE; } .tb_td{ background-color:#ffffff; } /style /head body H1HTML表格隔行换色实例/H1 table width 90% cellspacing 1px cellpadding 5px tr class tb_head th学号/th th姓名/th th班级/th th性别/th /tr tr class old td1108140119/td td王子/td td计算机111/td td男/td /tr tr class even td1108140119/td td王子/td td计算机111/td td男/td /tr