Summary of HTML5+CSS3 static page project-businesstheme

Because of the final exam, adjust the mentality, and so on for various reasons, distance from the last project practice has been a long time, and today finally there are times to continue to practice HTML5+CSS3 page architecture and design manuscript restoration. The design diagram is very long, the whole page is divided into several areas, so it does not put the complete design drawings, the specific design documents can be downloaded at the end of the GitHub address. The first summary is based on my understanding of the page architecture, in accordance with the code implementation sequence to explain, then this time in accordance with the problems summarized record it. Welcome everyone to read my work and summarize, put forward valuable suggestions! Thank you!

　　After the last practiced hand, this time the practiced hand more calmly, not only to check the gaps, but also to solve the problem at the same time, so that the code can be more concise. But there are some small flaws, such as each module in the page each title is actually the same size and color, part of the title according to the background color changes, you can initially set the overall color and font size, so when encountering special circumstances and then make changes. But because of the last lazy, this part of the setup is repeated many times in each module. There are also pages of the font is not imported, so it does not seem to involve the draft so perfect. Also a little doubt is that because it is a static page, so all the dimensions are fixed values, when the page is scaled, there will be some bad phenomenon, and set the absolute positioning, it is not possible to implement the response at the same time. So in the actual production of products, it should be very unfriendly to everyone? The next piece of work should be considered carefully. Finally, there are a lot of places on the page where JavaScript can be used, but now it's not fine, and there's no courage to try. ), all are not well designed, but can be implemented with CSS, or implemented.

here is a summary of some of the problems I have encountered in the implementation process.

Problem one: It's always crazy to encounter inline elements and block-level elements that need to be displayed on the same line.

This issue was also encountered in the last work, referring to several solutions, for some problems, some solutions can be solved, while others have little effect. The following is based on my implementation of the page process encountered problems, and then to say my solution.

Scenario One: The magical vertical-align

In this page, the red bezel is a text input box of a form, consisting of multiple Div's, with the IMG image and input box included in the Div. The picture and the input box will have the dislocation problem, I use the picture style to set the "Vertical-align:middle;" method, you can easily solve the problem. (Note: When searching for a solution on the Internet, the answer mentions that the style line-height of input is set to the same height as the div, but I try to find that it didn't work.) It was only later that the Vertical-align Setup was successful. ）

The code is as follows:

{    vertical-align: Middle;}  {    font-size: 13px;     Width: 200px;}

Similarly, the following is a picture + text combination, is also set "Vertical-align:middle;"

Scenario two: Using margin.

The combination is a picture + multiple paragraph text, this time to try to find vertical-align later, or not normal display, this time can only choose the method of using margin. Set the IMG style to "float:left;", wrap the text with a Div, and set the left margin.

The code is as follows:

{    float: left;}  {    margin-left: 80px;}

The following two graphs are the same example:

Scenario Three: is the picture as a div background image, and then modify the text properties can be.

The plan depends on whether the picture is suitable for the background picture. This method is not used in this project.

Additional scenario four: actually not the picture and the text situation, but the simple text in the div horizontal center and the vertical center.

You can use the Text-align:center; To set the horizontal center and set the line-height of the text to the same height as the div to set the vertical center.

The code is as follows:

