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
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 :
- Own a line
- Width and height can be set You can set top/bottom distance
- If the width is not set , So he's directly 100%
Characteristics of row level elements :
- 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 :
- On a line with other elements
- 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 :
-
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
-
Add... To the parent element overflow:hidden
-
Add an empty tag , Add clear:both To do empty floating
-
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
- All names should be lowercase , Can't start with a number
- Every label has to have a beginning and an end , And have the right level , The layout is regular and neat
- Performance and structure are completely separated , No representation elements are involved in the code , Such as style
<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 .- Add a unique... To each form and form 、 Structural markings id, Tables are only used to display data .
- Try to use English naming principles as much as possible
- 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 ....
copyright notice
author[Outlying islands 121],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827020618802p.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich