Simple static pages to build --- with html + css

Foreword

Speaking before the html and css knowledge, but also that it is time to have come up with some simple static pages. This is a major addition to sharing how to build a blog, more to want to share some small details need to pay attention as well as some practical tips.

text

1. Let's look at the results

I uploaded this resource Well, this is a link
inside jquery relevant page style to achieve all together inside

2. The basic steps to build static pages

1. Be able to find a reference page template, collect material needed
2. Consider planned partition layout
3. First make an outline of the various parts of the general framework html, css styles go write (to write the kind of take a little bit of)
4. The frequently used css styles stored separately, to facilitate the introduction of other html
5. + Patient care

3. some tips and precautions

1. talk about writing html in jetbrains series software, css operations

Whether or pycharm IDEA or webstorm ......, write all times will use the TAB key, this is really a very easy way.
such as

<div id="div1"></div>

We only need to enter div # div1 then press the TAB key on the line, just before speaking as css, class to use .. Of course, more convenient time to write css

height:20px;

We only need to enter h20 and then press the TAB key on the line, more of their own to try to know it.
Create a list: ul> li * and the n-TAB, n is the number of a list of needed
when you want to copy repeat with ctrl + d

2. The common css styles

1. When we need to block elements of the same line of the display, typically it is used, but this time the height of the parent element to have ten million, or write on the overflow: hidden;
2. Learn how to use the margin and padding to adjust the position of
3. margin: 0 auto; block element centered horizontally, this must remember Ha ha ha
4. : First-child,: last-child,: nth-child (xn) is used, these are typically used to select a list of several separately provided do li,: nth-child (xn), x is a number, n-will know the end of the list in ascending order, such as 3n is 3,6,9 ......
5. Breadcrumbs, following FIG.
   
   

3. Notes and material

Sometimes we do not repeat create the wheel can borrow some online material, such as

that went online Direct download jquery moved in.

Caveats: if you find where to write and you think the effect is not the same, or where suddenly disappeared, is not a good look at where px did not add! ! ! The beginning is the most prone to error; then css is divided attention, the commonly used styles together, more than one page style involved together, so can many times use less write a lot of code

end

Related files I have uploaded, and is being reviewed, a few days I put links to resources Tieshanglai. Write this site probably spent more than four hours, to just beginning to learn html and css should be very helpful. Because there is something inferior, so this blog is relatively lean.