MAKE A WEBSITE-Organize your Page

Introduction

A web page is a collection of HTML elements. CSS can control the design of an element, like its color, font, and spacing.

CSS can also control where an element sits on a page to create a page layout.

For example, the layout to the right has a top navigation bar, a large feature element, a grid of images, and then three pieces of supporting content.

What CSS properties are available to move elements around and create page layouts? Here are three common CSS properties.

display

CSS treats HTML elements like boxes. A box can be "block" or "inline".

• Block elements display on a new line (e.g., h1, p,ul, li).
• Inline elements display on the same line as their neighboring elements (e.g., img, a)

It's possible to change whether a box is block or inline by using the display property.

Try it out

Change the display of the li elements from block to inline so that they display on the same line.

.nav li {
  display: inline; //可以讓字全部都出現在一行
}

position

The position property is used to move an HTML element to a precise position on the page.

By setting position: relative, you can use the CSS properties top, left, bottom, and right to shift an element away from where it would have normally appeared on the page.

Try it out

In the editor/html window, change top to 91px and left to 55px. This will shift the h1 element 91px away from the top and 55px away from the left of its original position on the page.

.jumbotron h1 {

  position: relative;

  top: 91px;

  left: 55px;

}

float

The float property moves an element to the far left or far right of the page.

For example, setting float: right pulls an element to the far right side of the page, and the surrounding text wraps around it.

Try it out

Inside the img selector, set float: right to pull the image to the far right side of the page. Then inside the.learn-more, set clear: both. The clear property turns off the float, so the "Learn More" section returns to its normal flow on the page.