The 31st part of the project combat-pc fixed-end layout [3]

Learning Essentials:

1. Search area

2. Insert a larger image

3. Search box

Keynote Teacher: Li Tinghui

This chapter begins with learning to build Web pages using HTML5 and CSS3, and the first project is implemented with a PC-side fixed layout.

A Search area

In this lesson, we then head down the header to design a search area. This area can be either a large ad map or a user registration or a search bar, which is a large background with a single form embedded in it. The concrete shape is as follows:

Analysis from the surface, is to insert a large background image, and then center a search bar. However, we require a minimum of 1280 resolution, maximum at 1920 resolution to maintain the best viewing effect. And for more than 1920 resolution to maintain a large map position is reasonable.

Two Insert Large image

First, in order to satisfy the minimum 1280 resolution, the width of the large image itself must be greater than 1280. The mainstream resolution is generally less than 1920, so the image width is set to 1920 to satisfy almost all users. Note: More than 1920 resolution, that is, 2k+ more than the resolution is generally not suitable for browsing the web, will blind.

We search the web for a view, the resolution of the original image is: 1200 x. We intercept the middle section and turn it into: 1920x1080 x 600. So what should I do to set the length of the inserted background block?

Create a search area

<id= "Search"></div>

Can I set the width to 1920 directly?

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

If you use the width of 1920, it is bound to produce a scroll bar at the bottom, very ugly. That does not take the width of 1920, the whole large picture can not be fully displayed. Our design philosophy is that the 1280 resolution shows the image content of the central region of the large image, and the larger the browser, the more content is displayed. More than 1920 resolution, let the picture center, both sides blank.

Use 100% and insert a background picture

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

When we deliberately reduce the resolution, when less than 1280, scroll bars appear at the bottom. When we pull the scrollbar, we find a large amount of whitespace appearing on the right. At this time due to the previous adoption of 100% Adaptive, then we force set here although it is 100%. However, if the resolution is less than 1280, it must be fixed at 1280.

cannot be less than 1280 resolution

{    min-width: 1263px;}  {    min-width: 1263px;}

For resolutions greater than 1920, we will display the background image in the center, leaving both sides white. Of course, there is also a way to specifically design this large image of the transition gradient, on both sides near the solid color is to add background transitions.

When the resolution is greater than 1920

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

Three Search box

We want to have a search box in the middle of the big picture and a translucent chunk first.

Create a chunk

<DivID= "Search">    <Divclass= "Center"></Div>    <inputtype= "text"class= "Search"placeholder= "Please enter a tourist attraction or city">    <Buttonclass= "button">Search</Button></Div>

Translucent and centered chunks

{    width: 600px;     height: 60px;     position: absolute;     top: 50%;     Left: 50%;     margin: -30px 0 0-300px;     Border-radius: 10px;     opacity: 0.6;}

Parent element Set Relative point

{    position: relative;}

Search box and Button styles

#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;}

The 31st part of the project combat-pc fixed-end layout [3]