用HTML和CSS构建原型

  • 知识需要+$: A bit of secondary school maths
  • 需要+$: Text editor (optional), modern browser
  • 项目时间: 1小时

+$If you already know how to build a basic web page, you probably won't learn anything here. But if you don't, or your knowledge is from back in the days of table-based layouts, this will give you a good grounding in building prototypes in HTML and CSS.

+$Why prototype in code?

+$If you're building a prototype for the web, it makes sense to build it in its natural environment as it provides as real an experience as you can hope to achieve. Understanding how to build your designs can also give you a greater affinity with developers; they'll be more open to your ideas and able to communicate theirs better too.

+$It also has the benefit that you can take full advantage of all the web has to offer. Your prototype can adapt to the width of the browser window but a graphic wireframe can't. This is useful when demonstrating how your site adapts at different screen widths.

ElfCartel is an example of an interactive prototype by Clearleft. On the left is the page on a wide screen, on the right is how it looks when the browser width is decreased

+$ElfCartel is an example of an interactive prototype by Clearleft. On the left is the page on a wide screen, on the right is how it looks when the browser width is decreased

+$What About Frameworks?

+$Frameworks Like960+$are really useful for prototyping, but before you dive into one of these, it's useful to understand the fundamentals of how it works first. Once you've got to grips with how it all fits together, you'll be much better prepared.

+$Assumptions

+$There are a couple of assumptions I'm going to make about your prototype:

  • +$It's only going to be viewed in modern browsers, including during user testing and if the link is sent to a client.
  • +$Your code isn't going to be made live. I won't be talking about how to build in a way that's optimised or as semantic as live code should be.

+$Testing in older browsers and code optimisation wouldn't fit in this article, and would be overkill for a quick prototype. However, if you’ll be testing with real users, take speed of page load into account.

入门

+$If you've got a design, start by printing it out and labelling it.

  1. +$Draw boxes round things for the layout. How many columns are there? Draw round these.
  2. +$What are the widths of these boxes and columns?
  3. +$Note the main text elements like headings, paragraphs, lists, images and links.
  4. +$What are the common styles? What are the default text styles, link colours and heading sizes?

In this example, I've drawn over the design on tracing paper, identified two columns, a header and a footer. I've also noted down widths in pixels and labelled some key elements like the thumbnails and breadcrumbs

+$In this example, I've drawn over the design on tracing paper, identified two columns, a header and a footer. I've also noted down widths in pixels and labelled some key elements like the thumbnails and breadcrumbs

+$Now we're ready to start building. If you have a code editor, create a file called "index.html" and paste the following code in. If you don't, you can follow along straight away in the browser using Remy Sharp'sJsbin.com+$. (No tedious sign-up or download required.)

结构体

+$This is a web page at its most basic level:

  1. <HTML>
  2. <>
  3. <Charset =“utf-8”/>
  4. <标题+$>Page Name标题>
  5. 头>
  6. <身体>
  7. <P+$>Page ContentP>
  8. 身体>
  9. HTML>

+$Start editing this code

