Web Front-end Basics (03)

Curriculum review

Form:

The drop-down choice<select name><option value selected>   
<textarea name rowsSaid linecolsThe columnplaceholderPlaceholder text >Button:<input type="submit/reset/button" value="Display text">  
<button>button</button>
Copy the code

Entity reference: & lt ; & gt ;
H5 Add the tag header Footer Section Nav article
CSS: Cascading style sheets to beautify pages
Three ways of introduction:

Inline: Adding a style attribute inside a tag cannot be reused
Inside: add style tag inside the head tag, write style code inside the tag, can be the current page reuse
External: Style code written in a separate CSS file is introduced in HTML pages through the link tag, which can be reused across multiple pages and can be separated from THE HTML and CSS code

The selector

div{}
#id{}
.class{}
div,#id{},.class{}
Input [type = “text”] {}
* {}
div span{}
div>span{}
a:hover/link/active/visited{}

Color assignment

red
#ff0000
#f00
RGB (0, 255)
Rgba (255,0,0,0-1)

The background image

background-image:url();
background-size:200px 300px;
background-repeat:no-repeat; Ban repeated
Background-position: horizontal percentage Vertical percentage

Display mode display

Block: block level element. It occupies a single line and can change the width and height, such as div H1-H6p
Inline: The width and height of an inline element, which occupies a single line, cannot be changed, including SPAN, B, I, and small
Inline-block: inline block elements that occupy a single line and can change the width and height, such as img and input

Text is related to fonts

Text-decoration: overline/underline/line-through/none
Text-shadow: color x offset y offset concentration (smaller, clearer)
Text color:red;
The high line – height: 20 px; Vertical center can be controlled by row height
Font-size :20px;
Font weight: bold/normal(to remove the bold effect);
Italic font – style: italic;
Font-family: XXX, XXX, XXX; font:30px xx,xxx,xxx;

Three features of the CSS

Inheritance: Elements can inherit the text – and typeage-related styles of their parent elements. Some elements themselves are unaffected by inheritance, such as h1-H6 font size and hyperlink font color.
Cascade: Multiple selectors can be selected to the same element, if the styles added are different, they will all cascade, if the styles added are the same, depending on the priority
Priority: The smaller the scope, the higher the priority. Id > Class > Tag Name > Inheritance (indirect selection)

The box model

Box model = Margin + border + inside margin + width and height
Width and height: Used to control the display size of elements
Border: Controls the border effect of an element
Margin: Controls the display position of elements
Inside margin: Controls the position of element content

Width and height of the box model

Assignment methods: Two

Pixels, in units of px
Percentage of the parent element

If you only set the width the height will scale equally

The width and height of inline elements cannot be modified

Margin outside the box model
What is a margin: The distance an element is from a parent or a neighboring sibling is called a margin
Assignment method:
1. Individual assignment: to a certain direction margin – left/right/top/bottom: 10 px;
2. Margin :50px;
3. Margin :10px 20px;
4. Margin :0 auto;
  
  (Note that this centers the element itself. Text-align :center centers the text inside the element)
5. Margin :10px 20px 30px 40px; clockwise
Take the maximum margin of the two adjacent elements, and sum the left and right adjacent elements
Overflow: Hidden overflow: Hidden overflow: Hidden overflow:hidden overflow:hidden overflow:hidden overflow:hidden overflow:hidden
The elements h1, P, and body have their own margins. Use them carefully.

Border of box model

Assignment method:

Add a border to a single edge: border-left/right/top/bottom: thickness style color;
Add a border to the four directions: thick and thin style color;

Rounded: border-radius: 10px; The larger the value, the rounder it becomes if it is more than half the width and height.

Padding inside the box model
What is inside margin: The distance between an element’s edge and its content is called inside margin.
The assignment is similar to the margin:

Individual assignment: to a certain direction padding – left/right/top/bottom: 10 px;
Four directions: padding:50px;
Padding :10px 20px;
Padding :10px 20px 30px 40px; clockwise

Modifying the inner margin of an element affects its width and height
There are two ways to move a child within an element:

