HTML5 + CSS3 static page project-Summary of PayPaul, css3-paypaul

HTML5 + CSS3 static page project-Summary of PayPaul, css3-paypaul

I have been studying the front-end for some time and have been reading theoretical knowledge, but there are few practical projects. Brother-in-law often said that the best way to know how much your own strength is and how much your knowledge has been mastered is to practice and practice it. So I decided to improve the Code level through project practice and theoretical knowledge assistance during this holiday. The first step is to do some exercises on HTML5 + CSS3 static page layout, check for missing knowledge points, and summarize some errors encountered in the practice process. The design draft of the page is mainly obtained on the Internet, and also tries to cut the graph, measure the position, and obtain the attributes of the content, and pretend that you are actually completing a project.

The first page was obtained from the platform of design talents. The page design of this platform is also recommended for foreign design and some Webpage Design Tutorials, the recommendation pages are concise and generous. Compared to the pages with Chinese characteristics, I also appreciate foreign designs.

The design diagram is as follows:

The page width on the design draft is 1550 pixels, and the page subject is a 12-column grid layout of 960 pixels. The overall width of the design is far greater than the browser's width. Therefore, when I was designing a static page, I did not use a responsive design, set all width and height to the static size in pixels. You can use the div element to set the width to 960px and set the margin attribute to 0px auto to center the main content of the page in the browser window without worrying about the total width of the page.

My original restore image is: when I see the design psd, my idea is roughly like this. First, it contains the navigation bar headers with two navigation items, the input bar, And the Logo image; the next step is a Website banner, which includes a large title, a paragraph, and two button-like connections. The next step is the main content of the webpage, it contains three modules with the same layout, including pictures, titles, paragraphs, and links, and a navigation link at the bottom. Finally, it is the footer, contains a navigation link and two text paragraphs.

Based on this idea, I also began to build a page framework, which consists of four parts: header, section, main, and footer. According to the content in each part, the required labels are also written, and the class attribute is added as needed. Then, the page content is completed at each part and the style is added using CSS3. The following describes in detail.

I. Header section

The above is the header completion diagram. First, divide the two navigation into two parts. The first line is to use the nav label to insert a link and two input boxes. The input box is processed using border-radius, it turns into a rounded corner frame, but unfortunately it is not particularly smooth because of the appearance of sertices. The vertical lines on both sides of the link are colored borders. The navigation of the next line uses an unordered list and sets the float attribute to left to float to the left. The Logo image is the result of cutting the design diagram. The downside is that there is a triangle in the video after the link as a secondary link. (Xinxu), So no. The detailed HTML code is as follows:

One problem is that the picture and unordered list are displayed in two rows in the browser. After finding the information, the div element contains the unordered list, the value of margin and padding makes the two elements in the same row. The unordered list indicates that the CSS code of the link is as follows:
.headnav {    width: 280px;    padding-left: 170px;    margin-top: -70px;}.headerlimit ul {    list-style-type: none;    padding-left: 0px;}.headerlimit li a{    text-decoration: none;    border-left: 1px solid #fff;    border-right: 1px solid #ebebeb;    width: 90px;    text-align: center;    line-height: 25px;    color: #68676a;    float: left;    font-family: PTSans;    font-size: 14px;}
Ii. Banner part
The big image of the background is implemented by using background-img, and the position method is used in the settings of this banner part to locate all text content modules relative to the background module, in this way, the two modules can keep their positions unchanged and different positions when narrowing down the view. The position attribute value is also very important in CSS. The absolute positioning CSS code of the HTML code and the two modules is as follows:
<section class="banner">    <div class="backimg">        <div class="bannercontent">             <div class="bannerintr">                 
.bannercontent {    width: 960px;    margin: 0px auto;    position: absolute;    left: 10px;    top: 25px;}.backimg {    width: 1055px;    height: 415px;    margin-left: 195px;    background-image: url(../images/banner.png);    position: relative;}
Iii. Main

Because the layout of the three modules is the same, you only need to use the same class attribute to ensure that the style is the same. The processing of images and text is relatively simple, and there is no special need to point out, so the code is also omitted.
Iv. Footer

In the footer part, the navigation bar also uses the unordered list. Note that the unordered list is set to float to the left, therefore, it will affect the display of the following two paragraphs in the browser. You need to use clear: both; to clear the floating of the two paragraphs so that the two paragraphs are below the navigation bar. Part of the CSS code that issues occur and clears float is as follows:
.footernav li a{    color: #fff;    font-size: 12px;    margin-right: 15px;    margin-top: 35px;    float: left;}.footercontent {    width: 960px;    margin: 0px auto;    padding: 25px 0px;    clear: both;}

Of course, some problems may occur when we implement this static page based on the design draft, for example, it is very troublesome to know the size of each element, the spacing between elements, and the font size and color attributes.(Tucao). Of course, the real problem is not this, but something that you think should be like. The result will be displayed in a browser, which is the root cause of headache. Therefore, some problems are recorded in the implementation process, and the reasons and solutions are found.
1. When the text and image appear in the same line or div element, the browser runs on different lines.
After querying the information, three solutions are provided:
① In CSS, set the vertical-align: middle; attribute for the div. This div contains images and text so that the elements in the div can be vertically centered and aligned.
② When the image is a background image, use background-img to set the image and modify the text padding in the same line.
③ Place the image and text in two divs and set the margin value. I am using this method, which is more difficult than the first method.
2. line elements do not support the value of the margin and padding attributes in the upper and lower directions. line-height is required for modification.
3. elements often have some extra margins inexplicably, which is actually the default effect of the browser. You need to manually clear these effects before setting the CSS style. If the unordered list ul contains excessive left margin.


SummaryA long time ago, I used to imitate Microsoft's project in China. At that time, I used my spare time to complete the project. I didn't have an overall view of the structure and layout, and it would take a lot of effort to complete it. This is not so difficult to do in the past two days. I thought that I had no code practice for a long time and would be unfamiliar with it. But in fact, I still have some knowledge points and I still do not have any knowledge points, in practice, we have been searching for materials and applying methods to instances, which can improve the understanding and memory of knowledge points. Although the level is still not very high, I am very happy that I have been making progress and continue to work hard, that is very good. Next, I will continue to implement multiple exercises on the Static Page. After being proficient, I will start to practice the dynamic page of JavaScript, which is always the place of my procrastination, dare not try! Continue to keep up with everyone! The complete project, including the design drawing psd, HTML code, and CSS code, is put on github. I hope you can point out my shortcomings if you are interested or have a strong idea, hope to communicate with you and make progress together!
All file addresses:
Https://github.com/omocc/PracticeItem/tree/master/6.23%E5% AE %9E%E6%88%98%E7%BB%83%E4%B9%A0-1
Webpage viewing address:
Http://htmlpreview.github.io /? Https://github.com/omocc/PracticeItem/blob/master/6.23%E5% AE %9E%E6%88%98%E7%BB%83%E4%B9%A0-1/index.html