【发布时间】：2016-05-30 15:22:26
【问题描述】：
我正在制作我的第一个网站，但在表格和背景方面遇到了一些问题。这是我用手机拍摄的屏幕图片。如果我在电脑屏幕上预览它，它看起来会更好一些，因为我没有背景问题，但无论如何我无法弄清楚表格有什么问题（特别是第四张图片) 并且我的背景没有反应。顺便说一句，所有图片的大小都是一样的......
HTML
<html>
<body>
<head>
<meta charset="utf-8">
<title>Projects</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<head>
<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>
<meta charset="utf-8">
<title>mt</title>
</head>
<body>
<nav>
<ul>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="About.html">ABOUT</a></li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</nav>
<div class="box" >
<div class="table" >
<table width="900" height="200" border="0" cellspacing="7" cellpadding="9">
<tbody>
<tr>
<td>
<div class="row" >
<li>
<a href="project1.html">
<div class="raste">
<img src="logos.jpg" alt="" width="300"/>
</div>
</a>
</li>
</div>
</td>
<td>
<li>
<a href="project2.html">
<div class="raste">
<img src="elite.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project3.html">
<div class="raste">
<img src="time.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
<tr>
<td>
<li>
<a href="project4.html">
<div class="raste">
<img src="booksrie.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project5.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project6.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
table {
margin-left: auto;
margin-right: auto;
}
.raste img {
height: 190px;
width: 300px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
border-radius: 10px;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.table {
display: table;
margin: 1em auto;
}
.row {
display: table-row;
}
.raste {
display: table-cell;
}
@font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
ul {
padding: 0;
}
.box {
background:#000000;
width: 100%;
background-size: 0% auto;
margin-bottom: 5%;
border-radius: 10px;
padding-bottom: 1%;
padding-top: 1%;
}
【问题讨论】：
-
表格用于表格数据 - 而不是布局。此外，您似乎有一些孤立的
li标签。但看起来你正试图拥有一个 900px 的表格，但你有 300px 的图像 (x3) 加上每个单元格中的 9px 填充和单元格之间的 7px = 所以我猜你的单元格溢出表格 82px？ -
首先，你的html代码充满了错误。例如两个结束的正文标签，
li没有ul的表格中的元素，.. 创建有效的 html，然后你可能有一些东西可以使用。 -
我修复了正文标签...但我不明白...链接和大小有什么问题？你能说得更具体些吗，因为我在这方面还很新
-
不要使用表格，因此元素可以换行并分成几行。 img 300px 宽度 + 填充......在小屏幕上肯定很难站起来:)。否则，表格元素上的显示也可以重置。无论如何，明智的做法是使用媒体查询，这样您就可以决定何时以及如何在不同的屏幕尺寸上打破设计
标签： html css responsive-design background html-table