Question

这就是我正在处理的http://www.pathfinderscc.com/index.htm

彩色框上的div正在验证严格，但我不确定编码是否应该如此。也不是CSS。

令人困惑的是在这里做什么，所以我想知道是否有更合适的方法来对齐这些div。此外，图像设置为背景，我知道如何使它们包含在div本身，但不是css。

我也想把文字放在方框内，放在方框下面。

我将有视频图像，但视频本身。我希望页面加载速度快，然后链接到我将托管的各个视频。我至少需要这个页面来验证严格。

到目前为止它确实如此，但有些东西可以更好地用于编码。

这是代码。

<div class="container">
  <h2>Videos</h2>
    <div class="red">Beginer

<div id="container2">
    <div id="left1"><p>
    Introduction</p>
    </div>
    <div id="center1">B</div>
    <div id="right1">C</div>

</div>
    </div>

  <div class="blue">Intermediate

    <div id="container3">
    <div id="left2">A</div>
    <div id="center2">B</div>
    <div id="right2">C</div>

</div>
    </div>

    <div class="green">Advanced

    <div id="container4">
    <div id="left3">A</div>
    <div id="center3">B</div>
    <div id="right3">C</div>

</div> 
   </div>
     </div>

和CSS

}
    .container {
    position: relative;
    margin: auto;
    width: 500px;
    height: 500px;
    text-align: center;
}
.red {
    background-color: #f00;
    width: 500px;
    height: 125px;
    margin: 15px auto;
    padding-top: 5px;
    box-shadow: 10px 10px 5px #888888;
}
.blue { 
    background-color: yellow;
    width: 500px;
    height: 125px;
    margin: 15px auto;
    padding-top: 5px;
    box-shadow: 10px 10px 5px #888888;
}
.green {
    background-color: green;
    width: 500px;
    height: 125px;
    margin: 15px auto;
    padding-top: 5px;
    box-shadow: 10px 10px 5px #888888;
}

#container2 {
            width:350px;
            text-align:center;        
            margin:0 auto;
            padding: 8px;

        }

        #left1 {
            float:left;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-3.jpg');
        }

        #center1 {
            display: inline-block;
            margin:0 auto;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-3.jpg');
        }

        #right1 {
            float:right;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-3.jpg');
        }

#container3 {
            width:350px;
            text-align:center;        
            margin:0 auto;
            padding: 8px;
        }

        #left2 {
            float:left;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-2.jpg');
        }

        #center2 {
            display: inline-block;
            margin:0 auto;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-2.jpg');
        }

        #right2 {
            float:right;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-2.jpg');
        }

#container4 {
            width:350px;
            text-align:center;        
            margin:0 auto;
            padding: 8px;
        }

        #left3 {
            float:left;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-1.jpg');
        }

        #center3 {
            display: inline-block;
            margin:0 auto;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-1.jpg');
        }

        #right3 {
            float:right;
            width:75px;
            height: 75px;
            background: #888;
            background-image:url('images/temp-1.jpg');
        }

Answer 1

乍一看，您通常应该使用类，而不是ID。这样，共享相同CSS（例如，container2，container3等）的元素可以使用相同的类，并且您不必在不同ID之间复制CSS。同样，元素可以有多个类。例如，将class="red"更改为class="color red"并使用此功能：

.color {
    width: 500px;
    height: 125px;
    margin: 15px auto;
    padding-top: 5px;
    box-shadow: 10px 10px 5px #888888;
}
.red {
    background-color: #f00;
}
.blue { 
    background-color: yellow;
}
.green {
    background-color: green;
}

这样，.color可以应用于任何元素，并且您的代码变得更易于维护。

Answer 2

只是另一个提示。您还可以使用CSS Prettifiers来提高性能。查看ProCSSor

Answer 3

我将CSS类设置为更可重用。这些块的共享设置可以说是＆＃34;图像块＆＃34; class，然后是其他类中左/右/中心的其他设置。

我看到了CSS的一个很好的例子，所以这里有一个HTML如何改变的例子（使用相似但命名不同的类。）

<div class="container container-red">
    <div class="image-block block-left">
      <img src="...">
      <p>A</p>
    </div>
    <div class="image-block block-center">
      <img src="...">
      <p>B</p>
    </div>
    <div class="image-block block-right">
      <img src="...">
      <p>C</p>
    </div>
</div>

Div放置，css和代码清理

和CSS

3 个答案: