查看“商院官网:表格的使用”的源代码
←
商院官网:表格的使用
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==表格的绘制== ===第一步:绘制表格 === *[[文件:web5-11.png]] *绘制一个几行几列如图所示的表格,其中第1行为表头。 *源代码: <nowiki> <html> <head> <style type="text/css"> #customers td, #customers th { border:1px solid black; } </style> </head> <body> <table id="customers"> <tr> <th>院系</th> <th>姓名</th> <th>教工号</th> <th>标题</th> <th>提交时间</th> <th>操作</th> </tr> <tr> <td>信息与艺术学院</td> <td>马欣</td> <td>20150815</td> <td>11月份实习总结</td> <td>2019-01-04 21:19:46</td> <td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td> </tr> <tr > <td>信息与艺术学院</td> <td>马欣</td> <td>20150815</td> <td>11月份实习总结</td> <td>2019-01-04 21:19:46</td> <td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td> </tr> <tr> <td>信息与艺术学院</td> <td>马欣</td> <td>20150815</td> <td>11月份实习总结</td> <td>2019-01-04 21:19:46</td> <td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td> </tr> <tr > <td>信息与艺术学院</td> <td>马欣</td> <td>20150815</td> <td>11月份实习总结</td> <td>2019-01-04 21:19:46</td> <td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td> </tr> <tr> <td>信息与艺术学院</td> <td>马欣</td> <td>20150815</td> <td>11月份实习总结</td> <td>2019-01-04 21:19:46</td> <td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td> </tr> <tr> <td>信息与艺术学院</td> <td>马欣</td> <td>20150815</td> <td>11月份实习总结</td> <td>2019-01-04 21:19:46</td> <td><a href="">修改</a><a href="">详情</a><a href="">删除</a></td> </tr> </table> </body> </html> </nowiki> ===第二步,调整表格整体的大小和边框 === *[[文件:web5-10.png]] *将表格的宽度设为100%; *设置边框为1px的灰色实线 *源代码: css: <nowiki>#customers { width:100%; border-collapse:collapse; } #customers td, #customers th { border:1px solid #ebeef5 }</nowiki> ===第三步:设置行宽、列宽 === css: <nowiki>#customers .first{ width:15%; } #customers .fourth{ width:15%; }</nowiki> html: <nowiki><table id="customers"> <tr> <th class="first">院系</th> <th>姓名</th> <th>教工号</th> <th class="fourth">标题</th> <th>提交时间</th> <th>操作</th> </tr></nowiki> ===第四步,设置单元格的样式 === *[[文件:web5-10.png]] *设置表头的颜色(灰色为安全色,也可以用其他颜色) *设置内填充上下左右 都为6px (你可以换成其他值) *设置链接的样式 *源代码: css:: <nowiki> #customers th { background:#fafafa; padding:6px ; } #customers td { padding:6px ; } #customers td a{ float:left; width:20%; text-decoration: none; } </styl </nowiki> ===第五步,设置悬停效果 === *[[文件:web5-12.png]] <nowiki> #customers tr:hover { background:#fafafa; }</nowiki> ==放置在网页中== [[文件:web5-13.png|700px]] 基础源代码: <nowiki><!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin:0;padding:0;} #header{width:100%; height:auto; text-align:center;position: fixed;left:0;} #layer1-1{width:45%; height:80px; background:white;text-align:center;line-height:350%;float:left;} #layer1-1 img{height:80px;} #layer1-2{width:55%; height:80px;background:#00203f;;color:#FFFFFF;text-align:center;float:left;} #layer1-2 h3{line-height:350%;} .clear {clear:both;} #main{width:100%; height:600px;color:black;} #navigation2 { width:17%; height:600px; background-color:#001529; font:normal 100%/4.6em "宋体"; /*text-align:center; /* 这个属性使盒子中的链接居中 */ float:left; position: fixed; left:0; top:80px; } #navigation2 a{ color:#FFFFFF;/*字体颜色*/ text-decoration: none; width:100%; height:4.5em; line-height: 4.6em; box-sizing: border-box; border:0.05em solid black; border-left:1em solid #151571; display:block; } #navigation2 a:hover{ /* 鼠标经过时 */ background-color:yellow; /* 改变背景色 */ color:black; /* 改变文字颜色 */ border-left:1em solid orange; } #content { width:83%; height:auto; box-sizing:border-box; padding:0 ; font:normal 100% "宋体"; line-height: 180%; float:right; } #content img { float:left; } #content h2{ text-align: center; } </style> </head> <body> <div id="header"> <div id="layer1-1"><img src="http://www.sict.edu.cn/Templets/mode3/images/logo.png" /></div> <div id="layer1-2"><h3>学校概况 机构设置 教育教学 就业创业 科技服务</h3> <div class="clear"></div> </div> <div id="main"> <div id="navigation2"> <a href="#">首页</a> <a href="#">实习指导</a> <a href="#">就业指导</a> <a href="#">学生周报</a> <a href="#">老师月报</a> </div> <div id="content"> </div> </div> <div id="footer"> <p>学校地址:济南市旅游路4516号 邮编:250103</p> <p>电话:0531-86335888 招生电话:0531-86335555</p> <p>鲁ICP备05002370 </p> </div> </body> </html> </nowiki> ==基础代码(无导航栏)== <nowiki> <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin:0;padding:0;} #header{width:100%; height:auto; text-align:center;position: fixed;left:0;} #layer1-1{width:45%; height:80px; background:white;text-align:center;line-height:350%;float:left;} #layer1-1 img{height:80px;} #navigation{width:55%; height:80px;background:#00203f;;color:#FFFFFF;text-align:center;float:left;} #layer1-2 h3{line-height:350%;} .clear {clear:both;} #main{width:100%; height:600px;color:black;} #navigation2 { width:17%; height:600px; background-color:#001529; font:normal 100%/4.6em "宋体"; /*text-align:center; /* 这个属性使盒子中的链接居中 */ float:left; position: fixed; left:0; top:80px; } #content { width:83%; height:auto; box-sizing:border-box; padding:0 ; font:normal 100% "宋体"; line-height: 180%; float:right; } #content img { float:left; } #content h2{ text-align: center; } </style> </head> <body> <div id="header"> <div id="layer1-1"><img src="http://www.sict.edu.cn/statics/shangzhi/images/img/sz_logo.png" /></div> <div id="navigation"> <a href="#">首页</a> <a href="#">休闲零食</a> <a href="#">日用百货</a> <a href="#">服装鞋帽</a> <a href="#">数码电子</a> <div class="clear"></div> </div> <div id="main"> <div id="navigation2"> </div> <div id="content"> </div> </div> <div id="footer"> <p>学校地址:济南市旅游路4516号 邮编:250103</p> <p>电话:0531-86335888 招生电话:0531-86335555</p> <p>鲁ICP备05002370 </p> </div> </body> </html></nowiki>
返回至
商院官网:表格的使用
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息