The 15th word of Python's rise

Csspositioning (positioning)

Positioning is sometimes tricky!

decided to display the elements in front! Elements can overlap! Positioning (positioning)

CSS positioning properties allow you to position a single element. It can also put an element behind another element and specify what should happen when the content of an element is too large.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties do not work unless the Position property is set first. They also have different ways of working, depending on the location method.

There are four different positioning methods.

Static positioning

The default value of the HTML element, that is, no positioning, and the element appears in the normal stream.

Statically positioned elements are unaffected by top, bottom, left, and right.

Fixed positioning

The position of the element relative to the browser window is a fixed position.

It does not move even if the window is scrolled:

Example P.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}relative positioning

Relative positioning elements are positioned relative to their normal positions.

Example H2.pos_left
{
position:relative;
left:-20px;
}
H2.pos_right
{
position:relative;
left:20px;
}absolute positioning

The position of an absolutely positioned element is relative to the nearest positioned parent element, if the element has no positioned parent element, then its position is relative to

Example H2
{
Position:absolute;
left:100px;
top:150px;
The overlapping elements

Elements are positioned independently of the document flow, so they can overwrite other elements on the page

The Z-index property specifies the stacking order of an element (which element should be placed in front, or later)

An element can have a stacked order of positive or negative numbers:

Instance img
{
Position:absolute;
left:0px;
top:0px;
Z-index:-1;
} JavaScriptIntroduction

JavaScript is the most popular scripting language on the Internet, which can be used in HTML and the Web, and is more widely used in servers, PCs, laptops, tablets and smartphones.

JavaScript is a scripting language

JavaScript is a lightweight programming language.

JavaScript is a programmatic code that can be inserted into an HTML page.

When JavaScript is inserted into an HTML page, it can be performed by all modern browsers.

JavaScript is easy to learn.

JavascriptData Type

A string (string), a number, a Boolean (Boolean), an array, an object (objects), null (NULL), undefined (Undefined).

JavaScript has a dynamic type

JavaScript has a dynamic type. This means that the same variables can be used for different types:

Example var x; X is undefined
var x = 5; Now X is the number
var x = "John"; Now X is a string

JavaScript string

A string is a variable that stores characters, such as Bill Gates.

The string can be any text in quotation marks. You can use single or double quotation marks:

Example var carname= "Volvo XC60";
var carname= ' Volvo XC60 ';

You can use quotation marks in a string, as long as you do not match the quotes enclosing the string:

Example var answer= "It ' s Alright";
var answer= "He is called ' Johnny '";
var answer= ' He is called ' Johnny '; JavaScript numbers

JavaScript has only one numeric type. Numbers can be with decimal points or without:

Example Var x1=34.00; Use a decimal point to write
var x2=34; Do not use the decimal point to write

Large or small numbers can be written by means of scientific (exponential) notation:

Example Var y=123e5; 12300000
var z=123e-5; 0.00123JavaScript Boolean

Boolean (logic) can have only two values: TRUE or FALSE.

var x=true;
var Y=false;

Boolean is commonly used in conditional tests. You'll learn more about conditional testing in later chapters of this tutorial.

HTML DOM (Document Object model)

When a Web page is loaded, the browser creates a Document object model for the page.

The HTML DOM model is constructed as a tree of objects :

HTML DOM Tree

With the programmable object model, JavaScript has the ability to create dynamic HTML.

• JavaScript can change all HTML elements in a page
• JavaScript can change all HTML attributes in a page
• JavaScript can change all CSS styles in a page
• JavaScript can react to all the events in the page

Finding HTML elements

Typically, with JavaScript, you need to manipulate HTML elements.

In order to do this, you must first find the element. There are three ways to do this:

• Find HTML elements by ID
• Find HTML elements by tag name
• Find HTML elements by class name

Find HTML elements by ID

The simplest way to find HTML elements in the DOM is by using the ID of the element.

This example finds the id= "Intro" element:

instance var X=document.getelementbyid ("Intro") finds HTML elements by tag name

This example finds the element id= "main" and then finds all the <p> elements in the id= "main" element:

Example var X=document.getelementbyid ("main");
var y=x.getelementsbytagname ("P");

Find HTML elements by class name

This example uses the getelementsbyclassname function to find the elements of the class= "Intro":

instance var x=document.getelementsbyclassname ("Intro"); change HTML output stream

JavaScript is able to create dynamic HTML content:

Today's date is: Thu 16:55:04 gmt+0800 (China Standard Time)

In JavaScript, document.write () can be used to write content directly to the HTML output stream.

Example <! DOCTYPE html>
<body>

<script>
document.write (Date ());
</script>

</body>

Change HTML Content

The simplest way to modify HTML content is to use the InnerHTML property.

To change the contents of an HTML element, use this syntax:

document.getElementById ( ID). innerhtml= the new HTML

This example changes the contents of the <p> element:

Examples <body>

<p id= "P1" >hello world!</p>

<script>
document.getElementById ("P1"). innerhtml= "new text!";
</script>

</body>

To change the attributes of an HTML element, use this syntax:

document.getElementById ( ID). attribute= New Attribute value

This example changes the SRC attribute of the element:

Example <! DOCTYPE html>
<body>



<script>
document.getElementById ("image"). src= "Landscape.jpg";
</script>

</body>

The 15th word of Python's rise