1、首先需要打开sublimeText编辑器。
2、然后需要按照图示代码编写一个html页面,并且放入一张背景。
3、效果显示如下图,图片还是原来大小的背景。
4、然后需要按照图示代码利用css属性background-size: cover把整个背景填充。
5、效果显示如下图,图片table高度把屏幕占满。
表格固定高度在css中使用height属性设置就是了。示例如下:
html代码:
<table class="table"><tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
CSS代码:
.table{width:400pxheight:400px}.table td{border:1px solid #ccctext-align:center}
这里表格的高度就被定义成了400px。
我刚才测试了一下,能够正常使用tab。但是你应该在css里面加上
#contents_2,#contents_3
之外。
我不清楚你有没有声明DOCTYPE.
顺便说一下啊,jqueryui.com提供tabs.js插件,能够符合你百分之九十九的需求,你可以看一下。
以下是我的测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<script type="text/javascript" src="jquery1-5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".hover").removeClass("hover")
// switch this tab on
$(this).addClass("hover")
// slide all content up
$(".contents_0").slideUp()
// slide this content up
var content_show = $(this).attr("title")
$("#"+content_show).slideDown()
})
})
</script>
<style type="text/css">
.menubox_0
.menubox
.menubox ul
.menubox li
.menubox li a
.menubox li a.hover
#contents_2,#contents_3
</style>
</head>
<body>
<div class="menubox_0">
<div class="menubox">
<ul>
<li><a href="#" class="tab hover" title="contents_1">Specifications</a></li>
<li><a href="#" class="tab" title="contents_2">System Requirement </a></li>
<li><a href="#" class="tab" title="contents_3">Images</a></li>
</ul>
</div>
<div id="contents_1" class="contents_0">
<p>1This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_2" class="contents_0">
<p>2This DRM Converter is capable of converting audio and video file ... </p>
</div>
<div id="contents_3" class="contents_0">
<p>3This DRM Converter is capable of converting audio and video file ... </p>
</div>
</div>
</body>
</html>