I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

According to yesterday’s plan, today’s side needs to start from the actual practice, I found a template on the maker’s post this morning, today’s main is to achieve this effect, come on, small and ！！！！


Vscode installation

website

Go to vscode’s official website.


Click on the download

Click on the official website to download.


Note that during the file download process, the page will indicate that this type of file may damage your computer. You still want to keep…… Please note that ~~~~ is reserved


Modify theme styles

After trying some theme styles, I like this Ayu font theme better



Basic learning emmet

Enter HTML on the page and notice that emmet is constantly being prompted. After CLICKING ok, I found that the page automatically generated the relevant structure, which felt amazing ~~~~~


Official Document Address

  • https://docs.emmet.io/

Summary of Basic Learning

keywords instructions The sample The effect
> You can use>Operator to nest elements within each other div>ul>li <div><ul><li></li></ul></div>
+ use+The operator places elements on the same level with each other div+p+bq <div></div><p></p><blockquote></blockquote>
^ use^Operator that can climb up a level in the tree and change the context, where the following elements should be displayed div+div>p>span+em^bq <div></div><div><p><span></span><em></em></p><blockquote></blockquote></div>
* use*Operator to define how many times an element should be printed ul>li*5 <ul><li></li><li></li><li></li><li></li><li></li></ul>
(a) use(a)Group subtrees of complex abbreviations div>(header>ul>li*2>a)+footer>p <div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer></div>
# & . inCSSIn the useelem#idandelem.classThe notation can be accessed with the specifiedidorclassProperty. inEmmetIn, you can use exactly the same syntax for theseattributeAdd to the specifiedThe element div#header+div.page+div#footer.class1.class2.class3 <div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div>
[attr] You can use[attr]Representation (e.gCSSAdd custom attributes to the element td[title="Hello world!" colspan=3] <td title="Hello world!" colspan="3"></td>
$ You can use more than one in a row$Fill in the numbers with zero ul>li.item? $* 5 <ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></li></ul>
@ use@Modifier that can change numbering direction (ascending or descending) and cardinality (such as starting value). ul>li.item$@-*5 <ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li></ul>
{} You can use{}Adds text to the element a>{click}+b{here} <a href="">click<b>here</b></a>

Learning summary

Look at the official website here that the feeling is very powerful, and then also to avoid learning too miscellaneous, learning some temporary use of the content, only to learn the first page, but this does not seem to mention HTML :5, do not know why, after learning feeling or need to understand ~~~~~ in practice

Understand the general project structure

When searching the keywords of the front-end foundation project structure, I found a lot of tedious page structures, so I decided to adopt the structure that seems to be more consistent with the simple project.

./ Flag ── CSS Flag ─ js Flag ─ images Flag ─ index.htmlCopy the code
The name of the instructions
css The folder where the style files are placed
js The folder where js files are placed
images The folder where the image files are placed
index.html The home page

New project


The main project directory structure is as follows:

. / ├ ─ ─ CSS │ ├ ─ ─ index. The CSS ├ ─ ─ js ├ ─ ─ images │ ├ ─ ─ flower. The PNG ├ ─ ─ index. The HTMLCopy the code

index.html


      

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">

  <title>Small and learning front end</title>

  <meta name="keywords" content="Small and young and learning.">

  <meta name="description" content="Small and nice description test ~~~~~~">

  <meta name="author" content="Small and small.">

  <link rel="stylesheet" href="css/index.css">

</head>

<body>

</body>

</html>

Copy the code

In actual combat

Confirm page structure

I basically understand that the whole page is divided into two structures, and then divided into left and right structures

  <div id="upper">

  </div>

  <div id="lower">

    <div class="left">

    </div>

    <div class="right">

    </div>

  </div>

Copy the code

Put text on it

According to my basic understanding, I first used the

tag to wrap the picture with a line break. When writing, I found that the 4/19 effect felt a bit troublesome

  <div id="upper">

  </div>

  <div id="lower">

    <div class="left">

      <p>April<br/>hello</p>

      <p>Embrace life<br/>Sunshine always comes after rain</p>

    </div>

    <div class="right">

      <p>enjoy life</p>

      <p>4/19</p>

    </div>

  </div>

Copy the code

Set the overall page size

Know CSS syntax for width Settings


Understand height setting CSS syntax


View the poster size 640 x 1008 px


Set the overall style size of the page

body{

  width: 640px;

  height: 1008px;

}



Copy the code

Set the background gradient effect

Just practice the background color gradient that was just a basic understanding of that day ~~~~

This should be Linear Gradients – down/up/left/right/diagonal.

background-image: linear-gradient(direction.color-stop1.color-stop2,...). ;

Copy the code

There are two main color gradients, # fDFadd and #ff8e9c.

body{

  width: 640px;

  height: 1008px;

  background-image: linear-gradient(#fdfadd, #ff8e9c);

}

Copy the code

I don’t know why I set the width and height for the body, but the gradient effect seems to apply to the entire page

Related search was conducted by setting the height of the body to the keyword that did not take effect, which seems to be the problem of setting it to 100%, which seems to be different from this one.

Decided to improve the back of the first to solve this problem ~~

Set the top half of the page

Set the top half height


#upper{

  width: 583px;

  height: 583px;

}

Copy the code

Setting the background image

#upper{

  width: 583px;

  height: 583px;

  background-image: url(/images/flower.png);

}



