website development html css


The author has something to say:This article is the author's own learning summary,For reference,For the shortcomings, please forgive and correct~

Basic after learningHTML+CSSAfter label,You can try to write some simple static web pages~The process of practice is full of sense of accomplishment,It is worthy of repeated experience and thinking!

Web structure

(website development html css)Simply mention the labels that are often used to represent web institutions:

header The title of the entire page(You can also represent a content block)

main Page main part

footer Foot note on the entire page(You can also represent a content block)

article An independent content that has nothing to do with context

section Express a content block,Often normarticlemiddle

aside existarticleAuxiliary information related to its content

nav Navigation bar in the page

figure Express a section of independent stream content

website development html css

(website development html css)Basic website structure

Three -column layout

One webpageheader、main、footerThree parts composition,So start from the three -column layout。Whether-middle-The lower structure is still left-middle-Right structure,The key is to set the width or location of the middle part。We know the main content of the webpage(Edition)It is in the median、Acting with the webpage。That left and right(Up and down)After the two columns are fixed,The middle part must be adapted。The following summarizes several three -column layout method,Left-middle-Right structure as an example:

Write the three boxes of the left, middle and right first。

website development html css



website development html css

(website development html css)usefloatMake the left and right away from the documentation

have to be aware of is,usefloatThe method needs to bebodyPart of the changecenterBox position,BundlecenterThe box is placed inrightAfter the box(otherwiserightThe box will run to the right side of the next line)。In the above code,set upcenterThe left and right side distance of the box can be used to adapt to the width,Ruo Father's BoxlayoutNo height requirements,Availablemin-heightImplement high adaptation。You can adapt without height,No settingscenterWhen the height of the box height, it will automatically increase with the expansion of the text content。


website development html css

(website development html css)Use absolute positioning to break away from the document flow

All three boxes use absolute positioning,left、rightThe left and right end of the window are0,centerThe distance from the left end of the window isleftBox width,The distance from the right end of the window isrightBox width。

(website development html css)3.useflex

website development html css

(website development html css)Use elastic boxes inherent attributes

Give your father's boxlayoutAdd elastic box attributes,givecenterBox settings are greater than0offlexvalue,Use the elastic box automatic stretching effect to achievecenterBox width adaptation。

(website development html css)4.usetable

website development html css

Set to table

(website development html css)BoxlayoutSet astable,The width is the entire window,Set all three sub -boxes totable-cell,At this time, the three boxes have the attributes of the table。fixedleft、rightBox width,centerBox automatic occupation of the father's box remaining width。have to be aware of is,Because the parent box has table attributes,whenleft、center、rightWhen the three of the three are at any box, the height of the box is highly changed,The other two boxes will change。


website development html css

Set as grid

(website development html css)Father's boxlayoutSet asgrid,The width is the entire window,usetemplate-rowsSet up height,usetemplate-columnsSet the width of three boxes separately,inautoaccomplishcenterBox width adaptation。have to be aware of is,Heretemplate-rowsSet a fixed height,thereforecenterThe height of the height will not adapt。

Imitation exercise

(website development html css)There are many web pages suitable for beginners,You can open the website of the website to go inside and pick it up,Website based on static pages。The author himself uses Douban Homepage(Partial)Practice。During the practice,Never look at the source code of the website(At this moment you have a lot of places to understand),Try to analyze and think yourself first,Take a look at the knowledge learned from the matter。

(website development html css)website development html css

The author's imitation when learning

(website development html css)Put on a comparison chart,There are still many different places,There is no function of the webpage,As beginner, this is normal。The main purpose of static webpage exercises is to be familiar withHTML+CSSlayout,Cultivate the thinking of doing web pages。Specific details follow the deepening of learning,You can restore the webpage、Page is more exquisite,The webpage function can also be gradually improved,Realize the real website development。