使用HTML+CSS的iPhone 6登录页面

Question

我有一个相当宽泛的问题。是否有可能创建简化版本的：http://www.apple.com/uk/shop/buy-iphone/iphone6登录页面只使用html/css？

关键功能将是选项菜单，当您选择所需的颜色和容量，并在所有被选中后，将出现一个按钮，以转发到相应的产品。按钮将根据您在上面的选项中选择的内容直接指向产品。如果第1行中未选择任何内容，则第2选项行应处于非活动状态。图像可能只是静态的。

Answer 1

你可以做到这一点，但这需要大量的重复性工作。根据用户的选择，每个按钮将重定向到另一个HTML页面。所以你基本上需要创建至少10个HTML页面，每个页面都有电话图片，其他选项，等等，每个按钮选择。至于弹出框，您需要JS。如果我是你，我会直接学习JavaScript。

Answer 2

使用HTML，您只能描述网站的标记(布局)。使用CSS，你可以做布局，样式，动画和像“悬停”这样的小动作等等。

你想要的是逻辑，如果不使用JavaScript，就没有办法在网站中实现逻辑。

Answer 3

对于CSS输入和它们的标签，您可以使用一些技巧。基本上，您可以将选项设置为附加到隐藏复选框的标签。然后，如果复选框被选中，则执行一些CSS。看看这个愚蠢的游戏：http://codepen.io/elad2412/pen/hBaqo

它基本上是浮动的标签，如果您单击标签，它的复选框将被选中，CSS会识别并执行一些其他样式以使其工作。我不打算为您的特定场景解决这个问题，但这应该会给您提供一个选项来查看。

<input class="input-option" type="radio" id="option1" >
<label for="option1">Put your option 1 here. When someone clicks the label, the input will be checked.</label>

您可以根据选中的内容显示不同的背景图像。

#option1:checked #option4:checked ~ .imagecontainer { background-image:url(foo.bar) }