Copy the code

But the page doesn’t show this background image?

Fixed the problem that the background image was not displayed

Search for possible causes by setting the background image but not showing the search term

  • cssNot called; Please check thecssWhether the call succeeded.
  • cssImage address is not correct; Please check thecssIs the picture address correct?
  • divThe height of theta is not fixed, yesautoOr no value is set;divSetting the background image incorrectly makes it too tall to display.
  • divBe nested; View nesteddivCheck whether the Settings are correct.
  • divNon-standard code; Please check thedivIs the code written correctly?

Because the background color I set in the CSS file works on the page, it’s not the first reason.


How to read the page image address? I saw that the address in my CSS felt right, and after a basic search, I figured out how to debug the page.

The key word is F12, press the F12 shortcut key in the opened browser page, you can appear the debugging window, but it seems that the screenshot in the article is not the same as my browser debugging window, it should be the version problem.


After open the debug window, found an error page, GET file:///E:/images/flower.png net: : ERR_FILE_NOT_FOUND, there is something not quite right about the path.


I decided to change the path to a relative path. Note that the path is changed to a relative path. Make sure to add quotation marks around the path, otherwise an error will be reported ~~~~

#upper{

  background-image: url('.. /images/flower.png');

}

Copy the code

Out ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

Set the bottom half of the page

Set the overall size of the lower half

#lower{

  width: 583px;

  height: 400px;

}

Copy the code

Set the bottom half of the background color

#lower{

  width: 583px;

  height: 400px;

  background-color: #ff6e80;

}

Copy the code

Why there is a gap between the upper part and the small part of the page by default, strange ~~~~

Set the bottom half of the font color

#lower{

  width: 583px;

  height: 400px;

  background-color: #ff6e80;

  color:#fdfadd;

}

Copy the code

Set the lower half of the whole as left and right structure

Through how to set the left and right structure keywords through CSS, the search found that there are roughly the following methods.

  • table
  • inline-block
  • float
  • flexbox(css3)
  • float + margin
  • float + overflow(block formate context)
  • position: absolute

There are six ways to do this. The article says the table implementation is not recommended, so we tried the inline-block method and found that it was already left and right, so we decided to use this version.

#lower .left.#lower .right{

  display: inline-block;

}

Copy the code

Set the left side of the lower part – April hello effect

I forgot to add a class to the p tag.

  <div id="upper">

  </div>

  <div id="lower">

    <div class="left">

      <p class="left-1">April<br/>hello</p>

      <p class="left-2">Embrace life<br/>Sunshine always comes after rain</p>

    </div>

    <div class="right">

      <p class="right-1">enjoy life</p>

      <p class="right-2">4/19</p>

    </div>

  </div>

Copy the code

How to write a font size style


Change the font size to 72px~~~


So I set this size

#lower .left .left-1{

  font-size: 72px;

}

Copy the code

I searched how to set the circle effect for the text, but it seems that the effect is not the same as mine. I will deal with it later.

Set the next part left – embrace life sunshine always after the wind and rain effect

Change the font size to 24px~~~


So I set this size

#lower .left .left-2{

  font-size: 24px;

}

Copy the code

Why is there so much space between these two paragraphs?

Set the right side of the lower part – Enjoy Life effect

Change the font size to 32px


There was a line under Enjoy Life, but suddenly I thought of the text-decoration of the day. So I tried to use it to see the effect

#lower .right .right-1{

  font-size: 32px;

  text-decoration: underline overline dotted #fdfadd;

}

Copy the code

Fonts also have a slant effect. Learn about the syntax


#lower .right .right-1{

  font-size: 32px;

  text-decoration: underline overline dotted #fdfadd;

  font-style:italic

}

Copy the code

I wonder why April Hello and Enjoy Life are not displayed in the same row?

Set the effect of -4/19 on the right side of the lower part

Change the font size to 81px


#lower .right .right-2{

  font-size: 81px;

 direction:rtl;

 unicode-bidi: bidi-override; 

}

