Question

我正在学习HTML / CSS，我开始重新创建Apple网站。这就是我到目前为止所做的。

http://i.imgur.com/uKdweu6.jpg

我已经阅读了页面底部的四个宣传片，我不知道如何正确制作这些宣传片。在真实网站上，如果缩小，您可以看到促销图像实际上更宽，但在放大时，它们会被裁剪并正确对齐。如何重建这个？

以下是我从资源中获得的四张促销图片： http://imgur.com/3ZpZJEc,xlqqcE7,hGoNpfQ,byiZLf1/

我查看了源代码，发现它是用li元素创建的，所以我继续创建了一个。

这是我的代码

HTML：

<body>

    <div class="nav" align="center">
        <a href="http://www.apple.com/"><img src="http://goo.gl/VfB5zk"></a>
        <a href="http://www.apple.com/mac/"><img src="http://goo.gl/iwWkpP"></a>
        <a href="http://www.apple.com/iphone/"><img src="http://goo.gl/vgZM2X"></a>
        <a href="http://www.apple.com/watch/"><img src="http://goo.gl/uPwhwi"></a>
        <a href="http://www.apple.com/ipad/"><img src="http://goo.gl/Tjs3Ux"></a>
        <a href="http://www.apple.com/ipod/"><img src="http://goo.gl/i4EE4Y"></a>
        <a href="http://www.apple.com/itunes/"><img src="http://goo.gl/l19lzX"></a>
        <a href="http://www.apple.com/support/"><img src="http://goo.gl/P1Lsht"></a>
    </div>

    <div class="jumbotron" align="center">
        <h1>Start something new.</h1>
        <p>When you start with amazing products, you can create amazing things.</p>
        <br>
        <a href="http://www.apple.com/start-something-new/">View the gallery</a>
        <br>
        <img src="Images/Jumbotron Banner.png">
    </div>

    <div class="promos">
        <ul>
            <li>
                <a href="http://www.apple.com/ipad-air-2/change/"><img src="Images/iPad.jpg"></a>
            </li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>
</html>

CSS：

@import url("Fonts/Myriad_Set_Ultra_Light/stylesheet.css");
@import url("Fonts/Myriad_Set_Light/stylesheet.css");

* {
    margin: 0px;
    padding: 0px;
    font-family: "Myriad Set Ultra Light";
}

.nav {
    background-color: #646464;
}

.nav img {
    margin-top: 13px;
    margin-bottom: 11px;
}

.jumbotron {
    font-family: "Myriad Set Ultra Light";
}

.jumbotron h1 {
    font-size: 64px;
    margin-top: 30px;
    margin-bottom: 12px;
}

.jumbotron p {
    font-size: 25px;
    font-family: "Myriad Set Light";
}

.jumbotron a {
    font-size: 25px;
    font-family: "Myriad Set Light";
    color: #3ba3d7;
    text-decoration: none;
}

.jumbotron img {
    height: 400px;
    position: absolute;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.promos {
    margin-top: 450px;
}

.promos li {
    list-style: none;
}

.promos img {
    height: 200px;
}

Answer 1

你可以使用内联块显示或向左浮动，

e.g。

.promos li {
    display: inline-block;
}

或

.promos li {
    float: left;
}

将<li>水平对齐页面宽度</li>

1 个答案: