css part
sketch
Cascading Style Sheet CSS: responsible for displaying logic
Hyper Text Marked Language HTML: responsible for data logic
CSS has two main functions:
- The font, color and appearance of the page are controlled very carefully to make the web page more dynamic
- Control the style of the whole web page through CSS
CSS can be used as a separate file like HTML, xxx.css, or embedded in HTML
Link external style files
Import the external css file into our current html file through the link tag.
Benefits: separate the data from the display, and the same css file can also be shared by multiple html.
Disadvantages: the browser loads the data information first, then reads the link tag in the data information, and then loads the file imported by link, which is relatively slow
/*In the future, all table s in the html using the css file will have a yellow background and a width of 400px*/
table {
background-color: #ff0;
width: 400px;
}
td {
background-color: #00f;
font-family: "Regular script";
font-size: 20px;
text-shadow: 20px 6px 2px #333;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link href="outer.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>Row by column</td>
<td>One row and two columns</td>
</tr>
<tr>
<td>Two rows and one column</td>
<td>Two rows and two columns</td>
</tr>
</table>
</body>
</html>
Import external style files
Import through @ import, but it is not recommended. Some browsers do not support this operation.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
@import url("outer.css");
</style>
</head>
<body>
<table>
<tr>
<td>Row by column</td>
<td>One row and two columns</td>
</tr>
<tr>
<td>Two rows and one column</td>
<td>Two rows and two columns</td>
</tr>
</table>
</body>
</html>
Use internal style definitions
Benefits: uniform loading, relatively fast
Disadvantages: data and styles are mixed together, which is inconvenient to manage, and css styles are inconvenient to change and share
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
table {
background-color: #ff0;
width: 400px;
}
td {
background-color: #00f;
font-family: "Regular script";
font-size: 20px;
text-shadow: 20px 6px 2px #333;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row by column</td>
<td>One row and two columns</td>
</tr>
<tr>
<td>Two rows and one column</td>
<td>Two rows and two columns</td>
</tr>
</table>
</body>
</html>
Use inline styles
Write directly in the corresponding label style attribute
Disadvantages: excessive redundancy
Advantage: the most targeted, there are always several special forces that don't follow the big forces
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link href="outer.css" rel="stylesheet" type="text/css">
<style>
table {
background-color: rgb(255, 0, 13);
width: 400px;
}
</style>
</head>
<body>
<table >
<tr>
<td style="background-color: #00f;font-family: 'Regular script';font-size: 20px;text-shadow: 20px 6px 2px #333; "> one row and one column</td>
<td style="background-color: #00f;font-family: 'Regular script';font-size: 20px;text-shadow: 20px 6px 2px #333; "> one row and two columns</td>
</tr>
<tr>
<td style="background-color: #00f;font-family: 'Regular script';font-size: 20px;text-shadow: 20px 6px 2px #333; "> two rows and one column</td>
<td style="background-color: #00f;font-family: 'Regular script';font-size: 20px;text-shadow: 20px 6px 2px #333; "> two rows and two columns</td>
</tr>
</table>
</body>
</html>
CSS selector
name {
Attributes: attribute values;
...
}
What is the function of the selector? Specify some elements that meet the requirements for style changes
element selector
Select element label
Tag name {
Attributes: attribute values;
...
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
table {
background-color: #ff0;
width: 400px;
}
td {
background-color: #00f;
font-family: "Regular script";
font-size: 20px;
text-shadow: 20px 6px 2px #333;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row by column</td>
<td>One row and two columns</td>
</tr>
<tr>
<td>Two rows and one column</td>
<td>Two rows and two columns</td>
</tr>
</table>
</body>
</html>
attribute selectors
Select according to the characteristics of the attributes in the tag
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<link href="outer.css" rel="stylesheet" type="text/css">
<style>
/*All div s*/
div {
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
/*div with id attribute*/
div[id] {
background-color: #aaa;
}
/*div with id attribute and xx in id attribute value*/
div[id*=xx] {
background-color: #999;
}
/*div with id attribute and id attribute value starting with xx*/
div[id^=xx] {
background-color: #555;
}
/*div with id attribute and ending with xx in id attribute value*/
div[id$=xx] {
background-color: #333;
}
/*div with id attribute and id attribute value equal to xx*/
div[id=xx] {
background-color: #111;
color: aliceblue;
}
</style>
</head>
<body>
<div>Without any properties div</div>
<div id="a">belt id Attribute div Properties and xx irrelevant</div>
<div id="zzxxyy">belt id Property but contains xx of div</div>
<div id="xxyy">belt id Property and in xx initial div</div>
<div id="zzxx">belt id Property and in xx Ending div</div>
<div id = "xx">belt id Property and equal to xx of div</div>
</body>
</html>
id selector
Select by id value
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div {
width: 200px;
height: 30px;
background-color: #ddd;
padding: 10px;
}
/*id Tags for xx*/
#xx {
border: 2px dotted lightblue;
background-color: tomato;
}
/*id p tag for xx*/
p#xx {
border: 2px dotted aqua;
background-color: indigo;
}
/*id p label for yy*/
p#yy {
border: 2px dotted rgb(0, 255, 157);
background-color: rgb(235, 252, 8);
}
</style>
</head>
<body>
<div>
It has nothing to do with me
</div>
<div id="xx">
my id yes xx
</div>
<p id="xx">
I am p
</p>
<div id="yy">
I am yy of div
</div>
<p id="yy">
I am p
</p>
</body>
</html>
Class selector
The class selector mainly focuses on the class attribute. Basically, each tag has id, class and style attributes
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
/*All tags whose class attribute is myclass*/
.myclass {
width: 240px;
height: 40px;
background-color: #ddd;
}
/*class div tag with attribute myclass*/
div.myclass {
border: 1px double black;
background-color: #888;
}
</style>
</head>
<body>
<div class="myclass">
class Attribute is myclass of div
</div>
<p class="myclass">
class Attribute is myclass of p
</p>
</body>
</html>
Descendant Selectors
It refers to the selection of all elements under an element
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div {
width: 300px;
background-color: #ddd;
margin: 5px;
}
/*All tags with class a under div*/
div .a{
width: 200px;
background-color: #888;
border: 1px dotted lightcoral;
}
/*All section labels under div*/
div section {
border: 10px solid yellow;
}
</style>
</head>
<body>
<div>
Without any elements div
</div>
<div>
<p class="a">
stay div Medium p，class by a
</p>
<section>
<div class="a">
stay seciton Medium div class by a
</div>
</section>
</div>
<section>
<div>
stay section Medium div
</div>
</section>
</body>
</html>
Child selectors
Paternity
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div {
width: 350px;
height: 60px;
background-color: #ddd;
margin: 5px;
}
/*div All sub tags with class attribute a under the tag*/
div>.a {
width: 200px;
height: 35px;
border: 1px dotted black;
background-color: #888;
}
/*div All span sub tags under the tag*/
div>span{
font-family: "Regular script";
font-size: 20px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<p class="a">
I am div Medium p class by a
</p>
</div>
<div>
<section>
<p class="a">
I am div Medium seciton Medium p class by a
</p>
</section>
</div>
<div>
<span>I am span1</span>
<span>I am span2</span>
<p>
<span>I am span3</span>
</p>
</div>
</body>
</html>
Sibling Combinators
Same level
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
#android ~ .long {
background-color: khaki;
}
</style>
</head>
<body>
<div class="long">Hehe 1</div>
<div id="android">Hehe 2</div>
<div class="long">Hehe 3</div>
<p class="long">Hehe 4</p>
<p class="long">Hehe 5</p>
</body>
</html>
Selector combination
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div , #xx , .myclass {
width: 200px;
height: 20px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>div</div>
<p id="xx">p</p>
<span class="myclass">span</span>
</body>
</html>
Pseudo element selector
Something that is not an element, but can also be changed
- : first letter: initial letter. It is only for block level elements. If you want to use it on inline elements, you can either specify the width and height, set the position attribute to absolute, or define the display attribute as block
- : first line: the first line is only for block level elements. If you want to use inline elements, either specify the width and height, set the position attribute to absolute, or define the display attribute as block
- : before: before element
- : After: after element
Acronymic
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
span {
display: block;
}
span::first-letter {
color: #f00;
font-size: 50px;
}
p::first-letter {
color: #f00;
font-size: 50px;
}
</style>
</head>
<body>
<span>This is span</span>
<p>This is p</p>
</body>
</html>
Change first line
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
span {
display: block;
}
span::first-line {
color: #f00;
font-size: 50px;
}
p::first-line {
color: #f00;
font-size: 50px;
}
</style>
</head>
<body>
<span>This is span first line<br>Second line</span>
<p>This is p first line<br>Second line</p>
</body>
</html>
before and after are used in combination with the content attribute
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
div::before {
content:"This is a div"
}
div::after {
content: url("logo.jpg");
}
div>div.no:after {
content:"cattle B Plus";
}
p {
counter-increment: pcounter;
}
p::before {
content: "The first" counter(pcounter) "page";
}
p::after {
content: counter(pcounter,lower-roman);
}
/*decimal lower-alpha lower-roman upper-xx*/
</style>
</head>
<body>
<div>div01</div>
<div>div02</div>
<div>div03</div>
<div>
<div class="no">
Is it me?
</div>
</div>
<p>This is the first end</p>
<p>This is the second end</p>
<p>This is the third end</p>
<p>This is the fourth end</p>
</body>
</html>
Pseudo class selector
Label status!
- : link: before clicking the hyperlink
- : visited: after hyperlink access
- : hover: when the mouse hovers
- : active: when clicked
- : focus: when getting focus
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<style>
a:link {
color: red;
font-size: 30px;
}
a:visited {
color: gray;
font-size: 30px;
}
a:hover {
color: greenyellow;
font-size: 50px;
}
a:active {
color: yellow;
font-size: 30px;
}
img:hover {
width: 100px;
}
</style>
</head>
<body>
<a href="http://Www.123. Com "> hehe hehe</a>
<div>
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
<img src="logo.jpg" width="80px">
</div>
</body>
</html>
Text and text related attributes
Text related attributes
- Color: the color of the text
- Font family: font of text
- Font size: text size px or pt (unit in printer mode)
- Font weight: bold text
- lighter: thin
- Normal: normal, default
- bold: bold
- bolder: thicker
- set value
- Font decoration: text underline
- none no style
- Underline underline
- Line through: middle dash
- Overline: overline
- Blink: blink (not supported by current browsers)
- Font style: the style of text
- Text shadow: Shadow compound attribute of text
- color: Shadow color
- xoffset: the offset of the shadow landscape is positive to the right
- yoffset: the vertical offset of the shadow is positive downward
- radius: the degree of blur of the shadow
- Text transform: case of text (English)
- none default
- capitalize: initial capitalization
- uppercase: all letters are capitalized
- Lowercase: all letters are lowercase
- Line height: the line height of the text
- Letter spacing: spacing between characters
- Word spacing: spacing between words
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 150px;
height: 40px;
border: 1px solid red;
font-size: 20px;
font-family: 'official script';
}
</style>
</head>
<body>
<span style="color: blue;">Test text</span><br>
<span style="color: #FFF; "> test text < / span > < br >
<span style="color: #123456; "> test text < / span > < br >
<span style="color: rgb(255, 0, 0);">Test text</span><br>
<span style="color: rgba(255, 0, 0, 0.5);">Test text</span><br>
<span style="color: hsl(280, 100%, 50%);">Test text</span><br>
<span style="color: hsla(280, 100%, 50%, 0.5);">Test text</span><br>
<span style="font-family: 'Regular script';">Test text</span><br>
<span style="font-family: 'Chinese block letters';">Test text</span><br>
<span style="font-family: 'Immature';">Test text</span><br>
<span style="font-size: 20pt;">Test text</span><br>
<span style="font-style:italic;">Test text</span><br>
<span style="font-style: oblique;">Test text</span><br>
<span style="font-weight: lighter;">Test text</span><br>
<span style="font-weight: bold;">Test text</span><br>
<span style="font-weight: bolder;">Test text</span><br>
<span style="font-weight: 300px;">Test text</span><br>
<span style="text-decoration: underline;">Test text</span><br>
<span style="text-decoration: overline;">Test text</span><br>
<span style="text-decoration: line-through;">Test text</span><br>
<span style="text-decoration: blink;">Test text</span><br>
<span style="text-transform: lowercase;">
Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk
</span><br>
<span style="text-transform: uppercase;">
Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk
</span><br>
<span style="text-transform: capitalize;">
Hjjkh HKJgkjh Uasjdkjahsd Ukjlsjdla klkjklasdjlk
</span><br>
<span style="line-height: 50px;">Test text</span><br>
<span style="letter-spacing:10px;">
Hello eveyone my name is zhangsan how are you<br>
I am fine 3Q~
</span><br>
<span style="word-spacing:10px;">
Hello eveyone my name is zhangsan how are you<br>
I am fine 3Q~
</span><br>
<hr>
<!--x Offset y Offset shadow blur color-->
<div style="text-shadow: 10px 10px 2px red;">
Test text
</div>
<div style="text-shadow: 10px 10px 10px red;">
Test text
</div>
<div style="text-shadow: -10px -10px 2px red;">
Test text
</div>
<div style="text-shadow: 0px 0px 10px red;color: red;">
Test text
</div>
<div style="text-shadow: 10px 10px 0px red , 20px 20px 0px yellow, 30px 30px 0px blue;">
Test text
</div>
</body>
</html>
Text related attributes
- Text indent: indent of text
- Text overflow: text overflow
- clip overflow clipping, precondition overflow: hidden
- ellipse overflow clipping. The clipped part is represented by... With the premise overflow: hidden
- Vertical align: vertical alignment
- auto: auto align
- Baseline: baseline alignment
- sub: align with text subscript
- super: align with text superscript
- top: top alignment
- Middle: middle alignment
- bottom: low end alignment
- length: offset distance
- Text align: horizontal alignment
- left
- right
- center
- justify both ends
- Work break: text wrapping
- normal: Browser dependent newline behavior
- Keep all: line breaks can only be made in half width spaces or hyphens
- Break all: allow line breaks between words
- White space: how spaces are handled - what is line feed
- normal: the default is to wrap lines after reaching the container boundary
- nowrap: force the same line until the end. If < br > is encountered, wrap the line again
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 1px solid red;
width: 200px;
height: 50px;
font-size: 15px;
}
</style>
</head>
<body>
<div>
Test text, test text, test text, test text
</div>
<div style="text-indent: 20px;">
Test text, test text, test text, test text
</div>
<div style="text-align: left;">
Test text, test text, test text, test text
</div>
<div style="text-align: center;">
Test text, test text, test text, test text
</div>
<div style="text-align: right;">
Test text, test text, test text, test text
</div>
<div style="white-space: normal;">
Test text, test text, test text, test text
</div>
<div style="white-space: nowrap;">
Test text, test text, test text, test text
</div>
<div style="white-space: nowrap;overflow:hidden;text-overflow: clip;">
Test text, test text, test text, test text
</div>
<div style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
Test text, test text, test text, test text
</div>
<div style="word-break: keep-all;">
Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.
</div>
<div style="word-break: break-all;margin-top: 50px;">
Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.
</div>
</body>
</html>
Background and border related properties
Background related attributes
-
Background: it is a composite attribute. You can set the background color, background image and background image repetition mode
-
Background color: background color
-
Background image: background image
Background size: 100% full coverage of background image
-
Background attachment: whether the background image can be scrolled
- scroll: scroll
- Fixed: fixed
-
Background position: the position of the background image
-
Background repeat: tiling
- repeat horizontal and vertical tiling
- No repeat not tiled
- repeat-x: tile horizontally
- repeat-y: tile vertically
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 1px solid red;
height: 200px;
width: 200px;
color: aqua;
}
</style>
</head>
<body style="background-image: url(bg.jpg);background-attachment: fixed;">
<div style="background-color: beige;">
Test picture
</div>
<div style="background-image: url(logo.jpg);">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: repeat;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: repeat-x;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: repeat-y;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 50% 50%;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 10% 10%;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: 50px 50px;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: right center;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-position: right bottom;">
Test picture
</div>
</body>
</html>
Several new attributes
- Background clip: the coverage of the background
- Border box: covers the contents of the inner margin of the border
- No clip: same as above
- Padding box: inner margin content
- Content box: content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 10px dotted red;
padding: 20px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url(logo.jpg);">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-clip: border-box;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-clip: padding-box;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-clip: content-box;">
Test picture
</div>
</body>
</html>
- Background origin: the beginning of background coverage
- Border: start from border
- padding: starts from the inner margin
- Content: start from the content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 10px dotted red;
padding: 20px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url(logo.jpg);">
Test picture
</div>
<div style="background-image: url(logo.jpg);-webkit-background-origin: border;background-repeat: no-repeat;">
Test picture
</div>
<div style="background-image: url(logo.jpg);-webkit-background-origin: padding;background-repeat: no-repeat;">
Test picture
</div>
<div style="background-image: url(logo.jpg);-webkit-background-origin: content;background-repeat: no-repeat;">
Test picture
</div>
</body>
</html>
- Background size: the size of the background picture
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 10px dotted red;
padding: 20px;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div style="background-image: url(logo.jpg);">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size:50% 50%;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: auto;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: 80% auto;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: auto 30%;">
Test picture
</div>
<div style="background-image: url(logo.jpg);background-repeat: no-repeat;
background-size: 100% 100%;">
Test picture
</div>
</body>
</html>
Multi background settings
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
border: 1px solid red;
height: 200px;
width: 200px;
background-image: url(logo.jpg),url(bg.jpg);
background-repeat: no-repeat,no-repeat;
background-position: center center,left center;
background-size: 50% 50%, 80% 80%;
}
</style>
</head>
<body>
<div>
Test picture
</div>
</body>
</html>
Border related properties
- Border: the composite attribute can set the border thickness, linetype and color
- border-width
- border-style
- none
- hidden
- dotted point
- dashed dotted line
- Solid solid line
- Double double solid line
- Groove: 3D groove
- ridge: 3D convex groove
- inset: 3D concave
- Outlet: 3D bulge
- border-color
- border-top|right|left|bottom-width|style|color
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
margin-top: 20px;
height: 100px;
width: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div style="border: 5px solid #666;">
Test text
</div>
<div style="border: 5px dashed #666;">
Test text
</div>
<div style="border: 5px double #666;">
Test text
</div>
<div style="border: 5px groove #666;">
Test text
</div>
<div style="border: 5px ridge #666;">
Test text
</div>
<div style="border: 5px inset #666;">
Test text
</div>
<div style="border: 5px outset #666;">
Test text
</div>
<div style="border-width: 5px;border-color: chartreuse;border-style: solid;">
Test text
</div>
<!--5px Up and down 10 px about-->
<div style="border-width: 5px 10px;border-color: chartreuse;border-style: solid;">
Test text
</div>
<!--5px Top 10 px Left and right 15 px lower-->
<div style="border-width: 5px 10px 15px;border-color: chartreuse;border-style: solid;">
Test text
</div>
<!--5px Top 10 px Right 15 px Lower 20 px Left-->
<div style="border-width: 5px 10px 15px 20px;border-color: chartreuse;border-style: solid;">
Test text
</div>
<div style="border-width: 5px 10px 15px 20px;
border-color: #111 #555 #999#CCC;
border-style: solid dashed dotted double;">
Test text
</div>
<div style="border: 2px solid red;border-radius: 5px;">
Test text
</div>
<div style="border: 2px solid red;border-radius: 10px;">
Test text
</div>
<div style="border: 2px solid red;border-radius: 15px;">
Test text
</div>
<div style="border: 2px solid red;border-radius: 5px 10px 15px 20px;">
Test text
</div>
<div style="border: 2px solid red;
border-top-left-radius: 5px;border-top-right-radius: 10px;
border-bottom-right-radius: 15px;border-bottom-left-radius: 20px;">
Test text
</div>
</body>
</html>
Table and list related attributes
Table related attributes
- Border collapse: display method of border of shipping cell
- seperate
- collapse merge
- Border spacing: the distance between cells, provided that they are separated
- Caption side: the position of the table title top bottom
- Empty cells: whether to display empty cells
- show
- hide
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
table {
width: 400px;
border: 1px solid black;
}
td {
background-color: #ccc;
border: 1px solid black;
}
</style>
</head>
<body>
<table style="border-collapse: collapse;caption-side: bottom;">
<caption>Table title</caption>
<tr>
<td>Ha ha ha ha ha ha ha</td>
<td>Hehe hehe hehe</td>
</tr>
<tr>
<td>Hee hee hee hee hee</td>
<td>Hey, hey, hey, hey, hey</td>
</tr>
</table>
<table style="border-collapse: separate;empty-cells: hide;">
<caption>Table title</caption>
<tr>
<td>Ha ha ha ha ha ha ha</td>
<td>Hehe hehe hehe</td>
</tr>
<tr>
<td>Hee hee hee hee hee</td>
<td></td>
</tr>
</table>
<table style="border-collapse: separate;empty-cells: hide;border-spacing: 10px;">
<caption>Table title</caption>
<tr>
<td>Ha ha ha ha ha ha ha</td>
<td>Hehe hehe hehe</td>
</tr>
<tr>
<td>Hee hee hee hee hee</td>
<td></td>
</tr>
</table>
</body>
</html>
- Table layout: the layout of table width is auto fixed
In the case of fixed:
- Set the width through col or colgroup. The width of the table is the sum of the widths of all columns
- Set the width of all cells in the first row. The marked width is the sum of the cell widths in the first row
- Direct average distribution, ignoring the actual width
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
table {
width: 400px;
border: 1px solid black;
table-layout: fixed;
}
td {
background-color: #ccc;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>Ha ha ha ha ha ha ha</td>
<td>Interesting</td>
</tr>
<tr>
<td>Hee hee hee hee hee</td>
<td>Hey, hey, hey</td>
</tr>
</table>
<table>
<col style="width:250px">
<col style="width: 50px;">
<tr>
<td>Ha ha ha ha ha ha ha</td>
<td>Interesting</td>
</tr>
<tr>
<td>Hee hee hee hee hee</td>
<td>Hey, hey, hey</td>
</tr>
</table>
<table>
<tr>
<td style="width: 250px;">Ha ha ha ha ha ha ha</td>
<td style="width: 50px;">Interesting</td>
</tr>
<tr>
<td>Hee hee hee hee hee</td>
<td>Hey, hey, hey, hey, hey, hey, hey, hey, hey, hey, hey</td>
</tr>
</table>
</body>
</html>
List related properties
- List style: compliance attribute
- List style image: display the list number as a picture
- List style position: the position of the number is before the element, outside is inside the element
- List style type: list number text style
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
li {
background-color: crimson;
margin: 5px;
}
</style>
</head>
<body>
<ul style="list-style-image: url(logo.jpg);">
<li>coming</li>
<li>Well, here we are</li>
<li>Come on</li>
<li>come</li>
</ul>
<ul style="list-style-image: url(logo.jpg);list-style-position: inside;">
<li>coming</li>
<li>Well, here we are</li>
<li>Come on</li>
<li>come</li>
</ul>
<ol style="list-style-type:cjk-ideographic">
<li>coming</li>
<li>Well, here we are</li>
<li>Come on</li>
<li>come</li>
</ol>
</body>
</html>
Control cursor related properties
- cursor: user controls the style of the mouse
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
display: inline-block;
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div style="cursor: all-scroll;">
Cross arrow
</div>
<div style="cursor: col-resize;">
Column stretch
</div>
<div style="cursor: crosshair;">
cross
</div>
<div style="cursor: move;">
movement arrows
</div>
<div style="cursor: help;">
Help question mark
</div>
<div style="cursor:no-drop">
No dragging
</div>
<div style="cursor:not-allowed">
not allow-prohibit
</div>
<div style="cursor:pointer">
finger
</div>
<div style="cursor:progress">
Circle progress
</div>
<div style="cursor:row-resize">
Horizontal stretching
</div>
<div style="cursor:text">
insert text
</div>
<div style="cursor:vertical-text">
Insert text vertically
</div>
<div style="cursor:wait">
Circle progress
</div>
<div style="cursor:n-resize">
North South stretching
</div>
<div style="cursor:ne-resize">
Northeast stretch
</div>
<div style="cursor:se-resize">
Southeast stretch
</div>
</body>
</html>
Deformation and animation related attributes
Deformation related attributes
It is mainly used to control the rotation, displacement, tilt and scaling of components. It can also use matrix for deformation processing
- transform: set deformation
- translate(tx,ty): set the displacement. The component moves laterally from the current position. tx moves longitudinally. The ty value can be ignored. Both the horizontal and longitudinal movements are tx
- translateX(tx)
- translateY(ty)
- scale(sx,sy): set the scale. sy can be ignored. sx is the default
- scaleX(sx)
- scaleY(sy)
- skew(sx,sy): set tilt. sx and sy are angle values. Sy can be ignored. The default is sx
- skewX(sx)
- skewY(sy)
- rotate(angle): rotate angle
- Transform origin: the base point of the deformation
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 60px;
height: 60px;
background-color: aqua;
margin: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
Test deformation
</div>
<div style="transform: rotate(30deg);">
Test deformation
</div>
<div style="transform: translate(10px,10px)">
Test deformation
</div>
<div style="transform: scale(1.2);">
Test deformation
</div>
<div style="transform: scale(1.5,0.5);">
Test deformation
</div>
<div style="transform: skew(30deg);">
Test deformation
</div>
<div style="transform: rotate(60deg) skew(45deg) scale(1.2,0.8) translate(10px,10px);">
Test deformation
</div>
<div style="transform: skew(45deg) scale(1.2,0.8) translate(10px,10px) rotate(60deg);">
Test deformation
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 60px;
height: 60px;
background-color: aqua;
margin: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
Test deformation
</div>
<div style="transform: rotate(30deg);">
Test deformation
</div>
<div style="transform: translate(10px,10px)">
Test deformation
</div>
<div style="transform: scale(1.2);">
Test deformation
</div>
<div style="transform: scale(1.5,0.5);">
Test deformation
</div>
<div style="transform: skew(30deg);">
Test deformation
</div>
<div style="transform: rotate(60deg) skew(45deg) scale(1.2,0.8) translate(10px,10px);">
Test deformation
</div>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<div>
Test deformation
</div>
<div style="transform: rotate(45deg);">
Test deformation
</div>
<div>
Test deformation
</div>
<div style="transform-origin: left center; transform: rotate(45deg);">
Test deformation
</div>
<div>
Test deformation
</div>
<div style="transform-origin: right center; transform: rotate(45deg);">
Test deformation
</div>
<div>
Test deformation
</div>
<div style="transform-origin: left bottom; transform: rotate(30deg);">
Test deformation
</div>
</body>
</html>
</body>
</html>
Patching animation
When a property of a control component changes, it will change over a period of time. This process is Transition animation - gap animation
- Transition property: property for
- Transition duration: duration of change
- Transition timing function: gradient speed
- ease: slow fast slow
- linear: uniform velocity
- Ease in: slow fast
- Ease out: fast slow
- Cubic Bezier (x1, Y1, X2, Y2): Bezier curve control
- Transition delay: delay time
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: green;
margin: 10px;
transition: background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
div:hover {
background-color: yellow;
}
img {
position: absolute;
transition: left 3s linear , top 3s linear;
}
p {
width: 300px;
height: 100px;
background-color: red;
transition: background-color 2s ease,width 2s ease,height 2s ease;
}
</style>
</head>
<body>
<div>
Test the animation of the background color
</div>
<img id="aim" src = "logo.jpg">
<script>
//Find the object of the picture label first
var aim = document.getElementById("aim");
aim.style.left = "0px";
aim.style.top = "0px";
//Set global click events
document.onmousedown = function(evt) {
aim.style.left = evt.pageX + "px";
aim.style.top = evt.pageY + "px";
}
</script>
<p id = "lala">
Test the animation effect of the three attributes
</p>
<script>
var originWidth = 300;
var originHeight = 100;
var lala = document.getElementById("lala");
var zoom = function(scale,bgColor) {
lala.style.width = originWidth * scale + "px";
lala.style.height = originHeight * scale + "px";
lala.style.backgroundColor = bgColor;
}
</script>
<button onclick="zoom(1.5,'blue')">enlarge</button>
<button onclick="zoom(0.5,'yellow')">narrow</button>
<button onclick="zoom(1.0,'red')">recovery</button>
</body>
</html>
Animation animation properties
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=gbk">
<style>
@keyframes animation01 {
0% {
left: 100px;
}
10% {
left: 150px;
}
20% {
left: 75px;
}
30% {
left: 150px;
}
40% {
left: 75px;
}
50% {
left: 150px;
}
60% {
left: 75px;
}
70% {
left: 150px;
}
80% {
left: 75px;
}
100% {
left:100px;
}
}
div {
background-color: gray;
border: 1px solid red;
position: absolute;
left: 100px;
width: 200px;
height: 60px;
}
div:hover {
animation-name: animation01;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes animation02 {
0% {
transform: rotate(0deg) scale(1);
background-color: #f00;
}
40% {
transform: rotate(720deg) scale(0.1);
background-color: #ff0;
}
60% {
transform: rotate(1080deg) scale(4);
background-color: #f0f;
}
100% {
transform: rotate(0deg) scale(1);
background-color: #f00;
}
}
p {
background-color: #f00;
border: 1px solid black;
width: 60px;
height:60px;
}
p:hover {
animation-name: animation02;
animation-duration: 8s;
animation-iteration-count: 1;
}
</style>
</head>
<body>
<div>
Animation01
</div>
<p>
Animation02
</p>
</body>
</html>
Case - rotating Tai Chi
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
* {
margin: 0;
padding: 0;
background-color: #ccc;
}
@keyframes taijirotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.taiji {
width: 0px;
height: 300px;
border-left: 150px solid white;
border-right: 150px solid black;
border-radius: 50%;
animation: taijirotate 3s linear infinite;
}
.taiji::before {
display: block;
content: "";
background-color: white;
width: 50px;
height: 50px;
border: 50px solid black;
border-radius: 50%;
margin-left: -72px;
}
.taiji::after {
display: block;
content: "";
background-color: black;
width: 50px;
height: 50px;
border: 50px solid white;
border-radius: 50%;
margin-left: -72px;
}
</style>
</head>
<body>
<div class="taiji">
</div>
</body>
</html>
Case - 3D image cube
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
/*Turn on 3D sight distance. If there is no sight distance, the 3D effect cannot be seen through*/
body {
perspective: 5000px;
}
@keyframes myanimation {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.container {
width: 200px;
height: 200px;
margin: 300px auto;
position: relative;
/*Display effect in 3D*/
transform-style: preserve-3d;
animation: myanimation 5s linear infinite;
}
.container>img {
width: 200px;
height: 200px;
position: absolute;
}
.container>img:first-child {
/*Bottom photo*/
transform: translateZ(-200px);
}
.container>img:last-child {
/*Top*/
}
.container>img:nth-child(2) {
/*left*/
left:-200px;
transform-origin: right;
transform: rotateY(-90deg);
}
.container>img:nth-child(3) {
/*Above*/
top:-200px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.container>img:nth-child(4) {
/*right*/
right:-200px;
transform-origin: left;
transform: rotateY(90deg);
}
.container>img:nth-child(5) {
/*Below*/
bottom:-200px;
transform-origin: top;
transform: rotateX(-90deg);
}
.container:hover img:first-child {
transform: translateZ(-300px);
}
.container:hover img:last-child {
transform: translateZ(100px);
}
.container:hover img:nth-child(2) {
transform: rotateY(-90deg) translateZ(100px);
}
.container:hover img:nth-child(3) {
transform: rotateX(90deg) translateZ(100px);
}
.container:hover img:nth-child(4) {
transform: rotateY(90deg) translateZ(100px);
}
.container:hover img:nth-child(5) {
transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="container">
<img src="img/mv1.jpg">
<img src="img/mv2.jpg">
<img src="img/mv3.jpg">
<img src="img/mv4.jpg">
<img src="img/mv5.jpg">
<img src="img/mv6.jpg">
</div>
</body>
</html>
Box model and layout related properties
Layout related properties
- Float: controls whether and how the target component floats. If a component is set to float, the component is treated as a block level element.
- Left: float left
- Right: right float
- clear: sets whether other floating objects are allowed on the left and right of the component
- none both sides are allowed
- left not allowed
- Right right is not allowed
- Neither side of the bot is allowed
- overflow: how to deal with the remaining content when the component content is not enough
- visible does not clip or add scroll bars by default
- auto automatically adds a scroll bar if it cannot fit
- hidden clip out
- scoll: always show scroll bar
- overflow-x: controls the overflow in the horizontal direction
- overflow-y: controls the overflow in the vertical direction
- visibility: whether the component is displayed. If not, the space occupied by it still exists
- display: sets how components are displayed
Floating problem
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
border: 1px solid black;
width: 300px;
height: 80px;
padding: 5px;
}
</style>
</head>
<body>
<div style="float: left;">
div Element 1
</div>
<div style="float: left;">
div Element 2
</div>
<div style="float: right;">
div Element 3
</div>
<div style="float: right;">
div Element 4
</div>
</body>
</html>
Multi column layout with float attribute
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1080px;
margin: auto;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div style="float: left;width: 220px;">
<h2>First column</h2>
<p>
The scenery of northern China is frozen for thousands of miles and snowy for thousands of miles. When you look inside and outside the Great Wall, you can only be reckless. Up and down the river, you suddenly lose the surging, dancing silver snakes and galloping wax elephants. If you want to compete with the Duke of heaven, you must have a sunny day. You can see that you are wrapped in red and plain, which is extremely enchanting. There are so many charming rivers and mountains, which has attracted countless heroes to bow down. You cherish the Qin emperor, Han Emperor and Wu, and lose a little literary talent. Tang Zong and Song Zu are a little less coquettish. A generation of Tianjiao, Genghis Khan, I only know how to shoot big sculptures with a bow. I'm going to count romantic figures and look at the present.
</p>
</div>
<div style="float: left;width: 500px;">
<h2>Second column</h2>
<ul>
<li><a href="#"> hottest news</a></li>
<li><a href="#"> domestic news</a></li>
<li><a href="#"> International News</a></li>
<li><a href="#"> Entertainment News</a></li>
</ul>
</div>
<div style="float: left;width: 240px;">
<h2>Column 3</h3>
<figure>
<figcaption>Beauty pictures</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
The clear attribute implements line wrapping
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div>div {
width: 220px;
padding: 5px;
margin: 2px;
float: left;
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<div>
div Element 1
</div>
<div>
div Element 2
</div>
<div style="clear: both;">
div Element 3
</div>
<div>
div Element 4
</div>
</div>
</body>
</html>
Scroll bar problem
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div>div {
white-space: nowrap;
width: 200px;
height: 50px;
padding: 5px;
margin: 50px;
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<div>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
</div>
<div style="overflow: hidden;">
div Element 2 div Element 2 div Element 2 div Element 2 div Element 2 div Element 2 div Element 2 div Element 2 div Element 2 div Element 2 div Element 2<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
</div>
<div style="overflow: auto;">
div Element 3 div Element 3 div Element 3 div Element 3 div Element 3 div Element 3 div Element 3 div Element 3 div Element 3 div Element 3 div Element 3<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
</div>
<div style="overflow-x: hidden;">
div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
</div>
<div style="overflow-y: hidden;">
div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4 div Element 4<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1 div Element 1<br>
</div>
</div>
</body>
</html>
Box model and display attribute
Two basic box models:
- Block: block level element, occupying one line, and width and height div p can be set
- Inline: inline elements do not occupy one line. Multiple inline elements are in the same line. If they cannot be placed, they will be wrapped. span a img cannot be set
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
</head>
<body>
<div style="display: inline;">div element</div>
<div style="display: inline;">div element</div>
<span style="display: block;">span element</span>
<span style="display: block;">span element</span>
</body>
</html>
- none value hidden
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
width: 300px;
height: 40px;
background-color: #ddd;
border:1px solid black;
}
</style>
</head>
<body>
<div id="test1">
div01
</div>
<input type="button" value="display"
onclick="document.getElementById('test1').style.display=''">
<input type="button" value="hide"
onclick="document.getElementById('test1').style.display='none'">
<div id="test2">
div02
</div>
<input type="button" value="display"
onclick="document.getElementById('test2').style.visibility='visible'">
<input type="button" value="hide"
onclick="document.getElementById('test2').style.visibility='hidden'">
</body>
</html>
- Inline block: it does not occupy one line, but the width and height can also be set
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1080px;
margin: auto;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 220px;">
<h2>First column</h2>
<p>
The scenery of northern China is frozen for thousands of miles and snowy for thousands of miles. When you look inside and outside the Great Wall, you can only be reckless. Up and down the river, you suddenly lose the surging, dancing silver snakes and galloping wax elephants. If you want to compete with the Duke of heaven, you must have a sunny day. You can see that you are wrapped in red and plain, which is extremely enchanting. There are so many charming rivers and mountains, which has attracted countless heroes to bow down. You cherish the Qin emperor, Han Emperor and Wu, and lose a little literary talent. Tang Zong and Song Zu are a little less coquettish. A generation of Tianjiao, Genghis Khan, I only know how to shoot big sculptures with a bow. I'm going to count romantic figures and look at the present.
</p>
</div>
<div style="width: 500px;">
<h2>Second column</h2>
<ul>
<li><a href="#"> hottest news</a></li>
<li><a href="#"> domestic news</a></li>
<li><a href="#"> International News</a></li>
<li><a href="#"> Entertainment News</a></li>
</ul>
</div>
<div style="width: 240px;">
<h2>Column 3</h3>
<figure>
<figcaption>Beauty pictures</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
Navigation style
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body>div {
text-align: center;
margin: auto;
}
div>div {
display: inline-block;
border:1px solid black;
width: 100px;
height: 50px;
}
a {
text-decoration: none;
/**/
display: block;
width: 100px;
height: 50px;
background-color: #eee;
}
a:hover {
background-color: #aaa;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div>
<a href="#"> Baidu</a>
</div>
<div>
<a href="#"> Baidu</a>
</div>
<div>
<a href="#"> Baidu</a>
</div>
<div>
<a href="#"> Baidu</a>
</div>
</div>
</body>
</html>
- Inline table box model
Make table an inline element
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
table {
border: 1px solid black;
display: inline-table;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
Previous content
<table>
<tr>
<td>Hehe hehe</td>
<td>Hehe hehe</td>
</tr>
<tr>
<td>Hehe hehe</td>
<td>Hehe hehe</td>
</tr>
</table>
What follows
</body>
</html>
Table related box model
- Table: displays components as table styles
- Table caption: displays the component as a table header style
- Table cell: displays components as cell styles
- Table row: displays the component as a row style
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div>div>div{
display: table-cell;
border: 1px solid black;
}
</style>
</head>
<body>
Previous content
<div style="display: table;border: 1px solid black;width: 400px;">
<div style="display: table-caption;">Table title</div>
<div>
<div>Hehe hehe</div>
<div>Hehe hehe</div>
</div>
<div>
<div>Hehe hehe</div>
<div>Hehe hehe</div>
</div>
</div>
What follows
</body>
</html>
Shadow the box model
- Box shadow properties
- Hiffset: horizontal offset
- vOffset: vertical offset
- Blur length: the blur level of the shadow
- scaleLength: the scale of the shadow
- Color: the color of the shadow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
width: 300px;
height: 50px;
border: 1px solid black;
margin-top: 30px;
}
</style>
</head>
<body>
<div style="box-shadow: 10px 10px 5px #ddd;"></div>
<div style="box-shadow: -10px -10px 5px #ddd;"></div>
<div style="box-shadow: 10px 10px 5px 10px #ddd;"></div>
<div style="box-shadow: 10px 10px 5px 20px #ddd;"></div>
</body>
</html>
Multi column layout
CSS new column layout
Divide the content of a component into several parts
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
div {
/*Divide the component content into 3 parts horizontally*/
column-count:3;
/*Spacing between separated parts*/
column-gap: 50px;
/*Divider width style color between separated sections*/
column-rule: 10px inset #aaa;
}
</style>
</head>
<body>
<div>
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha<br>
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha<br>
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha<br>
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha<br>
Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha<br>
</div>
</body>
</html>
Use box model to realize multi column layout
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
body {
margin: 0;
}
div#container {
width: 1200px;
border: 1px solid black;
/*Set container components to box style*/
display: -webkit-box;
}
div>div {
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 15px 15px 0px 0px;
background-color: #ffc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 220px;">
<h2>First column</h2>
<p>
The scenery of northern China is frozen for thousands of miles and snowy for thousands of miles. When you look inside and outside the Great Wall, you can only be reckless. Up and down the river, you suddenly lose the surging, dancing silver snakes and galloping wax elephants. If you want to compete with the Duke of heaven, you must have a sunny day. You can see that you are wrapped in red and plain, which is extremely enchanting. There are so many charming rivers and mountains, which has attracted countless heroes to bow down. You cherish the Qin emperor, Han Emperor and Wu, and lose a little literary talent. Tang Zong and Song Zu are a little less coquettish. A generation of Tianjiao, Genghis Khan, I only know how to shoot big sculptures with a bow. I'm going to count romantic figures and look at the present.
</p>
</div>
<div style="width: 500px;">
<h2>Second column</h2>
<ul>
<li><a href="#"> hottest news</a></li>
<li><a href="#"> domestic news</a></li>
<li><a href="#"> International News</a></li>
<li><a href="#"> Entertainment News</a></li>
</ul>
</div>
<div style="width: 240px;">
<h2>Column 3</h3>
<figure>
<figcaption>Beauty pictures</figcaption>
<img src="img/mv1.jpg" width="100px">
<img src="img/mv2.jpg" width="100px">
<img src="img/mv3.jpg" width="100px">
</figure>
</div>
</div>
</body>
</html>
Elastic box and grid layout
Elastic box
It is a style that realizes adaptive dynamic layout completely according to the requirements of screen size
Two things are needed: elastic container + elastic child element
Elastic containers have one row by default
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
.flex-container {
/*Set div to elastic container*/
display: flex;
width: 400px;
height: 250px;
background-color: lightblue;
/*Arrangement of elastic child elements in elastic container row column -reverse*/
flex-direction: row;
/*Horizontal alignment
flex-start Compact from left to right
flex-end
center Compact Center
spacing-bewteen Average distribution
*/
justify-content: space-between;
/*Vertical alignment*/
align-items:center;
}
.flex-item {
background-color: red;
width: 50px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">item01</div>
<div class="flex-item">item02</div>
<div class="flex-item">item03</div>
<div class="flex-item">item04</div>
</div>
</body>
</html>
grid layout
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
.box {
border: 1px solid black;
/*Use grid style layout*/
display: grid;
/*Sets the width of the column in the grid*/
grid-template-columns: 20% 20% 20% 20%;
grid-template-columns: 200px 200px 200px 200px;
/*You can also use percentage to set the width when determining the grid width*/
width: 500px;
grid-template-columns: repeat(5,1fr);
height: 400px;
grid-template-rows: repeat(3,1fr);
/*Spacing between cells*/
grid-gap: 10px;
}
.box>div {
border: 1px solid red;
}
.test {
/*
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
*/
/*One stroke*/
grid-area: 2/2/3/5;
}
</style>
</head>
<body>
<div class="box">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div class="test">07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
An officially recommended grid layout case
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset='gbk'">
<style>
#content {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: minmax(100px,auto);
max-width: 960px;
margin: 0px auto;
grid-gap:10px;
grid-template-areas:
"header header header header"
"aside . main main"
"nav . main main"
"section section section section"
"section section section section"
"footer footer footer footer";
}
#content>* {
background-color: #3bbced;
padding: 30px;
}
header {grid-area: header;}
main {grid-area: main;}
section {grid-area: section;}
aside {grid-area: aside;}
nav {grid-area: nav;}
footer {grid-area: footer;}
</style>
</head>
<body>
<div id="content">
<header>Header</header>
<main>Main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
</div>
</body>
</html>