current position:Home>CSS foundation + layout (novice friendly)

CSS foundation + layout (novice friendly)

2021-08-27 02:06:26 Outlying islands 121

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


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 ;


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


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 :

 Copy code 

The commonly used inline block elements are :

 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


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";
    font-size: 14px;
    font-family: " Microsoft YaHei ";
    float: left;
    float: right;
    content: '';
    clear: both;
    border: 0;
    text-decoration: none;
    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

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>


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

        <!-- Bottom -->

        <div class="footer"></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  



margin:10px 0;


 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>


<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>


 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 h4{





.news .newsnumber{





.news .newstitle{







.news ul{

padding:0 0 17px 8px;


.news ul li{




 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>

 Copy code 

Corresponding CSS part

    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>
 Copy code 

Corresponding CSS

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

copyright notice
author[Outlying islands 121],Please bring the original link to reprint, thank you.

Random recommended