{    height: 45px;     background-color: #709dca;     text-align: center;}  {    line-height: 45px;     Color: #fff;     font-size: 13px;}

As the effect:

Question two: Cancels the default style of the element, respectively, the default padding for the Inline-block element, and the default style of the INPUT element.

First, cancel the default margins for inline, inline-block elements

Each time you set the margin of the a element in accordance with the design, it is found that no matter how the settings will be a little more default margin, and the reason for this problem is the space between the label segments, remove the space in the HTML.

Scenario One: Remove the HTML space.

<Div>     <a>     ...</a><a>     ...</a><a>     ...</a></Div>or:<Div>     <a>...</a><a>...</a>><a>...</a></Div>

Scenario Two: Add an HTML comment.

<Div>     <a>...</a><!--      -<a>...</a><!--      -<a>...</a></Div>

Scenario Three: Indent with margin negative (not recommended)

Scenario Four: Close the last label without using a closed label .

< Div > < a > ... < a > ... < a >... </ a >

Programme V: Use of "font-size:0px;"

. Space {     font-size:0px;}.space a {     font-size:12px;}

Scenario Six: Use Letter-spacing or word-spacing.

. Space {     letter-spacing:-3px;}.space a {     letter-spacing:0px;} or. space {     Word-spacing:-6px;}.space a {     word-spacing:0px;}

Finally, it's embarrassing to know that none of the above methods can be successful. Finally, there is no space left in the HTML code for element A. Of course, in the actual production, the code is compressed, there is no space, then it does not affect the setting of the margin. as I set it in the project:

<nav>     <ahref="#">Home</a><ahref= "#Service">Service</a><ahref= "#About">AboutUs</a><ahref= "#Price">Pricingtable</a><ahref= "#How">Howitwork</a><ahref= "#Client">Happyclients</a><ahref= "#Contact">ContactUs</a></nav>

Second, the default style of the input element is canceled.

In chrome, the INPUT element automatically displays a blue outer border when it comes with a click. Canceling this effect requires only setting border and outline to none.

Question three: Three questions about the a element, including the background color around the link, the top margin of a, and the four pseudo-classes of the A element.

First, add a background color around the link

As shown in the effect:

When I was doing it, I was thinking about using a button that set the background color, but just set the Padding property and background color of the A element. The code is as follows:

. price_box a {    color: #fff;    font-size:14px;    Display:inline-block;    margin-top:35px;    padding:20px;    Background-color: #ffbb42;    border-radius:2px;}

Second, set the top margin of the A element.

Elements such as a, span, and so on cannot be set on the bottom margin, as long as the style "display:inline-block;" can be set. From the previous example you can see by setting the display to set the Margin-top.

Three, set a element of four pseudo-class: A:link, a:visited, A:hover, a:active.

By setting the four pseudo-classes of element A, you can change the effect of the mouse and a elements, such as the navigation bar, the mouse changes background color and so on.

The following (when the mouse is hidden):

The code is as follows:

{    color: #fff;        background-color: #ffbb42;     Border-radius: 2px;}

Question four: adjust the word spacing.

Because the fonts in the design are not used, and the word spacing of the original font is not appropriate, you need to adjust the word spacing.

You can use letter-spacing or word-spacing to adjust word spacing.

Question five: The attribute settings for the HR element.

The horizontal line in the figure is implemented using

{    width: 330px;     height: 1px;     Border: none;     background-color: #e2e9f0;}

Question six: Only the elements of the singular sequence are selected.

Elements that often have different columns or rows in a text or chunk require different settings, so you need to use a CSS selector, and Nth-child (n) can select an element based on the value of N to apply the style.

As shown in the following:

You can see the width of the two input boxes in the red box is not the same, this time you can use Nth-child to set different widths, the code is as follows:

{    width: 305px;}  {    width: 385px;}

A detailed explanation can be viewed: http://www.w3school.com.cn/cssref/selector_nth-child.asp

The problem that arises in the practice is probably these, often thought to have read the book, can certainly use up. In fact, it is not the case, in the face of the problem, very large probability is not reflected, often search the method later, will realize, ah, the original can do this, originally there is this method, the original because of a knowledge point of the reasons, or need through practice to know their ability to how much, To accumulate more experience in problem solving. Do the second (actually the third) project, know that they have a long way to go, a lot of knowledge to learn, a lot of operations to practice. Before doing the project, often add a style will be refreshed, see the effect. Now can be written to think of the style, and then to solve the problem, the efficiency has improved a lot, probably because the practice is more, experienced, also know that the normal operation will not go wrong, confidence has also increased!

But still can be found in practice a lot of shortcomings, should be more bigger picture some, the general style should be in advance to think well, set up, reduce the redundancy of the code. You should use more code to solve than to rely on pictures, improve the user's download efficiency. You should start using JavaScript for dynamic effects, but because of the lack of confidence, procrastination, the pace has been stagnant. Should solve procrastination, simple page can be completed one day, improve the efficiency of the work ... Used to do not practice reading, now in practice but not reading, not good.

So, the short-term goal is to start practicing JavaScript's small project and start learning jquery carefully, to refuel quickly!

all file Address: https://github.com/omocc/PracticeItem/tree/master/7.5%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-2

website View Address: http://htmlpreview.github.io/?https://github.com/omocc/PracticeItem/blob/master/7.5%E5%AE%9E%E6%88%98% E7%bb%83%e4%b9%a0-2/index.html

Summary of HTML5+CSS3 static page project-businesstheme