起始点
我们将让你在本地开发环境中解决这个挑战；最好在全屏浏览器窗口中查看示例，以确保布局功能按预期工作。
-
在你的电脑上创建一个名为
layout-challenge的新文件夹。 -
在该文件夹中，创建一个
index.html文件，并将以下内容粘贴到其中。html<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Layout Task</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="logo">My exciting website!</div> <nav> <ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About us</a></li> <li><a href="">Our history</a></li> <li><a href="">Contacts</a></li> </ul> </nav> <main class="grid"> <article> <h1>An Exciting Blog Post</h1> <img src="images/square6.jpg" alt="placeholder" class="feature" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non justo at erat egestas porttitor vel nec tortor. Mauris in molestie ipsum. Vivamus diam elit, ornare ornare nisi vitae, ullamcorper pharetra ligula. In vel lacus quis nulla sollicitudin pellentesque. </p> <p> Nunc vitae eleifend odio, eget tincidunt sem. Cras et varius justo. Nulla sollicitudin quis urna vitae efficitur. Pellentesque hendrerit molestie arcu sit amet lacinia. Vivamus vulputate sed purus at eleifend. Phasellus malesuada sem vel libero hendrerit, sed finibus massa porta. Vestibulum luctus scelerisque libero, sit amet sagittis eros sollicitudin ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <p> Phasellus tincidunt eros iaculis, feugiat mi at, eleifend mauris. Quisque porttitor lacus eu massa condimentum, eu tincidunt nisl consequat. Nunc egestas lacus dolor, id scelerisque ante tincidunt ac. In risus massa, sodales ac enim eu, iaculis eleifend lorem. </p> <p> Maecenas euismod condimentum enim, non rhoncus neque tempor ut. Vestibulum eget nisi ornare, vehicula felis id, aliquet nibh. Donec in mauris in diam aliquam commodo nec ac nunc. Aliquam nisl risus, eleifend a iaculis id, tempor vel tortor. Nam ullamcorper dictum tellus id rhoncus. Sed quis nulla in mi aliquam euismod nec eu metus. </p> <p> Nam orci nulla, convallis aliquet ante ut, lobortis hendrerit risus. Nulla malesuada porta turpis in consequat. Duis suscipit nulla a mauris pellentesque vehicula. Fusce euismod, mi malesuada venenatis vestibulum, metus erat faucibus dui, vel rutrum turpis nibh ut diam. </p> <p> Nam ornare et mauris eget tincidunt. Nam ornare et mauris eget tincidunt. Donec et ipsum a orci elementum commodo et ut ex. Vivamus porttitor sem in purus maximus, eu imperdiet felis lobortis. </p> <p> Pellentesque ullamcorper dolor ut ullamcorper convallis. Duis a orci aliquet, pretium neque ut, auctor purus. Proin viverra tincidunt nisi id fringilla. Maecenas interdum risus in ultricies finibus. Vestibulum volutpat tincidunt libero, a feugiat leo suscipit in. Sed eget lacus rutrum, semper ligula a, vestibulum ipsum. Mauris in odio fringilla, accumsan eros blandit, mattis odio. Ut viverra mollis augue, vitae ullamcorper velit hendrerit eu. Curabitur mi lacus, condimentum in auctor sed, ornare sed leo. </p> </article> <aside> <h2>Photography</h2> <ul class="photos"> <li><img src="images/square1.jpg" alt="placeholder" /></li> <li><img src="images/square2.jpg" alt="placeholder" /></li> <li><img src="images/square3.jpg" alt="placeholder" /></li> <li><img src="images/square4.jpg" alt="placeholder" /></li> <li><img src="images/square5.jpg" alt="placeholder" /></li> </ul> </aside> </main> </body> </html> -
在该文件夹中，创建一个
style.css文件，并将以下内容粘贴到其中。css* { box-sizing: border-box; } body { background-color: white; color: #333333; margin: 0; font: 1.2em / 1.6 sans-serif; } img { max-width: 100%; display: block; border: 1px solid black; } .logo { font-size: 200%; padding: 50px 20px; margin: 0 auto; max-width: 980px; } .grid { margin: 0 auto; max-width: 980px; } nav { background-color: black; padding: 0.5em; } nav ul { margin: 0; padding: 0; list-style: none; } nav a { color: white; text-decoration: none; padding: 0.5em 1em; } .photos { list-style: none; margin: 0; padding: 0; } .feature { width: 200px; } -
在该文件夹内，创建一个名为
images的子文件夹，并将以下图像文件保存在其中 -
保存你的文件，并在浏览器中加载
index.html，准备进行测试。页面的起始点具有基本样式但没有布局，应该看起来像这样
项目简介
你已获得一些原始 HTML、基本 CSS 和图片 — 现在你需要为设计创建一个布局。
你需要完成的任务包括
提示和技巧
- 你无需编辑 HTML 即可完成此挑战。
- 在项目中，有几种方法可以实现一些任务，并且通常没有一个绝对正确或错误的方法。尝试几种不同的方法，看看哪种效果最好。在实验时做笔记。
示例
以下屏幕截图显示了设计完成布局的示例外观
单击此处显示一个可能的解决方案
完成后的 CSS 如下所示
css
* {
box-sizing: border-box;
}
body {
background-color: white;
color: #333333;
margin: 0;
font: 1.2em / 1.6 sans-serif;
}
img {
max-width: 100%;
display: block;
border: 1px solid black;
}
.logo {
font-size: 200%;
padding: 50px 20px;
margin: 0 auto;
max-width: 980px;
}
.grid {
margin: 0 auto;
max-width: 980px;
/* Solution: Display <article> and <aside> as two flexible
columns, with <article> three times the width of <aside>,
and a 20px gap */
display: grid;
grid-template-columns: 3fr 1fr;
gap: 20px;
}
nav {
background-color: black;
padding: 0.5em;
/* Solution: Make navigation bar scroll with content normally but
then stick to top of viewport */
top: 0;
position: sticky;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
/* Solution: Display the navigation items in a row with equal space
in between and less space at the ends */
display: flex;
justify-content: space-around;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5em 1em;
}
.photos {
list-style: none;
margin: 0;
padding: 0;
/* Solution: Display photos in two-column grid with equal columns
and a 5px gap */
display: grid;
gap: 5px;
grid-template-columns: 1fr 1fr;
}
.feature {
width: 200px;
/* Solution: Wrap text around the "feature" image to the right and bottom,
with suitable space between image and text */
float: left;
margin: 8px 30px 20px 0;
}