This is the 22nd day of my participation in the August More Text Challenge

On a rainy day, tags and CSS layout together look better

​

CSS based

The box model

First of all, when it comes to layout, we have to mention the box model. The box, as its name implies, is the container in which we put things, just as we have seen in our daily life, such as the express box from 618, or the container for storing cosmetics from overseas shopping

​

These can be understood as boxes, so the HTML elements we learned before are actually a small box, so the content of the elements is the content stored in our box

​

After sorting out the relationship between boxes, CSS styles can be corresponding. There are three of them, namely, border box border, padding inside fill, and margin. As can be seen from the above picture, does the box have four directions: up, down, left, and right

A border

The color of a border is “border-top”/” border-left “/” border-right “/” border-bottom”

Border-width Width of the border

Border-style Border style

Dotted defines the dotted border. Rendered as solid lines in most browsers. Bootstrap defines the dashed line. Rendered as solid lines in most browsers. Solid defines solid lines. Double defines a double line. The width of the double line is equal to the value of border-width.

Border-color Specifies the border color

Border: 1px solid red;

Fill in

This is the distance between the content of an element and the border, just like padding in a cosmetic box, which obviously takes up space

Padding-right :10px When writing a value, make sure that the order is not left, right, or top

Padding :10px 20px The first value represents the top and the second value represents the left and right

Padding-right :10px 20px 30px The first value is up, the second value is left and right, and the third value is down

Padding :10px 20px 30px 40px top, right, bottom, left

From the outside

This refers to the distance between elements directly from elements, i.e. box to box

Margin :10px When you write a value it is top right bottom left, pay attention to the order

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

Margin :10px 20px 30px The first value stands for up, the second for left and right, and the third for down

Margin :10px 20px 30px 40px top right bottom left same effect as the first one

Tip: Use padding whenever you can use padding

There’s a pit here –>

Margin and union: Margin merge means that when two vertical margins meet, they form a margin. The height of the merged margins is equal to the greater of the two merged margins.

​

Or when an element wraps around another element, if they don’t have a border or padding to separate the margins, they join together to form a joined child

​

Also, margin merging occurs only for vertical margins of block-level elements in normal document flow. Margins between floating or absolute positions do not merge. Inline elements also don’t merge vertically on margins. Why? This is because the margin and padding top and bottom of the inline elements are not valid, only the left and right are valid. So pay attention to this pit in future layout, and know how to fill this pit

The element type

Our elements can be divided by type into block-level elements, row-level elements, and inline block elements

Common block elements are:

<div>, <p>, <h1>... < H6 >, < OL >, <ul>, <dl>, <table>, <address>, <blockquote>, <form>Copy the code

Common inline elements are:

< a >, < span >, < br >, < I >, < em >, < strong >, < label >, < q >, < var >, < cite >, < code >Copy the code

Common inline block elements are:

The < img >, < input >Copy the code

Characteristics of block-level elements

  1. Own a line
  2. You can set the width and height you can set the top/bottom distance
  3. If the width is not set, it is 100%

Characteristics of row-level elements:

  1. In line with the other elements

2. Do not set width and height. You can set the top/bottom distance to 3. The width is determined by the content

Characteristics of inline block elements:

  1. In line with the other elements
  2. You can set the width and height you can set the top/bottom distance

Conversion of element type

Use display to convert the type of the element, and the table below shows the optional values of display

​

Although there are many values in the table, we use only four:

None elements are not displayed. / block is displayed as a block-level element. / inline is displayed as a line-level element. / inline-block inline block elements

floating

Don’t have a web page is so normal display, if there is one that is much more ugly, floating in the page layout also occupy very important position, floating attribute is float optional only left/right left or right float float, add elements after the floating, element will flow out of the current document, from the current document flow means do not take a place, So the bottom element will go up, think about it if you go to the library, if the table is empty, do you think no one will sit on it, so it’s normal for the bottom element to go up.

In web layout, float is very important, and most of the problems with web layout are, why don’t you get up, why don’t you get down and you’ll feel it when you’re laying out the whole page

Remove the floating

