This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

rainy day , Labels and CSS The layout is better together ~

​

CSS Basics

Box model

First, let's talk about the layout , I have to mention the box model , As the name suggests, the box is the container where we put things , As we see in our lives , such as 618 To the express box , Or the cosmetics storage box of Haitao

​

These can be understood as boxes , So what I learned earlier HTML The elements of are actually small boxes , Then the content in the element is the content stored in our box

​

Sort out the relationship between the boxes , Then it can correspond to CSS Style , There are three in total ,border Box border ,padding Infill , margin Margin , So we can see from the above figure , Does the box have four directions up, down, left and right , How is it written in the code

Frame

border It is divided into border-top / border-left / border-right / border-bottom The abbreviation is border It means up, down, left and right , There is a direction , Then there are also thick and thin colors  

border-width Border thickness  

border-style   Border style

dotted Define dot border . Present as solid lines in most browsers .dashed Define dotted line . Present as solid lines in most browsers .solid Define solid line .double Define double line . The width of the double line is equal to border- width Value .

border-color Border color

The short version is ：border ：1px solid red ;

Infill

It refers to the distance between the element content and the border , Just like the filler in the cosmetic box , Obviously, the filler also takes up a place

padding:10px When you write a value, it's up, right, down, left , Note that the order is not up, down, left and right

padding:10px 20px The first value represents up and down   The second value represents left and right

padding:10px 20px 30px The first value represents the upper The second represents left and right The third represents

padding:10px 20px 30px 40px The order is top right bottom left The same direct padding equally

Margin

It refers to the direct distance between elements , Is the distance between the box and the box

margin:10px When you write a value, it's up, right, down, left , Order of attention

margin: 10px 20px The first value represents up and down , The second value represents left and right

margin:10px 20px 30px The first value represents the upper The second represents left and right The third represents

margin:10px 20px 30px 40px The order is top right bottom left Same as the first effect

Tips ： You can use it later padding The effects are achieved with padding

There's a hole here --->

The outer margin and ： The outer margin combination refers to , When two vertical margins meet , They will form an outer margin .
The height of the combined outer margin is equal to the greater of the height of the two merged outer margins .

​

Or when one element is wrapped in another , When they don't border perhaps padding Separate the outer margins , Will join together and become conjoined babies , The separation method is to add border or padding

​

And that is , Only the vertical outer margins of block level elements in the normal document stream will merge . The outer margins between floating or absolute positioning are not merged . In line elements are not merged vertically with the outer margin , Why? ? Because the outer margin of the in-line element （margin） And fill in （padding） Up and down （top/bottom） Don't take effect , Only left and right （left/right） take effect . So Pay attention to this pit in future layout , And know how to fill this hole

Element type

Our elements can be divided into ： Block-level elements 、 Line level elements 、 Inline block element

Common blocky elements are ：

 <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
 Copy code 

Common inline elements are ：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
 Copy code 

The commonly used inline block elements are ：

 <img>、<input>
 Copy code 

Characteristics of block level elements ：

1. Own a line
2. Width and height can be set You can set top/bottom distance
3. If the width is not set , So he's directly 100%

Characteristics of row level elements ：

1. On a line with other elements

2. Width and height cannot be set You can set top/bottom distance 3. The width depends on the content

Characteristics of block elements in the line ：

1. On a line with other elements
2. Width and height can be set You can set top/bottom distance

Conversion of element types

adopt display You can convert the types of elements , The following table is display Optional value

​

Although there are many values in the table ,but We only use four ：

none Element does not show   /  block Display as block level elements   /  inline Display as row level elements   /   inline-block Inline block element

float

No web page is displayed so normally , If so, how ugly , Floating words also occupy a very important position in the web page layout , The floating property is float The only options are left/right Float left or right , After adding floats to elements , The element will leave the current document stream , Breaking away from the current document stream means that it does not occupy a position , Then the elements at the bottom will come up , Think about you going to the library , If the table is overhead , Do you think no one will sit over , So it's normal for the elements at the bottom to go up .

In web layout , Floating is important , Most of the problems with web layout are , Why not go up , Why don't you come down You will feel it when you layout the whole page

Remove the floating

There are four ways to clear floating ：

1.   Add... To the parent element height Height , Why increase the height and float it ？ Because after increasing the height , There are elements in the empty position , It's like a book on the desk in the library , So won't you sit over , Because obviously someone has occupied this position

2. Add... To the parent element overflow：hidden 

3. Add an empty tag , Add clear:both To do empty floating

4. Obviously, the most important thing is to put it in the back , This is also the most commonly used way .clearfix:after{ content:"" ; display:block ; clear:both } Clear floating by means of pseudo elements

Write a public CSS