Adding an inner margin to a large element to move a small element inside it changes the size of a large element (not recommended)
Add margins to small elements.

Practice:

1. From the outside

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;/* Remove the 8-pixel margin from the body */
				}
			h1{
					margin-bottom: 0;
					background-color: # 008000;
			}
			p{
				margin-top: 0;
				background-color: #0000FF;
			}
			#big{
				width:200px;
				height:200px;
				background-color: red;
				overflow: hidden;/* Resolve adhesion display exception */
				}
			#small{
				width:50px;
				height:50px;
				background-color: green;
				margin-left: 50px;
				/* Adhesion problem: add to an element when the upper edge of the element overlaps with the upper edge of its parent element. The upper margin will stick. Resolve this by adding overflow:hidden to the parent element
				margin-top: 50px;

				}
			#d1{
				width:100px;
				height:100px;
				background-color: red;
				/* 50 */ in each direction
				/* margin:50px; * /
				/* Around 50px 100px */
				/* margin: 50px 100px; * /
				/* Sets the upper and lower margins of elements to 0 horizontally centered */
				/* margin: 100px auto; * /
				/* Top right, bottom left, clockwise */
				/* margin: 20px 40px 60px 80px; * /
			}
			#d2{
				width:100px;
				height:100px;
				background-color: blue;
				margin-left: 100px;
				margin-top: 50px;
			}
			#s1{
				margin-left: 50px;
				margin-right: 50px;
				/* The upper and lower margins of the line elements are invalid */
				margin-top: 50px;
			}
			#s2{
				/* The left and right adjacent margins are summed and the top and bottom adjacent margins are maximized */
				 margin-left: 30px;
				}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small">
				
			</div>
		</div>
		<h1>This is the h1</h1>
		<span id="s1">This is span1</span>
		<span id="s2">This is span2</span>
		<p>This is the P tag</p>
		<div id="d1"></div>
		<div id="d2"></div>
	</body>
</html>
Copy the code

Display effect:

2. Margins

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width:120px;
				height:80px;
				background-color: red;
				margin-left: 100px;
				overflow: hidden;
				margin-top: 80px;
			}
			#d2{
				width:120px;
				height:80px;
				background-color: blue;
				margin-left: 220px;
			}
			#small{
				width:50px;
				height:40px;
				background-color: yellow;
				margin-left: 70px;
				margin-top: 20px;
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="small">		
			</div>
		</div>
		<div id="d2"></div>
	</body>
</html>
Copy the code

Display effect:

3. The border

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h3{
				 /* Add a border to each direction */
				border-bottom: 1px solid red;
				text-align: center;
			}
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/* The larger the fillet, the more rounded */
				border-radius: 200px;
			}
			a{
				/* Oaaled */
				width: 132px;
				height: 40px;
				background-color: #0aa1ed ;
				display: block;
				text-align: center;
				line-height: 40px;
				color: white ;
				text-decoration: none ;
				border-radius: 3px;
				font-size: 20px;
			}
				
		</style>
	</head>
	<body>
		<a href="#">Check the details</a>
		<h3>Border test</h3>
		<div>This is a div</div>
	</body>
</html>
Copy the code

Test effect:

4. The padding

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1 {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* Adding an inner margin affects the width and height of the element */
				padding-top: 20px;
				padding-left: 50px;
			}

			#d2.#d3 {
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}

			div>div {
				width: 25px;
				height: 25px;
				background-color: green;
			}
			#d2{
			padding: 25px 0 0 25px;
			width: 75px ;
			height: 75px;
			}
			#d3>div{
				/* In addition to adding overflow:hidden to parent elements, adding borders to parent elements can also solve the problem */
				margin: 25px 0 0 25px;
			}

		</style>
	</head>
	<body>
		<div id="d1">Inside margin test</div>
		<div id="d2">
			<div></div>
		</div>
		<div id="d3">
			<div></div>
	</body>
</html>
Copy the code

Test effect:

5. Students mall exercise 1

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font: 12px "simhei",Arial, Helvetica, sans-serif;
				color: # 666;
			}
			a{
				/* Oaaled */
				width: 132px;
				height: 40px;
				background-color: #0aa1ed ;
				display: block;
				text-align: center;
				line-height: 40px;
				color: white ;
				text-decoration: none ;
				border-radius: 3px;
				font-size: 20px;
			}
			#d1>div {
				width: 245px;
				height: 232px;
				margin: 68px 0 0 36px;
			}
			#d1{
				width: 611px;
				height: 376px;
				background-color: #e8e8e8;
				/* Set the background image */
				background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png);
				background-size: 318px 319px;
				background-repeat: no-repeat ;
				background-position: 90% 70%;
				overflow: hidden;
				}
				#p1{
					font-size: 32px;
					color: # 333;
				}
				
				#p3{
					font-size: 24px;
					font-weight: bold;
					color: #0aa1ed;
				}
		</style>
	</head>
	<body>
		<div id="d1">
			<div>
				<p id="p1">Spirit yue Burning 7000 series</p>
				<p id="p2">Dual core i5 processor 256 gb SSD | | 8 gb of memory<br />Intel HD graphics 620 includes shared graphics memory</p>
				<p id="p3">RMB 999999.99</p>
				<a  href="#">Check the details</a>
			</div>
		</div>
	</body>
</html>
Copy the code

Display effect:

6. Students shopping mall exercise 2

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font: 12px "simhei",Arial, Helvetica, sans-serif;
				color: # 666;
			}
			a{
				/* Oaaled */
				width: 132px;
				height: 40px;
				background-color: #0aa1ed ;
				display: block;
				text-align: center;
				line-height: 40px;
				color: white ;
				text-decoration: none ;
				border-radius: 3px;
				font-size: 20px;
			}
			#d1>div {
				width: 253px;
				height: 232px;
				margin: 39px 0 0 25px;
			}
			#d1{
				width: 400px;
				height: 376px;
				background-color: #e8e8e8;
				/* Set the background image */
				background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png);
				background-size: 290px 232px;
				background-repeat: no-repeat ;
				background-position: 90% 90%;
				overflow: hidden;
				}
				#p1{
					font-size: 32px;
					color: # 333;
				}
				#p3{
					font-size: 24px;
					font-weight: bold;
					color: #0aa1ed;
				}
		</style>
	</head>
	<body>
		<div id="d1">
			<div>
				<p id="p1">The appearance is not horizontal frame</p>
				<p id="p2">Dual core i5 processor 256 gb SSD | | 8 gb of memory<br />Intel HD graphics 620 includes shared graphics memory<p id="p3">RMB 999999.99</p>
				<a  href="#">Check the details</a>
			</div>
		</div>
	</body>
</html>
Copy the code

Display effect:

7. Students shopping mall exercise 3

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font: 12px "simhei",Arial, Helvetica, sans-serif;
				color: # 666;
			}
			a{
				/* Oaaled */
				width: 100px;
				height: 24px;
				background-color: #0aa1ed ;
				display: inline-block;
				text-align: center;
				line-height: 24px;
				color: white ;
				text-decoration: none ;
				border-radius: 3px;
				font-size: 12px;
				
			}
			div{
				width: 210px;
				height: 233px;
				background-color: #e8e8e8;
				background-size: 290px 232px;
				background-repeat: no-repeat ;
				background-position: 90% 90%;
				overflow: hidden;
				text-align: center;
				}
				#p1{
					margin: 0;
					font-weight: bold;
				}
				#p2{
					margin:4px;
					font-weight: bold;
					color: #0aa1ed;
				}
		</style>
	</head>
	<body>
		<div>
			<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" >
			<p id="p1">DELL XPS13-9360-R1609 13.3 inch<br>Inch bezel laptop</p>
			<p id="p2">RMB 4600.00</p>
			<a href="#">Check the details</a>
		</div>
	</body>
</html>
Copy the code

Display effect:

To be continued…

Curriculum review

The box model

Margin outside the box model

Padding inside the box model

Related Posts