+$Anything Within Our+$tags is information for the browser and doesn't get displayed on our page. The bit within the </ HTML></strong>+$tags is the name of the page and gets put in the browser tab. All our page content goes within the<strong><body></strong>标签。</p><p>+$The first thing we're going to do is put our basic structure in place. I normally begin by marking up the content and work my way out from this, but people who are new to HTML often find it easier to begin by thinking about how content is grouped.</p><p>+$To do this, I'm going to add in the main page sections using<strong><div></strong>+$tags. These tags are used to group bits of content together. Nested within the<strong><div></strong>+$tag I've added text inside<strong><p></strong>+$(paragraph) Tags.</p><ol><li><strong><!DOCTYPE Html></strong></li><li><strong><<a href="http://december.com/html/4/element/html.html">HTML</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/head.html">头</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/meta.html">元</a>Charset =“utf-8”/></strong></li><li><strong><<a href="http://december.com/html/4/element/title.html">标题</a>+$>Page Name</<a href="http://december.com/html/4/element/title.html">标题</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/head.html">头</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/body.html">身体</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/div.html">DIV</a>+$class="header"></strong></li><li><strong><<a href="http://december.com/html/4/element/p.html">P</a>+$>Header</<a href="http://december.com/html/4/element/p.html">P</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/div.html">DIV</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/div.html">DIV</a>+$class="content"></strong></li><li><strong><<a href="http://december.com/html/4/element/p.html">P</a>+$>Content</<a href="http://december.com/html/4/element/p.html">P</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/div.html">DIV</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/div.html">DIV</a>+$class="ads"></strong></li><li><strong><<a href="http://december.com/html/4/element/p.html">P</a>+$>Ads</<a href="http://december.com/html/4/element/p.html">P</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/div.html">DIV</a>></strong></li><li><strong><<a href="http://december.com/html/4/element/div.html">DIV</a>+$class="footer"></strong></li><li><strong><<a href="http://december.com/html/4/element/p.html">P</a>+$>Footer</<a href="http://december.com/html/4/element/p.html">P</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/div.html">DIV</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/body.html">身体</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/html.html">HTML</a>></strong></li></ol><p>该<strong>+$"class="</strong>+$bit is a label we use as a hook to help style content. We'll come back to this shortly.</p><p>+$Note the indentation and the way I've lined up the opening and closing tags. Try and keep your code easy to read or you'll get in a muddle. Also, you can't make up your own HTML tags, but there are lots to choose from. Here's an<a href="http://www.uxbootcamp.org/prototyping/prototyping-cheat-sheets/">HTML备忘单</a>+$you can print and refer to.</p><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/88c0ba91fe24b7b95232a3b4725be158-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/88c0ba91fe24b7b95232a3b4725be158-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/88c0ba91fe24b7b95232a3b4725be158-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/88c0ba91fe24b7b95232a3b4725be158.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/88c0ba91fe24b7b95232a3b4725be158.jpg" /></p><h2 id="styling">造型</h2><p>+$We're now going to begin styling the content using CSS (Cascading Style Sheets). HTML is about what the content is, and CSS is about how that content looks. I like to start by adding garish background colours onto everything to help me see where things are on the page.</p><p>+$In my examples, I'm adding all my CSS styles before the<strong></head></strong>+$tag so we can see everything on one page, but if you're building more than one page, it's better to create a separate style sheet and link to this externally.</p><p>+$To do this, create a new file in the same directory as index.html called styles.css, and in your index.html file, add this bit of code before the<strong></head></strong>标签。</p><ol><li><strong><<a href="http://december.com/html/4/element/link.html">链接</a>+$href="styles.css" rel="stylesheet" type="text/css" /></strong></li></ol><p>+$All your styles will live in here.</p><p>+$If you're using jsbin, open a<strong><style></strong>+$tag Before Your<strong></head></strong>+$tag, paste the following code inside, and close it with a<strong></style></strong>。</p><ol><li><strong>+$<code>div {</strong></li><li><strong>+$background-color: Hotpink;</strong></li><li><strong>身高:100px;</strong></li><li><strong>}</strong></li><li><strong> </strong></li><li><strong>P {</strong></li><li><strong>+$background-color: Orange;</strong></li><li><strong>+$}</code></strong></li></ol><p>+$Any bits of content we've wrapped in a<strong><div></strong>+$tag have been given a bright pink background. I've also added a height to these so you can see more clearly what's happening, but we'll take this off later when there's proper content inside.</p><figure><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Here's how our page looks now we've given everything a background colour" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/d38c6b81b775e8166faf2af97d305783-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/d38c6b81b775e8166faf2af97d305783-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/d38c6b81b775e8166faf2af97d305783-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/d38c6b81b775e8166faf2af97d305783.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/d38c6b81b775e8166faf2af97d305783.jpg" /></p><figcaption><div class="caption-text">+$Here's how our page looks now we've given everything a background colour</div></figcaption></figure><p>+$What if we want to style each content block differently? Underneath the styles we just added, but before the<strong></style></strong>+$tag, we're going to add the following:</p><ol><li><strong>+$.header {</strong></li><li><strong>+$background-color: Green;</strong></li><li><strong>}</strong></li><li><strong> </strong></li><li><strong>+$.content {</strong></li><li><strong>+$background-color: Red;</strong></li><li><strong>}</strong></li><li><strong> </strong></li><li><strong>+$.ads {</strong></li><li><strong>+$background-color: Blue;</strong></li><li><strong>}</strong></li><li><strong> </strong></li><li><strong>+$.footer {</strong></li><li><strong>+$background-color: Yellow;</strong></li><li><strong>}</strong></li></ol><p>+$Note the American spelling of "color".</p><p>+$Remember The<strong>类=“”</strong>+$bits we added to our HTML tags? We're using these class names as hooks to style. The<strong>。</strong>+$before the word "header", "content" and "footer" shows that this is a classname rather than the name of an element. (We didn't add a<strong>。</strong>+$before the div and p because they are pure HTML elements rather than classnames.)</p><h2 id="choosing-classnames">+$Choosing Classnames</h2><p>+$You can name a class anything, as long as it doesn't start with a symbol or a number, and it needs to all be one word or string. However, it's worth thinking carefully about the names you use. To be effective in an agile environment, our prototype code needs to be:</p><p class="mid__article"></p><ul><li>+$Quick to update if we decide to do something like tweak the layout. This is why it's a very good idea to use class names that describe what the content is rather than how it looks. If you were to give it a classname like "left-hand-col" or "red" and later move it to the right or change the colour, it will be very confusing.</li><li>+$Clear and easy to read, not a mess of tags. Make sure you indent tags nicely so it doesn't get confusing. Tags that haven't been closed and break the page are the usual reason why things aren't working as you expect, and they're difficult to spot unless your markup is well organised.</li><li>+$Easy to understand if you hand the code to someone else. A good way to document your work is to add comments in your HTML and CSS explaining what things do. (Comments can be added<strong>+$<!-- like this --></strong>+$in HTML And<strong>+$/* Like This */</strong>+$in CSS.)</li></ul><h2 id="layout">布局</h2><p>+$Now we know how to target blocks of content specifically, we'll start laying things out. The design I've done is in pixels, but flexible layouts are cool so we'll convert our pixels into percentages using a bit of secondary school maths.</p><figure><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Here's how my annotated design looks" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/745656a3704f45722da577153485c896-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/745656a3704f45722da577153485c896-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/745656a3704f45722da577153485c896-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/745656a3704f45722da577153485c896.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/745656a3704f45722da577153485c896.jpg" /></p><figcaption><div class="caption-text">+$Here's how my annotated design looks</div></figcaption></figure><p>+$The total width of our design is 960px. We've got two columns, one a width of 720px and the other a width of 220px. (This gives us a 20px gap in-between the columns.) The main column, which we've given the class of "content" sits on the left, the smaller one with the class of "ads" to the right. The header and footer are 960px wide.</p><ol><li>+$960px is 100% of the width of all the content. So to find out how much 1px is in percentages, we divide 100 by 960.</li><li>+$This gives us 0.104166667, which we'll round to 0.104%</li><li>+$Therefore 720 x 0.104 = 74.88% and 220 x 0.104 = 22.88%</li></ol><p>+$We can position blocks of content in CSS by telling things to "float". When we tell something to<strong>+$"float: Left"</strong>+$, we're telling it to push to the top-left corner of its containing element, and stop if there's anything in its way.<strong>+$"float: Right"</strong>+$tells it to float to the top-right corner. It's a bit like text-align left and right, but for blocks of content. We also need to give the blocks widths or they'll default to the full width of their content and won't sit next to each other. Add the following to the bottom of your styles:</p><ol><li><strong>+$.content {</strong></li><li><strong>+$width: 74.88%; /* 720px */</strong></li><li><strong>向左飘浮;</strong></li><li><strong>}</strong></li><li><strong>+$.ads {</strong></li><li><strong>+$width: 22.88%; /* 220px */</strong></li><li><strong>漂浮:对;</strong></li><li><strong>}</strong></li><li><strong>+$.footer {</strong></li><li><strong>明确:两者;</strong></li><li><strong>}</strong></li></ol><p>+$I've added a CSS comment next to the widths to help me remember what they originally were in pixels. Comments are very useful for documentation, use them generously.</p><p>+$I've also told the footer to<strong>+$"clear:left",</strong>+$which is like forcing it onto a new line. It was filling the space left when we added the float rules, and rising up next to the ad block where we didn't want it.</p><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/6122e70c5ff35c3a5ae72a9d9f641e2a-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/6122e70c5ff35c3a5ae72a9d9f641e2a-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/6122e70c5ff35c3a5ae72a9d9f641e2a-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/6122e70c5ff35c3a5ae72a9d9f641e2a.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/6122e70c5ff35c3a5ae72a9d9f641e2a.jpg" /></p><p>+$You'll have probably noticed, our text sits flush against the edge of the blocks. We should give it a bit of breathing space, so we'll add some padding to the content. This pulls the text that's inside the container away from the edges. In my design I noted this padding as 20px, which is 2.08%. We'll also add some margin to the bottom to push the blocks away from each other so they aren't touching. This can stay as pixels because only the widths are going to be flexible.</p><ol><li><strong>+$.content {</strong></li><li><strong>+$width: 74.88%; /* 720px */</strong></li><li><strong>向左飘浮;</strong></li><li><strong>+$padding: 2.08%;</strong></li><li><strong>}</strong></li><li><strong>+$.header,</strong></li><li><strong>+$.content,</strong></li><li><strong>+$.ads {</strong></li><li><strong>+$margin-bottom: 20px;</strong></li><li><strong>}</strong></li></ol><p>+$I've grouped the styles for the content, ad and header blocks using a comma, because they both share the same properties. Making changes is a lot quicker when you can group styles.</p><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/0623b4a5b6ee2f5fba95d9dfa46e01f3-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/0623b4a5b6ee2f5fba95d9dfa46e01f3-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/0623b4a5b6ee2f5fba95d9dfa46e01f3-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/0623b4a5b6ee2f5fba95d9dfa46e01f3.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/0623b4a5b6ee2f5fba95d9dfa46e01f3.jpg" /></p><p>+$Oops, our blocks don't sit next to each other any more. This is because when we add padding, it adds to the overall width of the block. We'll go back and change the widths to take the padding into account by taking away the extra 2.08% that's been added to the left and right of the content block.</p><ol><li><strong>+$.content {</strong></li><li><strong>+$width: 70.72%; /* 680px */</strong></li><li><strong>向左飘浮;</strong></li><li><strong>+$padding: 2.08%;</strong></li><li><strong>}</strong></li></ol><p>+$Confused about why this happens?<a href="http://www.w3.org/wiki/CSS/Training/padding_and_margin">+$Here's some more in-depth reading on padding and margin</a>+$. I've also set up an<a href="http://jsbin.com/akapen/6/edit#html,live">+$interactive demo in jsbin of what we've got so far</a>。</p><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/a2047ade04697c22ed3f78ba8b926e01-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/a2047ade04697c22ed3f78ba8b926e01-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/a2047ade04697c22ed3f78ba8b926e01-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/a2047ade04697c22ed3f78ba8b926e01.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/a2047ade04697c22ed3f78ba8b926e01.jpg" /></p><h2 id="images">图片</h2><p>+$To save us some time, let's use a service called<a href="http://placehold.it/">+$placehold.it</a>+$to add placeholder images to the page. This generates images at any dimensions we choose. I'll add our first one in the HTML, within the<strong>+$<div class="ad"></div</strong>+$> Tags.</p><ol><li><strong><<a href="http://december.com/html/4/element/img.html">IMG</a>+$src="http://placehold.it/220x400" /></strong></li></ol><p>+$The 220x400 bit refers to the width and height. This automatically loads in a placeholder image into our ad column, but because the image is bigger than the width of the column, it overflows. This is nice and easy to fix in CSS.</p><ol><li><strong>Img {</strong></li><li><strong>最大宽度:100%;</strong></li><li><strong>}</strong></li></ol><p>+$This forces images to never be bigger than their containing element, and they'll adapt to the width of the page.</p><h2 id="thumbnails">缩略图</h2><p>+$The next step is to add some thumbnails within the main content column between the<strong>+$<div class="content"></div></strong>+$tags, and get them to line up next to each other. Here's the HTML for one thumbnail, so copy and paste it a few times to add more.</p><ol><li><strong><<a href="http://december.com/html/4/element/a.html">一个</a>+$class="thumbnail" Href="#"></strong></li><li><strong><<a href="http://december.com/html/4/element/img.html">IMG</a>+$src="http://placehold.it/213x160" /></strong></li><li><strong><<a href="http://december.com/html/4/element/p.html">P</a>+$>Strawberry Cheesecake</<a href="http://december.com/html/4/element/p.html">P</a>></strong></li><li><strong></<a href="http://december.com/html/4/element/a.html">一个</a>></strong></li></ol><p>+$The link is wrapped round the image and the paragraph, so the whole area is clickable. (I've just added a # in the<strong>+$href=</strong>+$bit because the link doesn't go anywhere yet, but you can add a URL.)</p><p>+$We now need to make these line up next to each other, three in a row, with a bit of a gap to the right. Here's the CSS:</p><ol><li><strong>+$.thumbnail {</strong></li><li><strong>向左飘浮;</strong></li><li><strong>+$width: 31%; /* That's 31% of the containing element */</strong></li><li><strong>+$margin-right: 3.5%;</strong></li><li><strong>+$margin-bottom: 13px;</strong></li><li><strong>Text-decoration:none;</strong></li><li><strong>}</strong></li><li><strong>+$.thumbnail:nth-of-type(3n+3) {</strong></li><li><strong>Margin-right:0;</strong></li><li><strong>}</strong></li></ol><p>+$I've given each thumbnail a width of 31% which is roughly a third of 100%, and<strong>+$"float:left"</strong>+$so they line up. I've also given each one a margin-right of 3.5%, but I don't want the third thumbnail on each row to have any margin because there's already a gap from the padding on the content column. This is why I've put<strong>+$"margin-right: 0;"</strong>上<strong>+$".thumbnail:nth-of-type(3n+3)"</strong>。<strong>+$":nth-of-type(3n+3)"</strong>+$looks for the third element with a class of "thumbnail" and every third one after that, and removes the margin.</p><p>+$Now we've got some content in place, we can remove "height: 100px;" from the style for<strong>+$"div"</strong>+$elements that we added right at the start.</p><figure><p class="bordeaux-image-check"><img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="Our page with all the elements in place" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/a57b28466d2d55224971b307b9af35e7-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/a57b28466d2d55224971b307b9af35e7-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/a57b28466d2d55224971b307b9af35e7-650-80.jpg 650w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/a57b28466d2d55224971b307b9af35e7.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/a57b28466d2d55224971b307b9af35e7.jpg" /></p><figcaption><div class="caption-text">+$Our page with all the elements in place</div></figcaption></figure><p>+$With the basic structure in place, adding the rest of the content and styles is much more straightforward.<a href="http://jsbin.com/akapen/5/edit#html,live">+$I've built a version of this prototype in jsbin</a>+$if you wanted to poke about with it. If you're really proud of what you've built, hit save and share a link to your version in the comments.</p><p>+$There's a lot I couldn't fit in here like the cascade, box model, different ways to position content and adding more pages, but if you're interested in learning more there'll be another<a href="http://www.uxbootcamp.org/prototyping/">+$UX Bootcamp Prototyping in Code workshop on 27 to 29 October</a>。</p><h2 id="further-reading-and-resources">+$Further reading and resources</h2><ul><li><a href="http://www.w3.org/wiki/Web_Standards_Curriculum">+$Web Standards Curriculum (Very readable set of web development tutorials)</a></li><li><a href="http://hackasaurus.org/hackbook/">+$Hackasaurus Hackbook (HTML snippet library)</a></li><li><a href="http://getfirebug.com/">+$Firebug web inspector (Firefox extension)</a></li><li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">+$Web Developer toolbar (Firefox extension)</a></li><li><a href="http://developer.yahoo.com/yui/3/">+$Yahoo User Interface Library</a>(看看<a href="http://developer.yahoo.com/yui/3/cssgrids/">网格</a>+$section)</li></ul><p>话:<a href="http://www.maban.co.uk/">安娜德本汉姆</a></p><p><em>+$Anna is a front-end developer, trying to make the world a better place. She works with Mozilla on a project called<a href="http://hackasaurus.org/">Hackasaurus</a>+$, which helps teach kids how about the open web, launched an online magazine called<a href="http://scrunchup.com/">刮起来</a>+$, for young designers and developers, and is the technician for the<a href="http://boagworld.com/">+$Boagworld Podcast</a>。</em></p> </div> <div class="next-prev-container"> <div class="box pagination internal current-prev-next recent-news sticky-next-prev"></div> </div> <div class="jwcarousel__hook"></div> <div class="box"> <a class="block-link full" href="https://www.n2v.net/tag/web-design"><span class="chunk">查看更多网页设计网页设计</span><div class="block-icon"><span class="icon icon-arrow-right"></span></div></a> </div> <div id="this-will-be-used-for-mpu-2"></div> <div class="box" id="articleTag"> <h3 class="separator-heading">话题</h3> <div class="tag"> <a href="https://www.n2v.net/tag/web-design">网页设计</a> </div> </div> <div class="box"> <h4 class="separator-heading">相关文章</h4> <ul class="media-list"> <li> <a href="https://www.n2v.net/features/a-web-designers-guide-to-css-methodologies"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="A web designer's guide to CSS methodologies" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/NsZcKDGzLHRqu5qZjVgD94-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/NsZcKDGzLHRqu5qZjVgD94-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/NsZcKDGzLHRqu5qZjVgD94-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/NsZcKDGzLHRqu5qZjVgD94-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/NsZcKDGzLHRqu5qZjVgD94.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/NsZcKDGzLHRqu5qZjVgD94.jpg" /> <span>+$A web designer's guide to CSS methodologies</span> </a> </li> <li> <a href="https://www.n2v.net/advice/the-7-web-design-lessons-you-need-to-know"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="The 7 web design lessons you need to know" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/gZgKtrRbTQ2aCnA8FxgYsb-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/gZgKtrRbTQ2aCnA8FxgYsb-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/gZgKtrRbTQ2aCnA8FxgYsb-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/gZgKtrRbTQ2aCnA8FxgYsb-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/gZgKtrRbTQ2aCnA8FxgYsb.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/gZgKtrRbTQ2aCnA8FxgYsb.jpg" /> <span>你需要知道的7节网页设计课程</span> </a> </li> <li> <a href="https://www.n2v.net/inspiration/3-shiny-new-css-properties-for-you-to-try-today"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="3 shiny new CSS properties for you to try today" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/kzSaedA6fLhNvzkHzLb9nZ-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/kzSaedA6fLhNvzkHzLb9nZ-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/kzSaedA6fLhNvzkHzLb9nZ-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/kzSaedA6fLhNvzkHzLb9nZ-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/kzSaedA6fLhNvzkHzLb9nZ.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/kzSaedA6fLhNvzkHzLb9nZ.jpg" /> <span>3个闪亮的新css属性,供您今天试用。</span> </a> </li> <li> <a href="https://www.n2v.net/how-to/21-ways-to-optimise-your-css-and-speed-up-your-site"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="21 ways to optimise your CSS and speed up your site" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/iTr3r5vxri2ka9oHh2vpWa-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/iTr3r5vxri2ka9oHh2vpWa-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/iTr3r5vxri2ka9oHh2vpWa-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/iTr3r5vxri2ka9oHh2vpWa-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/iTr3r5vxri2ka9oHh2vpWa.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/iTr3r5vxri2ka9oHh2vpWa.jpg" /> <span>21种优化CSS和加快站点速度的方法</span> </a> </li> </ul> </div> </section> <footer id="taboola-below-article-thumbnails"></footer> <script> var taboola_lists = []; taboola_lists.push( { mode: 'thumbnails-e', container: 'taboola-below-article-thumbnails', placement: 'Below Article Thumbnails', target_type: 'mix' } ) window._taboola = window._taboola || []; for(var i=0;i<taboola_lists.length;i++) { _taboola.push(taboola_lists[i]); } </script> <footer id="comment-jump"> </footer> </article> <aside id="sidebar"> <section class="recommended-content"> <div class="recommendation-container"> <h3>推荐的</h3> <div class="recommendation-articles"> <div class="recommended-article item-1"> <a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380"> <div class="article-image-container item-1"> <div class="article-image item-1"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-600-80.jpg 600w, https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-1">74款最适合设计师的免费字体</h4> </a> </div> <div class="recommended-article item-2"> <a href="https://www.n2v.net/inspiration/10-most-hated-logos-and-what-they-teach-us"> <div class="article-image-container item-2"> <div class="article-image item-2"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/EbSBVNsSJab3FWDHmgnw6i-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/EbSBVNsSJab3FWDHmgnw6i-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/EbSBVNsSJab3FWDHmgnw6i-600-80.jpg 600w, https://cdn.mos.cms.futurecdn.net/EbSBVNsSJab3FWDHmgnw6i-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/EbSBVNsSJab3FWDHmgnw6i.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/EbSBVNsSJab3FWDHmgnw6i.jpg" data-pin-nopin="true" /> </div> </div> <h4 class="article-name item-2">10个最讨厌的徽标(以及他们教给我们的东西)</h4> </a> </div> <div class="sponsored-post"><div style="width:100%"></div></div> </div> </div> </section> <section class="box newsletter-signup"> <h3 class="separator-heading"> <span> <i class="icon icon-envelope white"></i><span class="newsletter-title">获取每周提示和灵感</span> </span> </h3> <div class="grey-box"> <p>请在下面注册以获取Creative Bloq的最新信息,以及独家特别优惠,直接到您的收件箱!</p> <iframe style="width:100%" height="100" data-lazy-src="//future-publishing.msgfocus.com/k/Future-Publishing/vanilla_newsletter_sign_up_form_website_posts" data-lazy-priority="low"> </iframe> <footer> <small>没有垃圾邮件,我们保证。您可以随时取消订阅,未经您的许可,我们绝不会分享您的详细信息。</small> </footer> </div> </section> <section class="popular-box"> <div id="popular-box-wrapper" class="style1"> <div class="most-popular-tab-bar"> <input type="radio" name="popradio" id="popradio-1" checked /> <input type="radio" name="popradio" id="popradio-2" /> <div id="popularcontent"> <div class="flex-row"> <label class="poplabel" id="poplabel-1" for="popradio-1"> <span>最阅读</span> </label> <label class="poplabel" id="poplabel-2" for="popradio-2"> <span>最共享的</span> </label> </div> <ol class="popular-list active" id="poplist-1"> <li class="most-popular-item first-article"> <div style="width:100%"> <a href="https://www.n2v.net/inspiration/8-brilliant-portfolios-from-young-designers"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-1">1</span><h4><a href="https://www.n2v.net/inspiration/8-brilliant-portfolios-from-young-designers">9位年轻设计师的杰出作品</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/new-city-of-paris-logo-is-a-design-tour-de-force"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-2">2</span><h4><a href="https://www.n2v.net/news/new-city-of-paris-logo-is-a-design-tour-de-force">巴黎新城标志是设计之旅。</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/GeXx8fUjEghT5d46iHhYSe.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-3">3</span><h4><a href="https://www.n2v.net/graphic-design-tips/best-free-fonts-for-designers-1233380">74款最适合设计师的免费字体</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/inspiration/css-animation-examples"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/ySxsZJqD8JkHNJwynk8wBL-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/ySxsZJqD8JkHNJwynk8wBL-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/ySxsZJqD8JkHNJwynk8wBL-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/ySxsZJqD8JkHNJwynk8wBL-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/ySxsZJqD8JkHNJwynk8wBL.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/ySxsZJqD8JkHNJwynk8wBL.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-4">4</span><h4><a href="https://www.n2v.net/inspiration/css-animation-examples">19个很酷的CSS动画示例重新创建</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/buying-guides/the-10-best-drawing-books"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-5">5</span><h4><a href="https://www.n2v.net/buying-guides/the-10-best-drawing-books">+$The 10 best drawing books</a></h4> </div> </div> </li> </ol> <ol class="popular-list " id="poplist-2"> <li class="most-popular-item first-article"> <div style="width:100%"> <a href="https://www.n2v.net/buying-guides/the-10-best-drawing-books"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/Jk3EdV8NU5AY2m9FnMMqjQ.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-1">1</span><h4><a href="https://www.n2v.net/buying-guides/the-10-best-drawing-books">+$The 10 best drawing books</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/reviews/hands-on-surface-studio-2-review"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/VgZvxkmnDcfgoNth8jJ7iJ-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/VgZvxkmnDcfgoNth8jJ7iJ-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/VgZvxkmnDcfgoNth8jJ7iJ-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/VgZvxkmnDcfgoNth8jJ7iJ-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/VgZvxkmnDcfgoNth8jJ7iJ.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/VgZvxkmnDcfgoNth8jJ7iJ.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-2">2</span><h4><a href="https://www.n2v.net/reviews/hands-on-surface-studio-2-review">+$Hands on: Surface Studio 2 review</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/inspiration/8-brilliant-portfolios-from-young-designers"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/K2b9QjmyD7Jop6tbG7Jxea.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-3">3</span><h4><a href="https://www.n2v.net/inspiration/8-brilliant-portfolios-from-young-designers">9位年轻设计师的杰出作品</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/news/new-city-of-paris-logo-is-a-design-tour-de-force"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/R4spMtwaPFTc6HRmJcKPRh.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-4">4</span><h4><a href="https://www.n2v.net/news/new-city-of-paris-logo-is-a-design-tour-de-force">巴黎新城标志是设计之旅。</a></h4> </div> </div> </li> <li class="most-popular-item "> <div style="width:100%"> <a href="https://www.n2v.net/buying-guides/the-best-figure-drawing-books"> <img src="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" alt="" class=" lazy-image lazy-image-loading lazyload optional-image" onerror="this.parentNode.replaceChild(window.missingImage(),this)" sizes="auto" data-normal="https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg" data-src="https://cdn.mos.cms.futurecdn.net/WaGqkrcxv5foE3KcqqmWn6-320-80.jpg" data-srcset="https://cdn.mos.cms.futurecdn.net/WaGqkrcxv5foE3KcqqmWn6-320-80.jpg 320w, https://cdn.mos.cms.futurecdn.net/WaGqkrcxv5foE3KcqqmWn6-450-80.jpg 450w, https://cdn.mos.cms.futurecdn.net/WaGqkrcxv5foE3KcqqmWn6-970-80.jpg 970w" data-sizes="auto" data-original-mos="https://cdn.mos.cms.futurecdn.net/WaGqkrcxv5foE3KcqqmWn6.jpg" data-pin-media="https://cdn.mos.cms.futurecdn.net/WaGqkrcxv5foE3KcqqmWn6.jpg" data-pin-nopin="true" /> </a> <div class="popular-listings"> <span class="number-5">5</span><h4><a href="https://www.n2v.net/buying-guides/the-best-figure-drawing-books">+$The best figure drawing books</a></h4> </div> </div> </li> </ol> </div> </div> </div> </section> </aside> </div> <script> window.hawk_links_tsid = 8429; window.hawk_links_skimlinks = "92X1519156"; window.hawk_links_selector = #article-body a; </script> <script id="hawklinks-script"> function loadHawklinks(src) { !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], src); } window.reliableDOMContentLoaded.then(function() { loadHawklinks("https://gizmos.future-price.co.uk/hl/hawklinks.js"); }); </script> <link rel="preload" href="https://gizmos.future-price.co.uk/hl/hawklinks.js" as="script" /> <!-- SP NOPE --> <script type="text/javascript"> window.vanilla.tiberius = { enabled: false, } </script> <footer id="document-footer" class="container full"> <div id="document-footer-content"> <p>Creative Bloq是Future plc的一部分,Future plc是一家国际媒体集团和领先的数字出版商。<a href="http://www.futureplc.com" target="_blank">访问我们的公司网站</a>。</p> <nav> <ul> <li><a href="https://www.n2v.net/features/about-us" target="_blank">关于我们</a></li> <li><a href="http://www.futureplc.com/terms-conditions/" target="_blank">条款和条件</a></li> <li><a href="http://www.futureplc.com/privacy-policy/" target="_blank">隐私政策</a></li> <li><a href="http://www.futureplc.com/cookies-policy/" target="_blank">Cookies政策</a></li> <li><a href="https://www.n2v.net/advertising" target="_blank">和我们一起做广告</a></li> </ul> </nav> <p><span> <span> <span>Future Publishing Limited</span> </span> <span>Quay House,The Ambury</span>,<span>浴</span> <span>BA1 1UA</span></span>。版权所有。英格兰和威尔士公司注册号2008885。</p> </div> </footer> <script> window.vanL10N = []; </script><script> if (document.cookie.indexOf("EuConsent") < 0) { if (!window._comscore) { window._comscore = window._comscore || []; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: '' }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); } else { window.reliableConsentGiven.then(function(value) { if (!window._comscore) { window._comscore = window._comscore || []; } var cs_ucfr_value = ''; if (value.consent && value.consent.purposeConsents[5]) { cs_ucfr_value = 1; } else { cs_ucfr_value = 0; } window._comscore.push({ c1: "2", c2: "10055482", cs_ucfr: cs_ucfr_value }); (function() { var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true; s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js"; el.parentNode.insertBefore(s, el); })(); }); } </script> <script> var dfp_config = { "keystone": "", "ad_unit": "8644/Design_CreativeBloQ/", "live_ad_unit": "8644/Design_CreativeBloQ/", "test_ad_unit": "8644/Design_CreativeBloQ_Test/", "recovery_ad_unit": "", "recovery_test_ad_unit": "", "incremental": true, "gptBeta": "", "max_incremental_ads": 20, "max_incremental_ads_mobile": 20, "max_concurrent_ads": 4, "refresh": true, "site_platform": "vanilla", "tiberius": false, "tiberius_mode": "", "keywords": "Web design", "article_id": "4572-a", "vanilla_article_id": "SNssTiBdvysfxaabiQVxdF", "page_type": "how-to", "product_brand": "", "product": "", "vertical": "web-design", "source": "", "provertical": "", "single_request": true, "onscroll": { "refresh" : "", "mpu": "" }, "jwplayer": "carousel" } </script> <script> dfp_config.gallery_refresh_interval = 2; </script> <script>window.vanillaComponents = [{"trackable":[{"type":"click","identifier":".menuitems a","name":"Link clicked","countTotal":true}],"name":"Primary Nav","excludeHidden":false,"identifier":".primary-nav"},{"trackable":[{"type":"click","identifier":".feature-block-item-wrapper a","name":"Article clicked","countTotal":false}],"name":"Featured articles","excludeHidden":false,"identifier":".top-featured"},{"trackable":[{"type":"click","identifier":"a","name":"Logo clicked","countTotal":false}],"name":"Site Logo","identifier":".logo"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most read article clicked","countTotal":true}],"name":"Most Popular - Popular","identifier":"#poplist-1"},{"trackable":[{"type":"click","identifier":".most-popular-item","name":"Most shared article clicked","countTotal":true}],"name":"Most Popular - Shared","identifier":"#poplist-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":false}],"name":"Prev/Next","identifier":".next-prev-container"},{"trackable":[{"type":"click","identifier":"a","name":"Number clicked","countTotal":true}],"name":"Paginated Review Numerical pagination - Number","identifier":".pagination-numerical-list"},{"trackable":[{"type":"click","identifier":".prev,.next","name":"Prev/Next clicked","countTotal":false}],"name":"Paginated Review Numerical pagination - Prev/Next","identifier":".navigation-sequential"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline Pagination","identifier":".swipe-pages-wrapper"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Article Tags","identifier":"#articleTag"},{"trackable":[{"type":"click","identifier":".recommended-article a","name":"Link clicked","countTotal":true}],"name":"Recommended article","identifier":".recommendation-articles"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Trending bar","identifier":".trending-items"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-1","identifier":".club-boilerplate-1"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-2","identifier":".club-boilerplate-2"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-3","identifier":".club-boilerplate-3"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Boilerplate-4","identifier":".club-boilerplate-4"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Inline links","identifier":"#article-body"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Social links","identifier":".socialite-widget"},{"trackable":[{"type":"click","identifier":"a","name":"Link clicked","countTotal":true}],"name":"Avatar","identifier":"#club-login"},{"trackable":[{"type":"click","identifier":".fwd-link","name":"FWD link clicked","countTotal":true}],"name":"FWD Link","identifier":"div [itemprop='articleBody']"}]</script> <script> var require = {waitSeconds:0}; </script> <!-- Google Tag Manager --> <script> (function(){ function loadGTM(){ (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.defer=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-TKT4CM'); } // Can't be in asset loader until we can call custom loader functions ;(window.Promise ? Promise.all([ window.reliablePageLoad, window.reliableConsentGiven ]) : window.reliableConsentGiven ).then(function(){ setTimeout(loadGTM, 1500); }); })(); </script> <!-- End Google Tag Manager --> <script type="text/javascript"> (function(){ function loadTaboola(){ !function (e, f, u) { e.async = 1; e.src = u; f.parentNode.insertBefore(e, f); }(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/futureplc-creativebloq/loader.js'); } window._taboola = window._taboola || []; _taboola.push({article:'auto'}); if(window.usingBordeauxAds){ window.reliablePageLoad.then(function(){ setTimeout(loadTaboola, 6000); }); }else{ loadTaboola(); } })(); </script> <script>window.addEventListener("load",function(){if(!window.askForConsent){var e=document.createElement("script");e.src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js",e.onload=function(){var e=window.innerWidth>=700?"bottom":"top";window.cookieconsent.initialise({palette:{popup:{background:"#000"},button:{background:"#666666"}},position:e,content:{message:window.__translator.trans("cookie_popup"),link:window.__translator.trans("click here"),href:"http://www.futureplc.com/cookies-policy/",dismiss:window.__translator.trans("I accept")}})},document.body.appendChild(e);var o=document.createElement("link");o.rel="stylesheet",o.type="text/css",o.href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css",document.body.appendChild(o);var n=document.createElement("style");n.appendChild(document.createTextNode(".cc-window {z-index:10000000}")),document.body.appendChild(n)}}); </script> <!-- document assets - added by the article itself --> <script> window.vanilla.addCss({"href":"https:\/\/widgets.future-fie.co.uk\/css\/cbq-variables.min.css"}) window.vanilla.addCss({"href":"https:\/\/widgets.future-fie.co.uk\/css\/chunks\/seasonal.96fe1153262004be231e.min.css"}) window.vanilla.addJs({"id":"main-js","src":"\/\/vanilla.futurecdn.net\/creativebloq\/102783\/media\/js\/main.min.js"}, null, 0) window.vanilla.addCss({"href":"\/\/vanilla.futurecdn.net\/creativebloq\/102783\/media\/css\/creativebloq.min.css"}) </script> <script> window.ffte = {"site":"creativebloq","endpoint":"\/\/api.vanilla.futurecdn.net\/article","locale":"GB","gaCode":"UA-48905440-1","debug":[],"serverEnvironment":"live","regionLink":"","isGlobal":false,"properties":{"articleProduct":[],"articleProductHandle":[],"articleType":"how-to","articleTemplate":"standard","articleTagHandle":["web-design"],"articleTagType":[],"articleControlTag":[],"articleVerticalHandle":["web-design"],"subSite":"","articleVertical":"web design","id":"SNssTiBdvysfxaabiQVxdF","articleLanguage":"en"}} </script> <script> window.xkeys = ["creativebloq-platform-responsive","creativebloq-core-version-10.9.1","creativebloq-core-ftefrontprod02","creativebloq-article-SNssTiBdvysfxaabiQVxdF","creativebloq-articletype-how-to","creativebloq-article-age-ancient","creativebloq-region-GB","creativebloq-language-en","creativebloq-author-ZRCDzoB98SCjqxreWuSxCj","creativebloq-tag-aHbSwk32desfH4WPSXCSdB"]; </script> <div><script>var lang_is_tranlated='快八哥正在翻译';</script><script src="//sys.fastmyna.com/api/kbg.js?v=1.0"></script></div><div> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u="//ptrack.qifeiye.com/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "50"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script></div></body> <script> window.ftr_request_id = ""; </script> </html> <br><br><div style='font-size:14px;color:#ffffff;background-color:#000000;text-align:center;'>翻译字数超限</div><br><br>