我有一个html文件,我希望它具有标题图像,横跨整个屏幕宽度,但要具有其原始高度。
然后是一张桌子。
我在CSS设置上苦苦挣扎。我得到的桌子重叠的图像和图像超出屏幕宽度我希望它在屏幕宽度。
这是html文件的开头:
<!DOCTYPE html>
<html>
<script type="text/javascript">var statsDate = "24-06";</script>
<head>
<link rel="stylesheet" href="./styles.css">
<div class="container">
<img class="headimg" id="image" src="header.jpeg" />
<h2 id="text">Date: <script type="text/javascript">document.write(statsDate)</script></h2>
</div>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script>
$(document).ready(function() {
// call the tablesorter plugin
$("#res-table").tablesorter();
});
</script>
</head>
<body>
<table id="res-table">
<thead>
<tr>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="10">aaa</th>
</tr>
<tr>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th colspan="5">H</th>
<th colspan="5">A</th>
</tr>
</thead>
<tbody>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr></tbody>
</table>
</body>
</html>
根据我的理解,这是CSS文件:
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
th {
color: white;
background-color: #000000;
font-weight: 400;
}
td {
color: white;
background-color: #ababab;
}
tr:hover {
background-color: white;
}
tr:hover td {
color: black;
}
td.res_w{
background-color: #00aa00;
}
td.res_d{
background-color: #ffb066;
}
td.res_l{
background-color: #ff0000;
}
td.res_m_w{
background-color: #00aa00;
border-style: solid;
border-left-width: 2px;
border-left-color: #ababab;
}
td.res_m_d{
background-color: #ffb066;
border-style: solid;
border-left-width: 2px;
border-left-color: #ababab;
}
td.res_m_l{
background-color: #ff0000;
border-style: solid;
border-left-width: 2px;
border-left-color: #ababab;
}
#wrap {
overflow: auto;
height: 400px;
}
img {
height: 120px;
}
.cover {
width: 260px;
object-fit: cover;
}
div#wrapperHeader div#header {
width:100%;
height:300px;
margin:0 auto;
}
div#wrapperHeader div#header img {
width:100%;
height:300px;
margin:0 auto;
}
* {
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: white;
font-size: 1em;
}
a:link,
a:active {
color: white;
text-decoration: none;
}
a:link,
a:after {
color: white;
text-decoration: none;
}
.container {
margin: 50px auto;
padding: 0 50px;
max-width: 960px;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
padding: 4px;
border: 1px solid #CCC;
overflow: hidden;
vertical-align: middle;
}
th a,
td a {
display: block;
width: 100%;
}
th a.sort-by {
padding-right: 18px;
position: relative;
}
a.sort-by:before,
a.sort-by:after {
border: 4px solid transparent;
content: "";
display: block;
height: 0;
right: 5px;
top: 50%;
position: absolute;
width: 0;
}
a.sort-by:before {
border-bottom-color: #666;
margin-top: -9px;
}
a.sort-by:after {
border-top-color: #666;
margin-top: 1px;
}
#container {
height: 400px;
width: 100%;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 48px;
font-weight: bold;
left: 500px;
top: 30%;
}
请指教。
谢谢
最佳答案
尝试以下代码。这是Codepen
HTML:
<html>
<head>
<script type="text/javascript">var statsDate = "24-06";</script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="container">
<img src="http://images.all-free-download.com/images/graphiclarge/beautiful_scenery_05_hd_picture_166257.jpg" />
<h2 id="text">Date: <script type="text/javascript">document.write(statsDate)</script></h2>
</div>
<table id="res-table">
<tr>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="2">aaa</th>
<th colspan="10">aaa</th>
</tr>
<tr>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th>H</th>
<th>A</th>
<th colspan="5">H</th>
<th colspan="5">A</th>
</tr>
<tbody>
<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr></tbody>
</table>
</body>
</html>
CSS:
body {
font-size: 1em;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: 100%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #000000;
font-weight: 400;
}
td {
background-color: #ababab;
}
tr:hover {
background-color: white;
}
tr:hover td {
color: black;
}
td.res_w {
background-color: #00aa00;
}
td.res_d {
background-color: #ffb066;
}
td.res_l {
background-color: #ff0000;
}
td.res_m_w {
background-color: #00aa00;
border-style: solid;
}
td.res_m_d {
background-color: #ffb066;
border-left-width: 2px;
border-left-color: #ababab;
}
td.res_m_l {
background-color: #ff0000;
border-style: solid;
}
#wrap {
overflow: auto;
}
.cover {
width: 260px;
}
* {
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a:link, a:active {
color: white;
text-decoration: none;
}
a:link, a:after {
color: white;
text-decoration: none;
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 4px;
border: 1px solid #CCC;
overflow: hidden;
}
th a, td a {
display: block;
width: 100%;
}
th a.sort-by {
padding-right: 18px;
position: relative;
}
a.sort-by:before, a.sort-by:after {
border: 4px solid transparent;
content: "";
display: block;
height: 0;
right: 5px;
width: 0;
}
a.sort-by:before {
border-bottom-color: #666;
}
a.sort-by:after {
border-top-color: #666;
}