There are four ways to clear floats:

  1. Add height to parent element, why add height float? Because after the height is increased, the vacant position has elements occupying the position, just like a book on the table in the library, then you will not be able to sit in the past, because obviously someone has occupied the position

  2. Add overflow: Hidden to the parent element

  3. Add an empty label and add clear:both to clear the float

  4. Clearfix :after{content:””; clearfix:after{content:”; display:block ; Clear :both} clears floats by means of pseudo-elements

Write a public CSS

In the middle of the page layout, we write the CSS file will not be only one, there will be multiple CSS files, contain public file, separate CSS file there will be responsible for the default page style clear, we now to write a own clearing the default CSS styles, so that in future layout, direct reference is ok.

I’m going to call it reset.css so what do you need in a public file? Public files help us to clear the default styles of some elements, such as a, LI, and margin and padding 0. To ensure that these elements look good in different browsers, let’s paste the 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 the code

Page layout practice

Pay attention to layout

  1. All names should be lowercase and not begin with a number
  2. Each label should have a beginning and an end, and it should have the right level and layout
  3. Presentation is completely separate from structure, and there are no presentation elements, such as style, involved in the code
  4. <h1>to<h5>The definition of the document should follow the principle of large to small, reflect the structure of the document, and facilitate search engine queries.<h1>Try to use only once in a document.
  5. Give each table and form a unique, structured tag ID, and the table is only used to display data.
  6. Use English naming principles as much as possible
  7. Try not to abbreviate, unless the obvious word selectors are usually around 15 characters.

Common naming conventions

Relative to the important part of the outer page CSS style naming:

  • Coat wrap —————— is used for the outermost layer
  • Header header —————- Is used for the header
  • Main ———— Used for the main content (middle)
  • Left main-left ————- Layout on the left
  • Main-right ———– The layout is on the right
  • Navigation bar nav —————– Navigation bar of the web menu
  • ————— is used for the middle body of a web page
  • Bottom footer —————– is used for bottom

Common naming of web pages

  • The # Wrapper page periphery controls the overall layout width
  • #container or #content container, for the outermost layer
  • # layout layout
  • #header Header
  • #foot, #footer section
  • # nav main navigation
  • #subnav secondary navigation
  • # menu menu
  • # submenu submenu
  • # sideBar sideBar
  • # sideBAR_A, # sidebar_B Left or right side
  • The body of the page
  • # tag label
  • # MSG #message
  • Tip # tips
  • # vote vote
  • # friendLink
  • # title title
  • # the summary in this paper,
  • Article # loginbar login
  • #searchInput searchInput box
  • #hot
  • # search search
  • #search_output Search output is similar to the search results
  • # searchBar search bar
  • #search_results Search results
  • # Copyright Information
  • # the branding logo
  • #logo The logo of the website
  • # siteInfo Site information
  • #siteinfoLegal
  • # siteinfoCredits credibility
  • #joinus joinus
  • # Partner
  • # service service
  • # regsiter registered
  • Arr/arrow arrow
  • Guide # guild
  • #sitemap sitemap
  • # list list
  • # homepage homepage
  • #subpage
  • #tool, #toolbar toolbar
  • # drop down
  • # dorpMenu dropdown menu
  • # the status status
  • # scroll scroll
  • TAB TAB
  • .left. Right. Center is left, center and right
  • The news news
  • Download. Download
  • Banner advertisement (top advertisement)
  • Products. Products
  • Products_prices Product prices
  • Products_description Product description
  • Products_review Product review
  • .editor_review Edit comments
  • News_release The latest product
  • The publisher producers
  • The screenshot thumbnails
  • Faqs FAQ
  • The keyword keyword
  • The blog blog
  • The forum BBS

Naming conventions of CSS files

  • Master. CSS style. CSS mainly
  • The module. The CSS modules
  • Base. CSS Basic share
  • Layout.css
  • Themes. CSS theme
  • The columns. The CSS column
  • Font. CSS Text and font
  • Forms. The CSS form
  • Mend. CSS patch
  • Print. CSS to print

ONE web development

It looks like this, but in fact it is not. We have already mastered the core of the layout, but the problems of the layout are all in actual practice. Let’s write a web page. Han’s personal master station is http://www.wufazhuce.com/

​

Open the website full of literary atmosphere, come on, let’s write it out together, follow the steps.

Before you start coding, you need a layout. Having a layout will make your thinking clearer

​

Step 1: construction of project structure

Create a CSS/images/js folder and an index.html page, copy the public reset. CSS file written above into your project, and create a new style. CSS

Step 2: Set up the HTML layout

<div class="container">

         <! - the head -- -- > 

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

        <! -- Advertisement/News -->

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

        <! --app-->

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

        <! -- -- -- > at the bottom of the

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

</div>
Copy the code

Layout of the first block, do not write details, first block and then look at the details

Step 3: Start the first module from the header

​

This place, the background is a solid color of blue, ONE above a LOGO PNG format, written in the head div

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

The corresponding style.css style needs to be added

Container {width: 854pXL margin:0 auto} creates a style for the header div

.header{

background-color:#01aef0; 

height:50px;

margin:10px 0;

text-align:center;

}
Copy the code

Step 4: Open the middle section “Advertising/News”

​

From the layout diagram, we can see that there is another left and right structure in the middle. First, add floats to the left and right divs

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

<div class="newslist fr"></div>
Copy the 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">Forget about the Cafe. - Gentlemen</p>

<ul>

<li><span>VOL.1677</span><a href="#">Fudge abilities | literally write happy good</a></li>

<li><span>VOL.1677</span><a href="#">Fudge abilities | literally write happy good</a></li>

<li><span>VOL.1677</span><a href="#">Fudge abilities | literally write happy good</a></li>

<li><span>VOL.1677</span><a href="#">Fudge abilities | literally write happy good</a></li>

<li><span>VOL.1677</span><a href="#">Fudge abilities | literally write happy good</a></li>

<li><span>VOL.1677</span><a href="#">Fudge abilities | literally write happy good</a></li>

</ul>

</div>
Copy the code

There are obviously two on the right, so I’ll just copy that, CTRL + C and then CTRL + V

So the CSS in the middle

.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 the code

Step 5: APP module

​

This place is relatively simple, the layout is relatively simple

<div class="app">

<h4>An App</h4>

<p>Only prepare a picture, a text and a question and answer for you every day</p>

        <p>Han Han chief editor and producer of the original "Solo Group" co-produced by the chief creative members</p>

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

        <p>- Also searchable -</p>

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

</div>
Copy the code

Corresponding CSS section

.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 the code

In fact, APP and bottom have text directly center, not a problem

Step 6: 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="#">An App Studio</a> <a href="#">Trinlin Town Studio</a> <a href="#">The coolest ZUICOOL</a></p>
        <p>In a complex world, one is enough. One is all.</p>
        <p>Shanghai ICP prepared 13042400</p>
</div>
Copy the code

The 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 the code

Finally, it’s OK

​

To sum up: Layout as actually very simple, with the bitterness of the programmer only, you know, but as long as you keep a heart through the very is, to write code, your code will be kind to you, pay attention to develop good programming habits, such as name, such as tag properly nested layout, such as the choice of semantic, the use of the developer tools, after all, debugging is important, Of course there are many more and so on….