CDN

The full name of CDN is Content Delivery Network, which is content distribution network. It refers to a computer network system that is connected to each other through the Internet. It uses the server closest to each user to send music, pictures, videos, applications and other files to users faster and more reliably to provide high performance, scalability and low-cost network content to users.

CDN public library

CDN public library refers to placing commonly used js libraries on CDN nodes to facilitate direct calls by developers. Compared with being stored on a single server, the CDN public library is more stable and faster. The general CDN public library will contain all the most popular open source JavaScript libraries in the world and can be directly referenced.

What is SEO?

SEO is an acronym for Search Engine Optimization or Search Engine Optimizer. In layman’s terms, SEO is to adjust and optimize the website internally and off-site to make the website meet the search engine ranking requirements and improve the keyword ranking in the search engine, thereby bringing accurate users to the website, obtaining free traffic, and generating direct sales or brand promotion.

Newbies can read Google Search Engine Optimization (SEO) One-page Guide.pdf.

Function

It is used to define the transition effect of style changes. In some cases (mobile terminal), it can replace JavaScript code to achieve animation effects.

The transition attribute is a shorthand attribute used to set four transition attributes:

1. transition-property

Specifies the name of the CSS property for setting the transition effect. The default value is all, which means all properties. You can also set a CSS property individually.

Definition:

Introduction on Wikipedia:

Markdown is a lightweight markup language founded by John Gruber. It allows people to “write documents in a plain text format that is easy to read and write, and then convert them into valid XHTML (or HTML) documents.” This language incorporates many of the features of plain text markup already found in email.

Markdown is also a Perl script written by Gruber: Markdown.pl. It converts content written in markdown syntax into valid, well-structured XHTML or HTML content, replacing left angle brackets (’<’) and ampersands with their respective character entity references. It can be used as a standalone script, as a plug-in for Blosxom and Movable Type or as a text filter for BBEdit.

Since changing the main code editor to Sublime Text, the efficiency of writing code has been significantly higher. Recently, I started trying to recommend this editor to my friends.

1. Advantages of Sublime Text

1. Cross-platform;

2. Lightweight and scalable: There are a large number of plug-ins that users can choose to install (the Emmet plug-in is recommended first).

3. Support syntax highlighting for almost all mainstream programming languages;

4. Code automatic completion, supporting code snippets (Code Snippet);

Tab switching is a common component in web pages. Used appropriately, you can save page space and display more content on the same page. The effects of tab switching vary widely. You only need to learn the basic ideas to create various effects. Below I use native js and jQuery to achieve four different tab switching effects.

Method 1: Use native js to achieve various tab switching effects.

1. Mouse sliding switch:

This is the simplest tab switch. When the mouse rolls over, switch Tab.

Today’s web pages contain a lot of content, and it is basically impossible to display them all on one screen. At this time, the user needs to move the scroll bar (slide the mouse wheel) to view the entire content. If he wants to return to the top, he also needs to move the scroll bar. If the page is too long, the experience is obviously not good enough. Therefore, the Back to Top button came into being.

Git is a distributed code management tool that facilitates code management when multiple people collaborate. There are two main ways to use Git to manage code in win7 system.

Method 1: msysgit

Step 1: Download and install msysgit

msysgit is the Windows version of Git. Download and install according to the default options. After the installation is complete, find “Git” -> “Git Bash” in the start menu. Clicking it will pop up a command line window, indicating that Git is installed successfully.

HTML structure

The navigation bar is a very common component in web pages. Usually, we use unordered lists to make navigation bars. for example

	<div id="nav">
		<ul class="navMenu">
<li><a href="">Home</a></li>
<li><a href="">Group tour</a></li>
<li><a href="">Self-guided tour</a></li>
<li><a href="">Cruise</a></li>
<li><a href="">Self-driving</a></li>
		</ul>
	</div>

Some navigation bars have drop-down secondary menus, so we add a list at the corresponding position to form a secondary menu, such as

	<div id="nav">
		<ul class="navMenu">
<li><a href="">Home</a></li>
<li><a href="">Group tour</a>
				<ul class="subMenu">
<li><a href="">Outbound tour group</a></li>
<li><a href="">Domestic tour group</a></li>
<li><a href="">Peripheral tours</a></li>
<li><a href="">Local tour</a></li>
				</ul>
			</li>
<li><a href="">Self-guided tour</a>
				<ul class="subMenu" >
<li><a href="">Outbound self-service</a></li>
<li><a href="">Domestic self-service</a></li>
<li><a href="">Flight + Hotel</a></li>
<li><a href="">Train + Hotel</a></li>
				</ul>
			</li>
<li><a href="">Cruise</a>
				<ul class="subMenu">
<li><a href="">Exclusive charter boat</a></li>
<li><a href="">Japan and South Korea routes</a></li>
<li><a href="">European routes</a></li>
<li><a href="">Three Gorges Route</a></li>
<li><a href="">American routes</a></li>
				</ul>
			</li>
<li><a href="">Self-driving</a>
				<ul class="subMenu">
<li><a href="">Self-driving around the area</a></li>
<li><a href="">Domestic self-driving</a></li>
<li><a href="">Outbound self-driving</a></li>
				</ul>
			</li>
		</ul>
	</div>

Basic CSS styles

The list is arranged vertically by default, while the common navigation bar main menu is arranged horizontally, and the secondary drop-down menu is arranged vertically, so we need to float the li element of the main menu so that it can be arranged horizontally. After setting the float, you should remember to clear it. You can use class as a common float and clear-float style, then add the corresponding class to the element that needs to be floated, and add the clear-float class to the parent element of the floated element.