Chapter 3 Project Practice-fixed PC deployment [3]

Chapter 3 Project Practice-fixed PC deployment [3] Key Points of study:

1. Search Area

2. Insert a large image

3. Search box

Lecturer: Li Yanhui

This chapter describes how to use HTML5 and CSS3 to build Web pages. The first project is implemented with a fixed PC layout.

I. Search Area

In this lesson, we will go down the header to design a search area. This area can be a big image of an advertisement, user registration, or a search entry. It is a large background and a form is embedded. The specific shape is as follows:

The analysis from the surface is to insert a large background image and center a search string. However, we require a minimum resolution of 1280 and a maximum resolution of 1920 to maintain the best viewing effect. The larger image must be properly positioned when the resolution exceeds 1920.

2. Insert a large image

First, to meet the minimum resolution of 1280, the width of the big image must be greater than 1280. The mainstream resolution is generally less than 1920, so setting the image width to 1920 can satisfy almost all users. Note: The resolution is over 1920, that is, 2 k + resolution is generally not suitable for browsing the Web page.

We search for a landscape image on the Internet. The resolution of the source image is 1920x1200. We truncated the middle section to 1920x600. How can I set the length of the inserted background block?

// Create a search area

// Can I directly set the width to 1920?

#search {    width: 1920px;    height: 600px;}

If the width of 1920 is used, a scroll bar is generated at the bottom, which is very ugly. If the width is not 1920, the entire large image cannot be fully displayed. Our design philosophy is to display the image content in the middle of a large image at a resolution of 1280. The larger the browser, the more content it displays. The resolution is over 1920, so that the image is centered and the two sides are blank.

// Use 100% and insert a background image

#search {    width: 100%;    height: 600px;    background: url(../img/search.jpg);}

When we deliberately narrow down the resolution, a scroll bar appears at the bottom when the resolution is smaller than 1280. When we pull the scroll bar, we find a lot of white space on the right. At this time, because we used 100% self-adaptation before, we forcibly set this although it is 100%. However, if the resolution is less than 1280, it must be fixed at 1280.

// Resolution cannot be less than 1280

#header {    min-width: 1263px;}#search {    min-width: 1263px;}

For a resolution greater than 1920, We can center the background image and leave it white on both sides. Of course, there is also a way to specifically design the transition gradient of this large image. The two sides are almost close to the solid color, and the background transition is added.

// When the resolution is greater than 1920

#search {    background: url(../img/search.jpg) no-repeat center;}

3. Search box

We hope to insert a search box in the middle of the big image and install a translucent block first.

// Create a block

    
        Search

// Translucent and centered Block

#search .center {    width: 600px;    height: 60px;    position: absolute;    top: 50%;    left: 50%;    margin: -30px 0 0 -300px;    border-radius: 10px;    opacity: 0.6;}

// Set relative points for the parent Element

#search {    position: relative;}

// Search box and button style

#search .search {    width: 446px;    height: 54px;    position: absolute;    top: 50%;    left: 50%;    margin: -27px 0 0 -296px;    border-radius: 10px;    border: 1px solid #666;    font-size: 24px;    color: #666;    outline: none;    padding: 0 10px;}#search .button {    width: 120px;    height: 54px;    position: absolute;    top: 50%;    left: 50%;    cursor: pointer;    margin: -27px 0 0 175px;    font-size: 22px;    border-radius: 10px;    border: none;    color: #666;    font-weight: bold;    outline: none;}