1. Overall structure analysis

First, the header is a large box, which is the same as the layout Center (so just add the class of the layout center directly). Then the header can be divided into four areas: the logo box on the left, the search box and hot word box in the middle, and the shopping cart box on the right.

<!-- header Head module-->
    <div class="header w">

The location of the four boxes requires positioning

2. Left logo production

(1) Logo production shall comply with LOGO SEO Optimization:

1. First put an h1 tag in the logo to raise the right and tell the search engine that this place is very important.

2. Put another link in H1 that can return to the home page, and give the background picture of the logo to the link (that is, convert a into a block element)

3. In order to include us in the search engine, we should put text (website name) in the link, but the text should not be displayed:

The first method: text indent: - 9999px; Then overflow:hidden

The second method: directly to font size: 0; So you can't see the text.

4. Finally, give the link a title attribute so that you can see the prompt text when you place the mouse over the link.

<!-- logo modular -->
    <div class="logo">
        <h1>
            <a href="index.html" title="Pinyougou mall">Pinyougou mall</a>
        </h1>
    </div>

(2) About the location of the logo:

To use the positioning method of the child's absolute parent phase, measure the width and height. Top is the distance from the top of the box

/* header Head making */
.header {
    position: relative;/*Son Jue father phase*/
    height: 105px;
    /* background-color: pink;   Background color for accessibility*/
}

.logo {
    position: absolute;
    top: 25px;
    width: 171px;
    height: 61px;
    /* background-color: skyblue; */
}

(3) Handling of a in the logo:

Note that the width of a needs to be changed according to the size of the background picture (or adjust the size of the background picture)

.logo a {
    display: block;  /*Convert to block level elements, otherwise you can't adjust the length and width or add background pictures*/
    width: 175px;
    height: 61px;
    background-image: url(../images/logo.png);
    background-repeat: no-repeat;
    font-size: 0;
}

3. Production of middle search box

(1) Structural analysis

The search box is a big box. There are two small boxes in the big box. On the left is the search box and on the right is the button box

The < input > and < button > tags are used, and the placeholder attribute is used to initialize the text in the search box

<!-- search Search module -->
    <div class="search">
        <input type="search" placeholder="Language development">
        <button>search</button>
    </div>

Position the search box with positioning and add a red border

.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;
}

(2) left search bar production

.search input {
    float: left;
    width: 455px;
    height: 36px;
    padding-left: 10px;
}

Since both input and button are block level elements, they cannot appear on the same line. So add a float to both

Padding left is to leave a little space between the box and the left side of the large box, so as to make the words "language development" more beautiful

Consistent height

(3) Right button making

.search button {
    float: left;
    width: 83px;
    height: 36px;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
}

Font size is used to adjust the font size. Color is the font color and background color is the background color. Also use left float

(4) Initialization of search boxes and buttons

Because the search box and button have their own borders, and the search box will change to a blue border during search, it is necessary to search in base Remove from CSS

button,
input {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* Remove the default border and the border after clicking */
    border: 0;
    outline: none;
}

4. Production of intermediate hot words module

It's the same idea as making a quick navigation bar: use li to include a

<!-- hotwords Module making -->
    <div class="hotwords">
        <ul>
            <li><a href="#" class="style_ Red "> preferential purchase</a></li>
            <li><a href="#"> preferential purchase</a></li>
            <li><a href="#"> RMB 100 million discount</a></li>
            <li><a href="#"> 9.9 yuan group purchase</a></li>
            <li><a href="#"> minus 30 for every 99</a></li>
            <li><a href="#"> office supplies</a></li>
            <li><a href="#"> Computer</a></li>
            <li><a href="#"> communication</a></li>
        </ul>
    </div>

If the font color is red, you can add the "style_red" class name.

Then locate the hot words under the search box

.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}

Because li is a block level element, to make all elements arranged on one line, you need to use floating, and then make the interval with margin

.hotwords ul li {
    float: left;
    margin: 0 10px;
}

5.shopcar module fabrication

(1) Structural analysis

The whole is a box, which is positioned to the right. Put the text in the middle. Then there is a shopping cart on the left and a right arrow on the right - use font icons. The upper right corner is a small box, which can be represented by < I > and made with the negative value of positioning

(2) Integral box

<div class="shopcar">
        <span class="iconfont gouwuche">&#xf0179;</span>My shopping cart<span class="iconfont youjiantou">&#xe603;</span>
        <i class="count">8</i>
    </div>

.shopcar {
    position: absolute;
    right: 60px;
    top: 25px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    /* Center text vertically */
    text-align: center;
    /* Center text horizontally */
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}

The more important thing is to keep the text in the center: 1 line-height=height;   2.text-align:center;

(3) Handling of font icons

.shopcar .gouwuche {
    position: absolute;
    left: 23px;
    color: red;
    font-size: 15px;
}

.shopcar .youjiantou {
    position: absolute;
    right: 15px;
}

There are two points to pay attention to: 1 How to adjust the position of Font Icon: because the parent element of < span > is absolutely positioned, the method of child absolute parent phase cannot be used. However, the font icon can still be set to absolute positioning. At this time, it is the child Jue and the parent Jue, and the child elements are still positioned according to the position of the parent element.     2. Font icons are fonts, so you can use font size and color to adjust the properties of font icons.

(4) The top right corner prompts the creation of count statistics module

.count {
    position: absolute;
    top: -5px;
    right: 20px;
    left: 105px;
    /* When printing text, the text field moves to the right */
    /* height: 14px; */
    /* When printing text, the question field moves to the left */
    line-height: 14px;
    /* Change the position of the text */
    color: #fff;
    background-color: #e60012;
    padding: 0px 5px;
    /* Hold up the box */
    border-radius: 7px 7px 7px 0;
    /* One side is a right angle and the rest is an arc */
}

Points to note:

                        1. Like < span >, the count module also uses the method of child and parent to adjust the position.

                         2. When top is negative, you can make the position of the element leave the big box.

                         3. You can use padding to enlarge the box (provided that it will not encounter the boundary of other boxes, otherwise CSS3 will adjust automatically)

                          4. The difference between left and right: if you adjust the position with left, the box will be enlarged to the right (if the text is too long), while if you adjust with right, it will be enlarged to the left.

                           5. One side is a right angle, and the rest is the production of Arc: use border radius, start from the upper left corner and end at the lower left corner, clockwise.