Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.
CSS based
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<div style="margin: auto; width: 500px; color: gray;">
<p style="text-align:center;">
<span style="background-color: gray; color: white; font-size: 24px;">Internet of Things Engineering</span>
</p>
<p align="left">
<b>Introduction to the</b>
</p>
<p>The Internet of things (<span style="color: red;">Internet of Things</span>The word, widely recognized at home and abroad, was first proposed by Professor Ashton of MITauto-ID Center in 1999 when he studied RFID. In 2005, the International Telecommunication Union (ITU) issued a report of the same name, the definition and scope of the Internet of Things has changed, the coverage has been greatly expanded, no longer just refers to the Internet of Things based on RFID technology. Internet of Things is based on the Internet, traditional telecommunications network and other information carriers, so that all ordinary physical objects can be independently addressed to achieve interconnection network, also known as Internet of Things domain name.</p>
</div>
</body>
</html>
Copy the codeCSS things are put in the style, there are a lot of semicolons, can not forget, (directly associated with C language, every time because semicolons look for a long time)
Div is placed in the body
Margin: Auto center the element itself horizontally
Background-color: gray Sets the background color
Font size: 24px
Color: white Sets the text color
Basic CSS Syntax
h1 {color:red; font-size:14px; }
You can define more than one at a time
h1.h2.h3.h4.h5.h6
{
color: green;
}
Copy the codeCSS derived selector
You can define a label under a label
Those already defined cannot be overridden
The id selector
Class selectors
That’s the # in the ID selector.
CSS styles
background
<style>
body {
color: black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url(1.jpg);
background-position: center;
margin: 0%;
}
</style>
Copy the codebackground-image: url(1.jpg); Insert background image
background-repeat: no-repeat; Don’t spread
background-attachment: fixed; The background image does not slide along with the rest
By default, the Scroll background image will move as the rest of the page scrolls
background-position: center; Image location
background-position:66% 33%; Place an image 2/3 horizontally and 1/3 vertically
margin: 0%;
The text
color:red; color
ext-align:center; alignment
When text-align is set to “justify”, each line is expanded to be of equal width, and the left and right margins are justified (as in magazines and newspapers).
text-decoration:none; Remove the underline of the link
text-indent:50px; Text indentation
Case conversion
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title>Uppercase conversion</title>
<style>
p.uppercase {text-transform:uppercase; }/* Capitalize all letters of each word */
p.lowercase {text-transform:lowercase; }/* All letters of each word are lowercase */
p.capitalize {text-transform:capitalize; }/* Capitalize the first letter of each word */
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
Copy the code
The font
p.normal {font-style:normal; } Normal font
p.italic {font-style:italic; } in italics
p.oblique {font-style:oblique; } in italics
You can add 40px or 1.5em after the font size
link
a:link {color:#000000; } /* Link not accessed */
a:visited {color:#00FF00; } /* Already accessed link */
a:hover {color:#FF00FF; } /* Mouse over the link */
a:active {color:#0000FF; } /* Mouse click */
box
margin: 50px;
border: 25px solid blue;
padding: 50px;
Position Left Top
Relative positioning
1. Relative to your initial position
2. The space is not released after positioning
Absolute absolute positioning
1. Position relative to the most recently located ancestor element if there is no recently located ancestor element relative to the body
2. Release space after positioning
Fixed Fixed position
1. Position relative to visual interface
2. Release space after positioning
Float left right
Clear float clear:left right both
The children of the parent float –> collapse
Solve collapse 1.
div clear:both
Copy the code.clearfix::after{ context:""; //block clear:both display:block; clear:both; }Copy the code3.overflow:hidden
(BFC rule Overflow: Hidden triggers THE BFC rule to render the page float elements also participate in the calculation of height)
layout
Float layout
<style>
.container{width: 800px;height: 200px; }.left{float: left;background: red;width: 200px;height: 100%; }.right{background: blue;margin-left: 200px;height: 100%;padding-left: 10px; }</style>
<body>
<div class="container">
<div class="left">On the left</div>
<div class="right">right</div>
</div>
</body>
Copy the code
Divide it into two columns
Flex layout
Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models.
Properties:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
Property determines the direction of the main axis, (alignment direction), and has four values
flex-direction: row | row-reverse | column | column-reverse;
Copy the code
Row (default) : The main axis is horizontal and the starting point is on the left.
Row-reverse: The main axis is horizontal and the starting point is at the right end.
Column: The main axis is in the vertical direction, and the starting point is in the upper edge.
Column-reverse: the main axis is vertical and the starting point is at the bottom.
flex-wrap
2. The property controls whether or not to wrap a line, and has three values
flex-wrap: nowrap | wrap | wrap-reverse;
Copy the codeNowrap (default) does not wrap, wrap downward, and wrap-reverse upward
flex-flow
It’s a combination of direction and wrap
flex-flow: <flex-direction> || <flex-wrap>;
Copy the codejustify-content
Defines the alignment of items on the main axis, with five values
justify-content: flex-start | flex-end | center | space-between | space-around;
Copy the codeflex-start(Default) : Left-justifiedflex-end: the right alignment,
centerCenter:space-between: Align both ends with equal spacing between items.
space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
align-items
Define how to align on the cross axis, also 5 values, okay
align-items: flex-start | flex-end | center | baseline | stretch;
Copy the codeflex-start: Aligns the starting point of the cross axis.flex-end: Aligns the ends of the intersecting axes.
center: Midpoint alignment of cross axes.baseline: Baseline alignment of the first line of the project.
stretch(Default) : If the item is not set to height or is set to Auto, it will fill the entire container height.
align-content
Defines the alignment of multi-heel axes with 6 values
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Copy the codeflex-start: aligns with the starting point of the crossing axis.flex-endAlign with the endpoint of the intersecting axis.
centerAlign with the midpoint of the intersecting axis.space-between: Aligned with both ends of the cross axes, the spacing between axes is evenly distributed.
space-aroundThe spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.stretch(Default) : Axis takes up the entire cross axis.