preface

This article is the sixth in the CSS layout series. The previous articles briefly introduced the CSS box model, several layout models of CSS. In this article, I want to talk about how CSS and HTML can be used to convert a web page design into HTML and CSS resources that can actually be used in front-end engineering, or to reproduce an existing web page structure.

In the block diagram shown above, HTML5 + CSS3 is a BlackBox, and all we need to do is unpack the blackBox structure so that the input and output static web pages look exactly the same.

Step 1: design interface partition

To restore the page, the first thing to do is to take the design or HTML page partition. The method of partitioning is:

  1. To divide the page area, the general web page will have: title bar, navigation bar, home page, sidebar, footnote. The first step is to find all of these elements
  2. Analyze each element separately. What are the components of the element and what is its alignment

Take the nuggets front page as an example:The navigation bar and the title bar of the page are together, and the part after the navigation bar is the home page and the sidebar, with no footnotes. The result after rough partition is shown in the figure below:The next thing to do is determine how each element is laid out

  • Title bar/navigation bar: The navigation bar of this page is divided into two parts. If you click the top navigation bar TAB, you will find that the content of the second navigation bar changes according to the first navigation bar TAB. This indicates that there is an inclusion relationship between the two navigation bars. Each navigation bar is arranged in a single row, so it is adoptedflexLayouts can be easily implemented.
  • Main page: The main page is the list of articles, it contains two parts: hot/latest/hot three tags, the article brief information card. The label section is made up of three small labels in a row that can be usedflexLayout; The style of each brief card is the same, so the CSS style code only needs to make a small card. The small card of the article can be divided into two columns, the left column is the information of the article, and the right column is the cover of the article, which can be usedflexLayout. The information can be divided into four lines. The first line identifies the author of the article, the date of the article, and the tag of the article. The second line is the title of the article, the third line is the introduction of the article; The fourth line indicates the number of views, likes, and comments. For this part of the layout, you can use a streaming layout.
  • Sidebar: The sidebar has a lot of information, but it’s all in the form of little cards next to the main page. All you need to do is get everything done and put it over here in the document flow layout.

Step 2: HTML structure determination and page partitioning

After analyzing blueprints or the layout of an existing web page, you can build the HTML skeleton structure. Based on the results of the first step analysis, the structure of the HTML file is as follows:

<! DOCTYPEHTML>
<html>
    <head>
        <title>Gold digger front page reappears</title>
    </head>
    <body>
        <! -- Navigation bar -->
        <div class="nav-bar">
            <div>The Denver nuggets</div>
            <div>Home page</div>
            <div>The boiling point</div>
            <div>information</div>.</div>
        <div class="sub-nav-bar">
            <div>recommended</div>
            <div>Focus on</div>.</div>
        
        <! -- Home page container -->
        <div class="main-container">
        
            <! -- Home page -->
            <div class="main">
            
                <! -- Small TAB on the home page -->
                <div class="tags">
                    <div>hot</div>
                    <div>The latest</div>
                    <div>Hot list</div>
                </div>
                
                <! -- Container for article list -->
                <div class="article-container">
                    <div class="article-item">
                        <div class="aritcle-content> article-info">
                                <div>The author</div>
                                <div>time</div>
                                <div>The label</div>
                            </div>
                            <h2>The article title</h2>
                            <p>The article brief introduction</p>
                            <div class="article-count">
                                <div>browse</div>
                                <div>give a like</div>
                                <div>comments</div>
                            </div>
                        </div>
                        <div class="article-cover">
                            <img>
                        </div>
                    </div>
                </div>
            </div>
            
            <! -- Sidebar containers -->
            <div class="aside-container">
            </div>
        </div>
    </body>
</html>
Copy the code

Step 3: Choose the right layout model

The result of the second step is an ugly interface. As you can see in the image below, all the elements are crammed into small corners of the page. In this step, we need to add layout and style to the page based on the analysis results of the first step.My personal habit is to write the layout from the outside in first, that is, to build the outer frame, then fill in the elements, and adjust the background, borders, margins and other parameters. This is a physical work, can only write while seeing the effect. I’m just going to show you a few key pieces of code.

  1. The code for the article list card:
  • html
<div class="article-item">                        
    <div class="article-item-info">
        <div class="article-info-author">Tsubaki qiushui</div>
        <div class="article-info-date">2021-07-07</div>
        <div class="article-info-tags">Javascript · React · Front end</div>
    </div>
    <h2>React 1.</h2>
    <p>React provides you with an overview of how to install react, how to use scaffolding to create projects, and how to build front-end projects.</p>
    <div class="article-item-count">
        <div class="article-count-view">Browse: 324</div>
        <div class="article-count-agree">Thumb up: 6</div>
        <div class="article-count-comment">Comment on: 5</div>
    </div>
</div>
Copy the code
  • css
