我正在学习 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;
}
最佳答案
您可以使用行内 block 显示或向左浮动，
例如
.promos li {
display: inline-block;
}
或
.promos li {
float: left;
}
关于html - 在页面宽度上水平对齐 <li>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27890931/