In the web layout , We wrote CSS The file is definitely not just one , There will be multiple CSS file , Contains public files , Separate pages css The file will also have a file dedicated to clearing the default style , Now let's write our own to clear the default style css, So in the future layout , Just quote directly .

Name it reset.css So what do you need in public documents ？ The function of public files is to help us clear the default styles of some elements , If a Labeled ,li Labeled also margin and padding clear 0 , In order to ensure that under different browsers , These elements can be well displayed , Come on Post code

@charset "UTF-8";
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,
fieldset,legend,input,textarea,select
{
    margin:0;
    padding:0
}
body{
    font-size: 14px;
    font-family: " Microsoft YaHei ";
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix:after{
    content: '';
    display:block;
    clear: both;
}
img{
    border: 0;
}
a{
    text-decoration: none;
    color:#000000;
}
li{
    list-style-type: none;
}
 Copy code 

Page layout practice

Precautions for layout

1. All names should be lowercase , Can't start with a number
2. Every label has to have a beginning and an end , And have the right level , The layout is regular and neat
3. Performance and structure are completely separated , No representation elements are involved in the code , Such as style
4. <h1> To <h5> The definition of , We should follow the principle from big to small , Reflect the structure of the document , And it's good for the search engine .<h1> Try to use only once in the document .
5. Add a unique... To each form and form 、 Structural markings id, Tables are only used to display data .
6. Try to use English naming principles as much as possible  
7. Try not to abbreviate , Unless you can see at a glance, the word selector is generally controlled in 15 About characters .

Common naming conventions

Relatively important part of the outer layer of the web page CSS Style naming ：

• coat wrap ------------------ For the outermost layer
• Head header ---------------- For the head
• primary coverage main ------------ For main content （ In the middle ）
• left main-left ------------- Layout on the left
• On the right side main-right ----------- Layout on the right
• Navigation bar nav ----------------- Web menu navigation bar
• Content content --------------- For the middle part of the page
• Bottom footer ----------------- For the bottom  

Web page public naming

• #wrapper The page periphery controls the overall layout width
• #container or #content Containers , For the outermost layer
• #layout Layout
• #header Header part
• #foot, #footer Footer section
• #nav Main navigation
• #subnav Secondary navigation
• #menu menu
• #submenu Sub menu
• #sideBar Sidebar
• #sidebar_a, #sidebar_b The left or right column
• #main Page body
• #tag label
• #msg #message Prompt information
• #tips Tips
• #vote vote
• #friendlink Friendship connection
• #title title
• #summary Abstract
• #loginbar Login bar
• #searchInput Search input box
• #hot Hot spots
• #search Search for
• #search_output The search output is similar to the search results
• #searchBar Search bar
• #search_results The search results
• #copyright Copyright information
• #branding trademark
• #logo Website LOGO sign
• #siteinfo Website information
• #siteinfoLegal A legal statement
• #siteinfoCredits credibility
• #joinus Join us
• #partner partners
• #service service
• #regsiter register
• arr/arrow arrow
• #guild guide
• #sitemap Website map
• #list list
• #homepage home page
• #subpage Secondary page sub page
• #tool, #toolbar Toolbars
• #drop The drop-down
• #dorpmenu The drop-down menu
• #status state
• #scroll rolling
• .tab TAB
• .left .right .center be at the left side 、 in 、 Right
• .news Journalism
• .download download
• .banner The banner ( Top banner )
• .products product
• .products_prices product price
• .products_description Product description
• .products_review Product reviews
• .editor_review Edit comments
• .news_release Latest products
• .publisher manufacturer
• .screenshot thumbnail
• .faqs common problem
• .keyword key word
• .blog Blog
• .forum Forum

CSS File naming conventions

• master.css,style.css The main
• module.css modular
• base.css Basic sharing
• layout.css Layout , Page
• themes.css The theme
• columns.css special column
• font.css written words 、 typeface
• forms.css Forms
• mend.css Patch
• print.css Print

ONE A web development

Yo yo The layout is almost here , So simple , It looks like this , But it's not , We have mastered the core of the layout , But the problem of layout appears in actual combat , Let's write a web page , Do you still remember Han Han in the endless meeting , Han Han's personal main station is  http://www.wufazhuce.com/

​

Open the website full of literature and art , Come on, let's write it together , Follow the steps .

So before you start the code, you need a layout , Having a layout will make your thinking clearer

​

First step ： Project structure construction

establish CSS / images / js Folder and  index.html page , Copy the public code written above reset.css File into project , And new style.css

The second step ： build html The page layout

<div class="container">

         <!--  Head  --> 

        <div class="header"></div>

        <!--  Ad map / Journalism -->

       <div class="content clearfix"> </div>

        <!--app-->

        <div class="app"></div>

        <!-- Bottom -->

        <div class="footer"></div>       

</div>
 Copy code 

When laying out, build large blocks first , You don't have to write the details first , Look at the big pieces first and then the details

The third step ： Start with the head, the first module

​

This place , The background is a solid blue , above ONE One for logo png Format , In the head div Written in

<div class="header"> <a href="#"> <img src="image/logo.png" /></a> </div>
 Copy code 

Corresponding style.css Style needs to be added

First, give the whole the biggest div Add width and Center ,.container{ width:854pxl margin:0 auto } To the head div The added style is  

.header{

background-color:#01aef0; 

height:50px;

margin:10px 0;

text-align:center;

}
 Copy code 

Step four ： Open the middle part " advertisement / Journalism "

​

From the layout we can see , In the middle is a left-right structure , First left and right div Add float

<div class="banner fl"><img src="images/banner.jpg" /></div>

<div class="newslist fr"></div>
 Copy code 

Then start adding layout to the text list on the right

<div class="news fr">

<h4>ONE  article </h4>

<p class="newsnumber">VOL.1677</p><p class="newstitle"> Loveless Cafe - A gentleman </p>

<ul>

<li><span>VOL.1677</span><a href="#"> Fudge super power |  Just write it and be happy </a></li>

<li><span>VOL.1677</span><a href="#"> Fudge super power |  Just write it and be happy </a></li>

<li><span>VOL.1677</span><a href="#"> Fudge super power |  Just write it and be happy </a></li>

<li><span>VOL.1677</span><a href="#"> Fudge super power |  Just write it and be happy </a></li>

<li><span>VOL.1677</span><a href="#"> Fudge super power |  Just write it and be happy </a></li>

<li><span>VOL.1677</span><a href="#"> Fudge super power |  Just write it and be happy </a></li>

</ul>

</div>
 Copy code 

There are obviously two pieces on the right side of the effect drawing , It's easy to copy ,ctrl+c then ctrl+v

So the middle part CSS

.news{

width:270px;

height:290px;

background-color:#f6f6f6;

margin-bottom:10px;

}

.news h4{

font-size：20px; 

background-color:#01aef0; 

color:#fff; 

padding-left:8px;

height:42px;

line-height:42px;

}

.news .newsnumber{

height:48px;

line-height:48px;

padding-left:8px;

}

.news .newstitle{

height:40px;

line-height:40px;

padding-left:8px;

font-size:16px;

color:#428bd2;

}

.news ul{

padding:0 0 17px 8px;

}

.news ul li{

line-height:26px;

height:26px;

color:#666666;

}
 Copy code 

Step five ：app modular

​

This place is relatively simple , The layout is simple

<div class="app">

<h4>App One </h4>

<p> Only one picture is prepared for you every day 、 A text and a question and answer </p>

        <p> Edited and supervised by Han Han   primary 《 The chorus 》 CO produced by the main creative members </p>

        <p><img src="images/erweima.png" /><img src="images/erweima.png" /><img src="images/erweima.png" /></p>

        <p>-  You can also search  -</p>

        <p>" Han Han "  or  "ONE One "</p>

</div>
 Copy code 

Corresponding CSS part

.app{
    margin-top: 40px;
   text-align: center;
}
.app img{
    width: 80px;
    height: 95px;
}
.app h4{
    font-size: 18px;
    font-weight: normal;
    padding-bottom: 24px;
}
 Copy code 

Actually APP And the bottom are to make the text direct center In the middle , No big problem

Step six ： The last bottom

<div class="footer">
        <p> 2012-2014 「ONE ·  One 」</p>
        <p><a href="#"> About </a> <a href="#"> User agreement </a> <a href="#"> Contact us </a></p>
        <p><a href="#"> One App Studio </a> <a href="#"> Tinglin town studio </a> <a href="#"> Coolest ZUICOOL</a></p>
        <p> In a complex world ,  One is enough . One is all.</p>
        <p> Shanghai ICP To prepare 13042400 Number </p>
</div>
 Copy code 

Corresponding CSS

.footer{
    border-top: 1px solid #eeeeee;
    padding-top: 24px;
    margin-top: 116px;
    text-align: center;
}
.footer p{
    height: 33px;
    line-height: 33px;
}
.footer a{
    margin: 0 6px;
    color: #428bca;
}
 Copy code 

Very not easy , finally OK 了

​

So to conclude ： In fact, the layout seems very simple , The bitterness is only programmers, you know , But as long as you keep a correct heart , To write code , Your code will treat you well , Pay attention to develop good programming habits , For example, naming , For example, layout labels are nested correctly , For example, semantic choice , Use of developer tools , After all, debugging is important , Of course, there are many more and so on ....