.article-item {
    width: 95%;
    border-bottom: 1px solid #ccc;
    margin: 10px;   
    padding: 10px;

    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.article-item h2 {
    color: var(--border-color);
}

.article-item-info {
    display: flex;
    color: #ccc;
    font-size: 16px;
}

.article-info-author..article-info-date {
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
}
.article-info-author {
    color: # 999;
}

.article-item-count {
    display: flex;
    column-gap: 20px;
    color: # 999;
}
Copy the code
  1. The navigation bar
  • html
<div class="blog-navbar-list">
    <div class="blog-navbar-item"><a href="#">homepage</a></div>
    <div class="blog-navbar-item"><a href="#">The front-end technology</a></div>
    <div class="blog-navbar-item"><a href="#">Life to share</a></div>
</div>
Copy the code
  • css
.blog-navbar-list {
    display: flex;
    width: 50%;
    height: calc(var(--navbar-height) - (var(--navbar-border-width))*2);
    align-items: center;
    column-gap: 5px;
    position: relative;
    padding-left: 5px;
}
.blog-navbar-item {
    width: 20%; 
    height: calc(var(--navbar-height) - (var(--navbar-border-width))*2);
    /* background-color: turquoise; * /
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-navbar-item a {
    text-shadow: 2px 2px 2px #aeaeae;
    text-decoration: none;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 5px;
    color: #fff;
    /* border: 1px solid #fff; * /
    font: var(--font);
    font-size: 20px;
}

.blog-navbar-list :target .blog-navbar-item a..blog-navbar-list .blog-navbar-item a:focus..blog-navbar-list .blog-navbar-item a:active {
    background-color: #fff;
    color: var(--border-color);
    box-shadow: 3px 3px 3px rgba(0.0.0.0.2);
    box-shadow: 0 0 2px  inset rgba(0.0.0.0.5);
    border-radius: 0 0 5px 5px ;
}
Copy the code
  1. Search box design
  • html
<div class="blog-navbar-search">
    <select style="border:none; outline:medium;" class="blog-navbar-search-select">
        <option>The label</option>
        <option>The title</option>
        <option>The author</option>
    </select>
    <input class="blog-navbar-search-input" style="border:none; outline:medium;" type="text" placeholder="Please enter search content">
    <a class="blog-navbar-search-submit" href="#">search</a>
</div>
Copy the code
  • css
/* Create a 3D search box */
.blog-navbar-search {
    position: absolute;
    display: flex;
    height: var(--navbar-item-height);
    width: 270px;
    top: 5px;
    right: 20%;
    border: 1px solid var(--border-color);
    border-radius: calc((var(--navbar-height) - 20px) /2);
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    background-color: #fff;
    box-shadow: 1px 1px #ccc inset, 1px 1px 1px #ccc;
    box-shadow: 0 0 3px rgba(0.0.0.0.5);
}

.blog-navbar-search-select {
    border: transparent;
    height: calc(var(--navbar-item-height) - 10px);
    width: 50px;
    color: # 666;
    font: var(--font);
    font-weight: normal;
    font-size: 12px;
}

.blog-navbar-search-input {
    border: transparent;
    height: calc(var(--navbar-item-height) - 10px);
    width: 50%;
    color: # 666;
    font: var(--font);
    font-weight: normal;
    font-size: 12px;
    margin-left: 15px;
    /* background-color: red; * /
    
}   
.blog-navbar-search-submit {
    border: transparent;
    height: calc(var(--navbar-item-height) - 10px);
    width: 50px;
    font: var(--font);
    font-size: 12px;
    font-weight: normal;
    background-color: #fff;
    color: # 666;
    text-decoration: none;
    text-align: center;
    margin-top: 3px;
    /* margin-left: 35px; * /
}

.blog-navbar-search-submit:active {
    color: #fff;
    text-shadow: rgba(0.0.0.1) 1px 1px 0.rgba(0.0.0.0.8) 2px 2px 0.rgba(0.0.0.0.25) 0 0 5px; 
    text-decoration: none;
}
Copy the code
  1. List tag design
  • html
<div class="article-list-title">
    <div><a href="#">hot</a></div>
    <div><a href="#">The latest</a></div>
    <div><a href="#">hot</a></div>
</div>
Copy the code
  • css
.article-list-title {
    display: flex;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    align-items: center;
}

.article-list-title div {
    height: 20px;
    display: flex;
    align-items: center;
}

.article-list-title div a {
    text-decoration: none;
    font-size: 18px;
    border-right: 1px solid #ccc;
    /* margin: 10px; * /
    color: #ccc;
    padding: 0 20px;
}
.article-list-title :target div a..article-list-title div a:active..article-list-title div a:focus {
    color: var(--border-color);
}
.article-list-title div:nth-last-child(1) {border: none;
}
Copy the code

The result after layout

In the end, I didn’t actually restore the HTML page, but implemented a new HTML page by referring to parts of the page. The results are shown below: