PC-Side Enterprise website (it test8) detailed 1-4

Things to Accomplish today: (1, pseudo-elements: the use of before,:after. 2.table use (use of collapse) 3rgba advanced application)

Today I mainly completed the Test8-3 page.

Headers and footer are used for the first two pages. Just move right over here.

One. Implement NAV navigation. I try to use pseudo-elements myself: Before,:after use, feel good fun. To use more, deepen familiarity.

Can see me using: Before to get the lattice text in front of the UL box. Of course I want to: after clear floating effect.

For hyperlinks, I think it's a "otaku". I'm going to have to make sure the position of a is stacked, and then add a sentence

Text-decoration:none;

To get rid of its lower horizontal line. -_-!

As for the realization of mouse over hyperlink change color. To use: hover on it.

. Avator-nav-1 Li A:hover{
Background: #29b078;
Color:white;
}

Two. Implementing the Content List

<div class= "c-row-1" > <div class= "pct80 auto" > <div class= "Ptb20 bdb-1sd0d" > < A href= "class=" co000 "> Home </a><span class=" si-1 ">&rsaquo;</span> <a href=" "class=" CO20B "> Partners </a> </div> <ul class=" ptb12 bdb-1sd0d avator-nav-1 "> <li>< A href= "#" > All </a></li> <li><a href= "#" > Front-end development </a></li> <li> <a href= "#" > Back-end development </a></li> <li><a href= "#" > Mobile Development </a></li> < Li><a href= "#" > Whole station development </a></li> <li><a href= "#" > Operation Maintenance </a></li> &L T;/ul> </div></div>.ptb12{Padding-top:1.2rem;Padding-bottom:1.2rem;}. bdb-1sd0d{Border-bottom:1px solid #d0d6d9; }/*-----Indicative-----*/. Si-1{padding:0 0.5rem;font-size:2rem;}. Avator-nav-1:before{content:"Direction:";Color:#d0d6d9;font-size:1.4rem;float: Left;padding:8px 0;}. Avator-nav-1:after{content:"";Clear:both;}. Avator-nav-1 Li a{text-decoration:None;Color:Black;font-size:1.4rem;Display:Inline-block;padding:8px 20px;}. Avator-nav-1 Li A:hover{background:#29b078;Color: White;}

This piece, originally I used float:left to achieve. However, it is annoying the setting of the left and right margins.

Suddenly, the idea is that the left and right margins of the box are set negative, and then the left and right margins of each box are offset.

Can it be achieved? Try it again next time you do test.

This is the episode, end.

The method I use is the Flex adaptive box method.

<ul class= "DF-JCSBW" >   <li class= "show Pct30" >       <table>                  </table>       <table >                 </table>       <div class= "Cover df-cc" >       </div>   </li></ul>

The key structure code is as above.

. DF-JCSB {display:flex; justify-content: space-between;} . DF-CC {display:flex; justify-content: Center; align-items: center;}

In the first table, I used colspan to occupy a row of two columns

<th colspan= "2" >

How do you implement the small icons and text alignment inside?

A search on the internet, a lot of methods. are not fixed a fool-aligned.

It seems that all the data should be adjusted step-by-step. Well, that's a little arbitrary. Maybe I haven't found it yet.

And my way is: the parent box sets the padding, and the sub box sets the negative margin to align the img to the text of the parent box.

And then here's how to cover cover.

Actually are inseparable from: hover realization. I'm using the visibility. I remember reading an article some time ago. So the analogy visibility and display of, uh, forget is not to say they two. Presumably, visibility is a piece of paper money that has not been wrapped, you secretly took it away, it doesn't really disappear. But the other one was a note wrapped in envelopes, and you stole the money, but the red envelope remained there to occupy the place.

Skip it, as if that's what it means! Anyway, I've been using visibility.

When I was doing cover, I used the method of Rgba. This is a good performance to achieve transparency effect.

Background-color:rgba (0,0,0,0.76);

Direct cover, and then add content to the inner surface just fine.

And there's another way:

Background: #000; Filter:alpha (opacity=50);-moz-opacity:0.5;opacity:0.5;

This way, I used it when I was test7-2.

The cascading relationship of this method is that the above attribute is opposed to using a box, and then the content displayed below is added. Also use a large box containing {property box, content box}

. FOOTER-BG{Height:5rem;/*just give one more layer, and then give a height as high as the parent box to make the bottom transparent, the upper layer opaque*/background:#29BDE0;Filter:Alpha (OPACITY=50);-moz-opacity:0.5;Opacity:0.5;/*Filter:alpha (opacity=50);-moz-opacity:0.5;opacity:0.5; achieve transparency effect*/}. NAV-FL,.NAV-FR{Margin-bottom:0.5rem;width:45%;Max-width:30rem;padding:1rem;Top:0.5rem;Border-radius:0.5rem;Border:None;font-size:2rem;Color:#fff;}. BGFB{background:#FBB435;}. Bgf6{background:#F66F6F;}<div class= "footer-1" > <div class= "footer-bg" ></div> <button class= "NAV-FL bgfb" > One more game. </button><button class= "Nav-fr bgf6" > Upload share </button></div>

That's probably the stuff.

Things to plan for Tomorrow: (1, using a responsive Layout 2 grid system)

Problems encountered: (1. The alignment of small icons and text 2. How the hell I re-installed the system, set the public key also upload failed Ah! x_x#)

Here's the main thing about Webstrom upload failure

I checked the public key and the settings were correct. Then on Webstrom reset git and github, the results are all successful.

Then I'm on git to verify that SSH key is successful. The results are as follows:

Later I create SSH key, and then re-upload one side is not.

So where is the problem?

Finally, I found the problem in picture 2 below.

Git software tells me not a git repository, no project? How is it possible that I have test1 on GitHub?

But I know that the big picture is that the association is not successful.

Then I'll try cloning the project test1 from remote GitHub.

GitHub told me it was successful, I opened my library, why not? --and that tells me the next clue.

I guess I'm going to re-identify Git's manageable repository.

And then I set it up one step at a pace. The result finally appeared in the place where I wanted to appear.

OK, I copied the Css-task document and then Webstrom emptied the Css-task project to reset the Css-task project. Finally, on GitHub, delete the fake Css-task library.

The play came and I opened my Css-task project on the Webstrom, share project on GitHub in VCs. One second, two seconds, success! ... ^_^ rejoice.

or open the Css-task library on GitHub to see what

Only test1??

So what?

I guess there are two possible: 1, is the VCS selected when the content is not selected?

2, is the default Git managed repository path to be set to the previous level.

Wipe your hands and start to die.

Waited for 5 minutes, finally pull finished.

The result is satisfactory. So how to access it?

Https://hewasdrunk.github.io/CSS-Task/test8/test8-1.html

Sure enough to add/css-task to enter, to be able to access.

But the result is that Bootstrap's Carousel is dead! What ' s the full!

The carousel diagram of the code on this machine is fine, and that's where the problem comes in! Mother, one problem followed by the emergence of a problem.

Vertical Middle finger

But that's not the question I'm studying right now.

So what about Git's manageable directory?

Git software tells me that there is no library under the directory?

Open the directory to see,. git is in the root directory of HTTP.

Continue testing

I uploaded another test8 with Css-task directory, the upload was successful, but the Web page failed to open. It says it can't be found. I uploaded a project test3-1, and the results were successful. Obviously setting this directory is better.

Well, it took 15 minutes to find the problem and clear the float. Grass. I haven't eaten yet. Don't write it. Upload GitHub, then eat.

Harvest: (1, pseudo element: use of Before,:after. The use of 2.table (collapse). Advanced application of 3rgba. 4. Alignment of small icons and text. ）

PC-Side Enterprise website (it test8) detailed 1-4