Copy the code

The text direction in the poster is reversed, and the setting syntax is known by searching the CSS text direction ~~~


#lower .right .right-2{

  font-size: 81px;

 direction:rtl;

 unicode-bidi: bidi-override; 

}

Copy the code

Hahaha, it’s 91/4, not sure how to fix this, I think it’s 4/91 instead of 4/19.

  <div id="upper">

  </div>

  <div id="lower">

    <div class="left">

      <p class="left-1">April<br/>hello</p>

      <p class="left-2">Embrace life<br/>Sunshine always comes after rain</p>

    </div>

    <div class="right">

      <p class="right-1">enjoy life</p>

      <p class="right-2">4/91</p>

    </div>

  </div>

Copy the code

Then the effect of a text up and down, temporarily did not think of a good solution ~~~

Set the left and right width of the lower part

After looking at the effect, I found that the ratio of left to right width in the lower part was not correct. I changed the ratio of left to right width

#lower .left{

  width: 50%;

}

#lower .right{

  width: 40%;

}

Copy the code

Originally set to 50% left and right, but found that the page newline, adjust to the left and right ratio is different.


Set the spacing of the lower parts

After looking at the effect, I found that there is a default spacing in the lower part of the poster. I feel that it needs to be added. It really feels bad that the text is attached to the edge.

Understand spacing syntax


#lower{

  width: 583px;

  height: 400px;

  background-color: #ff6e80;

  color:#fdfadd;

  margin: 15px;

}

Copy the code

It’s not quite what I expected.

Then, after searching, there is another set spacing, the previous one is outer spacing, this one is inner spacing, understand the syntax for setting inner spacing.


Originally I wrote the padding of #lower: 15px; It turns out that the effect is still somewhat different from my understanding, so the internal spacing of #lower. Left and #lower. Right is changed later.

#lower .left{

  width: 50%;

  padding-left: 15px;

}

#lower .right{

  width: 40%;

  padding-bottom: 15px;

}

Copy the code

Addresses the default spacing of text

Margin: 0px; margin: 0px; margin: 0px; margin: 0px; Clean up.

p{

  margin: 0px;

}

Copy the code

Set the spacing within the left text in the lower part

The main thing is to increase the left inside spacing.

#lower .left{

  width: 50%;

  padding-left: 30px;

}

Copy the code

Set the line spacing of the lower part of the text

Understand line spacing syntax


To add the relevant line spacing, I tried the specific pixel value, percentage, and later found that the specific number is better ~~~

#lower{

  width: 583px;

  height: 400px;

  background-color: #ff6e80;

  color:#fdfadd;

  line-height: 1.7;

}

Copy the code

Set the spacing at the bottom

Understand word spacing syntax


Add related word spacing. I tried to add word spacing to the whole and found that it was better to add styles individually ~~~~

#lower .right .right-1{

  font-size: 32px;

  text-decoration: underline overline dotted #fdfadd;

  font-style:italic;

  letter-spacing: 0.5 em;

}

#lower .left{

  width: 50%;

  padding-left: 30px;

  letter-spacing: 1em;

}

Copy the code

Set the edge effect of the lower part of the text

Know edge syntax


Add related edges. I tried to add edges to the whole and found that I still needed to use border-bottom~~~~

#lower .right .right-1{

  font-size: 32px;

  font-style:italic;

  letter-spacing: 0.5 em;

  border-bottom:thick solid #fdfadd;

}

Copy the code

Set the next part of Enjoy Life effect

I feel the alignment height is not quite right, I actually thought of using height and padding-top to adjust ~~~~~

#lower .right .right-1{

  font-size: 32px;

  border-bottom:thick solid #fdfadd;

  font-style:italic;

  letter-spacing: 0.5 em;

  height: 160px;

  padding-top: 30%;

}

Copy the code

Put up a comparison


Learn nouns today

The name of the Noun parsing
Emmet A must-have toolkit for Web developers that can be greatly improvedHTML 和 CSSThe working process
The debug window Press in an open browser pageF12Shortcut keys, it will appearThe debug windowIn the debug window, all of themThe HTML elementWill be present inThe debug windowIn the
BFC BFC(Block formatting context)Block level formatting context. It is a separate render area, onlyBlock-level boxParticipation, it provides for internalBlock-level BoxHow it is laid out, and it has nothing to do with the outside of the area.
CSS3 CSS3isCSSAn updated version of the Cascading style sheet technology

Summary of today’s lesson


Today the mood

I am very happy that I have achieved my goal today. Although there are still some differences, I may improve later, but I feel somewhat satisfied ~~~


This article is formatted using MDNICE