Question

我制作了我的第一个网站，我遇到了一些表格和背景问题。这是我用手机拍摄的屏幕照片。如果我在电脑屏幕上预览了它，它看起来会更好一点，因为我没有背景问题，但无论如何我无法弄清楚表格有什么问题（特别是第4张图片）并且我的背景没有响应。顺便说一句，所有图片都是相同的大小....

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%; 
}

Answer 1

使用引导网格示例fiddle

HTML

<div class="main pull-left">
 <div class="col-sm-6 col-md-4 box">1</div>
 <div class="col-sm-6 col-md-4 box">2</div>
 <div class="col-sm-6 col-md-4 box">3</div>
 <div class="col-sm-6 col-md-4 box">4</div>
 <div class="col-sm-6 col-md-4 box">5</div>
 <div class="col-sm-6 col-md-4 box">6</div>
</div>

CSS

body{padding:0px; margin:0px;}
.main{width:100%; background:#000; border-radius:10px; padding:10px;}
.main .box{background:#fff; color:#000; border:solid 4px #000; padding:20px 0px; text-align:center;}

Answer 2

你可以清理html，删除所有无用的标签，这样更容易设计，维护和验证。

示例：

＆＃13;

@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;
}
nav:before {
  content: url(http://lorempixel.com/100/100/people/6);
  border-radius: 50%;
  overflow: hidden;
}
nav:before,
.table {
  display: table;
  margin: auto; 
  max-width: 1040px;
}

a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: lightgray;
}
a:active {
  color: black;
}
body {
  background-color: #F6F6F6;
}

.raste img {
  -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);
}
.box {
  display: inline-flex;
  flex-wrap: wrap; 
  justify-content:center;
}
.raste {
  padding: 15px;
}
@font-face {
  font-family: Proxima;
  src: url(Fonts/Proxima_Regular.otf);
}
ul {
  padding: 0;
}
.box {
  background: #000000;
  background-size: 0% auto;
  margin-bottom: 5%;
  border-radius: 10px;
  padding: 16px;
}

＆＃13;

<nav> <a href="projects.html">PROJECTS</a>  <a href="About.html">ABOUT</a>  <a href="Contact.html">CONTACT</a>
</nav>
<div class="table">
  <div class="box">
    <a href="project1.html">
      <div class="raste">
        <img src="http://dummyimage.com/300x190/456&text=logo.jpg" alt="" />
      </div>
    </a>
    <a href="project2.html">
      <div class="raste">
        <img src="http://dummyimage.com/300x190/55f&text=elite.jpg" alt="" width="300" />
      </div>
    </a>
    <a href="project3.html">
      <div class="raste">
        <img src="http://dummyimage.com/300x190/fed&text=time.jpg" alt="" width="300" />
      </div>
    </a>
    <a href="project4.html">
      <div class="raste">
        <img src="http://dummyimage.com/300x190/bad&text=booksrie.jpg" alt="" width="300" />
      </div>
    </a>
    <a href="project5.html">
      <div class="raste">
        <img src="http://dummyimage.com/300x190/a55&text=log.jpg" alt="" width="300" />
      </div>
    </a>
    <a href="project6.html">
      <div class="raste">
        <img src="http://dummyimage.com/300x190/ef0&text=log.jpg" alt="" width="300" />
      </div>
    </a>
  </div>
</div>

＆＃13;

为什么我的表行没有正确对齐？

2 个答案: