1. Line label and block label
Line label: by default, a label that does not occupy a whole line will occupy as much width as the content is
Block label: This is the label that occupies one line by default. h1 # hr # ul li
In line block label: it has the characteristics of some line labels and block labels
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-- Line label: by default, a label that does not occupy a whole line will occupy as wide as the content is b font s u Block label: the label that will occupy one line by default h1 hr ul li In line block label: it has some characteristics of line label and block label button --> <h1>This is a title tag</h1> <b>Label behind</b> <ul> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> <li>asdfasfasf</li> </ul> <font size="4" color="">This is the row label</font> <font size="4" color="">This is the row label</font> <font size="4" color="">This is the row label</font> <b>This is also the row label</b> </body> </html>
2. Pure row labels and block labels
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- Pure block label: div This label is a pure block label. The so-called purity is the label without any style. By default, there is no background color, no font size, no height. Wait for some styles. It is precisely because it is pure that we will cooperate CSS To set his style Pure row table label: sapn It is a line label without any style. We can use it to match when setting the text style CSS To style the text --> <h1>A three launch point</h1> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <div>asdfasdfasdfasdf</div> <b>asfasdfasdfasfasfsaf</b> <s>asdfasdfasdfasdfasdfsaf</s> <u>asdfasdfasdfasdfasdfasdfasfd</u> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> <span>asdfasfasdfasdfasdfasdfs</span> </body> </html>
3. Concept of CSS
1. Realize the code separation of style and html.
2. Make up for the lack of html control over attributes.
3. Accurately control the layout of the page.
4. It can improve the execution efficiency of the page.
5.css also has special functions.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- CSS: Full English Name: Cascading Style Sheets,Cascading style sheets are used to decorate HTML The style displayed by the tab enriches the style display of the tab, HTML The styles and attributes of the tab cannot meet our rich style requirements Then we can use CSS To do, because he has a large number of rich styles to meet our needs, once we learn CSS You rarely use the attributes of the tab to adjust the style. What does this form look like? It's up to you CSS To control --> <font size="7" color="red">The style is controlled by the attributes of the tab</font> <span style="font-size: 30mm;color: green">CSS To control the style of this line of text</span> </body> </html>
4. Combination of CSS and HTML
1. Inline style is to write the CSS code into the HTML tab. Each HTML tab has a style attribute, and the value of this attribute is the CSS code
Disadvantages: you can only control the style of one tab at a time, which has poor reusability and messy writing
< span style = "css attribute name: value; css attribute name: value; css attribute name: value" > aasdfasdf</span>
< font style = "css attribute name: value; css attribute name: value; css attribute name: value" > asfasfasfasd < / font >
2. Internal style: provide the style tab inside the head tab on the HTML page, and then cooperate with the selector to control the display style of one or more tabs
Selector: selecting one or more tabs can improve the reusability of CSS code. However, it can only control the display style of one HTML page
3. External style: write the CSS code separately into the file to be given, and you can control the display style of one or more pages at a time, which greatly improves the reusability of CSS code and is the first choice for development -- >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#bb {
color: aqua;
font-size: 100px;
}
h1{
color: gold;
}
</style>
</head>
<body>
<!-- CSS and HTML Combination mode of
1.Inline style is to CSS Code, write HTML Inside the form, each HTML There is one for each form style This property, the value of this property, is CSS code
Disadvantages: you can only control the style of one tab at a time, which has poor reusability and messy writing
<span style="css Attribute name:value;css Attribute name:value;css Attribute name:value">aasdfasdf</span>
<font style="css Attribute name:value;css Attribute name:value;css Attribute name:value">asfasfasfasfasd</font>
2. Internal styles: in HTML On page head The form label is provided internally style Table labels, and then cooperate with the selector to control the display style of one or more table labels
Selector: select one or more tab syntax advantages to improve CSS Code reusability, disadvantages, can only control one HTML Display style of the page
3.External styles: adding CSS The code is written separately in the file to be given. You can control the display style of one or more pages at a time, which greatly improves the efficiency CSS Code reusability is the first choice for development -->
<font style="color: red;font-size: 30px;font-family: Regular script;">Inline style is to CSS Code, write HTML Inside the form, each HTML There is one for each form style
This property, the value of this property,</font>
<span style="color: green;font-size: 30px;font-family: Regular script;">Inline style is to CSS Code, write HTML Inside the form, each HTML There is one for each form style
This property, the value of this property,</span>
<b id="bb">A three launch point launch point launch point</b>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
<h1>Manual valve</h1>
</body>
</html>External style:
a.css:
h1{
color: red;
}b.css:
h1{
color: #FFD700;
}public.css:
body{
background: greenyellow;
}a.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- quote css file --> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/a.css"/> </head> <body> <h1>A page</h1> </body> </html>
b,html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/b.css"/> </head> <body> <h1>B page</h1> </body> </html>
5.id selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* id Use before selector#
id Selector, only one tab can be selected at a time for style control
*/
#myh1 {
color: red;
font-family:'Regular script';
font-size:20px;
}
#mydiv{
color: red;
font-family:'Regular script';
font-size:20px;
/* Bold 100 --- 900 bold */
font-weight:bold;
}
</style>
</head>
<body>
<!-- Pay attention to the signature of each form id The value is unique and cannot be repeated -->
<h1 id="myh1">Aston launch point method master</h1>
<div id="mydiv">
Pure div Table signature
</div>
</body>
</html>
6.class selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* class The selector starts with a point. You can select multiple tabs for control */
.myh{
color: red;
}
#one{
font-size: 10px;
}
</style>
</head>
<body>
<!-- classs Attribute value. Multiple tabs can be the same -->
<h1 class="myh" id="one">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<h1 class="myh">Aston big</h1>
<font class="myh">adsffffffffffffff</font>
</body>
</html>
7. Tag name selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* The table signature selector is selected according to the table signature scale. Multiple table signatures can be selected */
h1{
color: #00FFFF;
}
li{
color: #FF0000;
}
</style>
</head>
<body>
<h1>What happened at the Aston launch site</h1>
<h1>What happened at the Aston launch site</h1>
<h1>What happened at the Aston launch site</h1>
<ul>
<li>adsfadsfdsaf</li>
<li>adsfadsfdsaf</li>
<li>adsfadsfdsaf</li>
<li>adsfadsfdsaf</li>
</ul>
</body>
</html>
8. Include selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Include selector layers to select inside*/
#d1 ul li a{
font-size: 30px;
}
#d2 ul li a{
font-size: 50px;
}
</style>
</head>
<body>
<div id="d1">
<ul>
<li><a id="mya" href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
</ul>
</div>
<div id="d2">
<ul>
<li><a id="mya" href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
<li><a href="#">adsfadsfadsfadsfds</a></li>
</ul>
</div>
</body>
</html>
9. Wildcard selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* For global unified configuration, you can select all table tabs */
* {
color: #ADFF2F;
}
/* Local unified distribution */
#d2 h1 *{
color: #FFD700;
}
</style>
</head>
<body>
<h1>Manual valve</h1>
<h2>Ah, it's all about sail</h2>
<font>Ah, do you want more</font>
<div id="">
adsfasfadsfsf
</div>
<div id="d2">
<h1>
<ul>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
</ul>
<ol>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
<li>adfasdfdsf</li>
</ol>
</h1>
</div>
</body>
</html>
10. Pseudo class selector
1. Not connected a:link
2. You have visited the link a:visited
3. Go to link a:hover
4. Activate (press) status a:active
Among them, hover and active can be used for other price control
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
The pseudo class selector is used to select the four states of the a tab
Link status
Mouse up state
Mouse down state
Status after link access
*/
/* Link status */
a:link {
color: #FFD700;
/* Underline the a label */
text-decoration:none;
}
/* Mouse up state */
a:hover {
font-size: 30px;
color: aqua;
/* Underline the a label */
text-decoration: none;
}
/* Mouse down state */
a:active {
color: #FF0000;
/* Underline the a label */
text-decoration: none;
}
/*Status after link access */
a:visited {
color: brown;
/* Underline the a label */
text-decoration: none;
}
</style>
</head>
<body>
<a href="a.html">Jump to a page</a>
<a href="b.html">Jump to b page</a>
</body>
</html>
11. The mouse hover and press state of pseudo class selection also works on other tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
height: 200px;
width: 200px;
background-color: #00FFFF;
}
/* Mouse hover */
#d1:hover{
height: 300px;
width: 300px;
background-color:red;
}
/* Mouse down */
#d1:active{
background-color:yellow;
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
</html>
12. Selector priority
In the page, the same html element has different selector definition styles.
1. id selector 2, class selector 3, tag selector
! Important > inline style > ID selector > class selector > label selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Multiple selectors. If the same tab is selected, the overlay will take effect if the styles they control do not conflict
What if multiple selectors control the style of the same tab? Which selector did you listen to?
It is determined according to the priority of the selector
!important>Inline style > ID selector > class selector > tag name selector
*/
#myh1{
color: red;
}
.aa{
background-color: #ADFF2F;
color: #FFFF00;
}
h1{
/* !important Make this style the highest priority*/
color: blue !important;
font-size: 100px;
}
</style>
</head>
<body>
<h1 id="myh1" class="aa" style="color: pink;">Astivanza place</h1>
</body>
</html>
13. Sub selector
div >p{
It means that all sub tags p in div will be selected. Note that it has no effect on grandson tags
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#fu>h1 {
color: red;
}
#fu2>h1 {
color: yellow;
}
div h1 {
background-color: gainsboro;
}
</style>
</head>
<body>
<div id="fu">
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
</div>
<div id="fu2">
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h1>There was a flood at the Aston launch site</h1>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
<h2>22222222</h2>
</div>
</body>
</html>
14. Adjacent selector
div +p{
It means to select the next p element next to my div (a single p followed by p is not selected). If there is an element between div and p, it is not selected
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#one {
height: 200px;
width: 200px;
/* Border: thickness, border color, line style, solid solid line */
border: 1px black solid;
background-color: #FF0000;
}
/* + sibling selector */
#one+div {
height: 200px;
width: 200px;
/* Border: thickness, border color, line style, solid solid line */
border: 1px black solid;
background-color: blue;
}
#one:hover +div{
background-color:yellow;
}
</style>
</head>
<body>
<div id="one">
1111
</div>
<div id="two">
2222
</div>
</body>
</html>
15. All adjacent selectors
div ~p{
This means that all p elements of the same level behind the div can be selected, even if there are other elements separated between multiple p elements
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
height: 200px;
width: 200px;
/* Border: thickness, border color, line style, solid solid line */
border: 1px black solid;
background-color: #FF0000;
}
/* ~ All adjacent selectors */
#d1~div {
height: 200px;
width: 200px;
/* Border: thickness, border color, line style, solid solid line */
border: 1px black solid;
background-color: blue;
}
#d1:hover ~div{
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="d1">
1111
</div>
<div id="" class="mydiv">
00000
</div>
<div id="" class="mydiv">
00000
</div>
<div id="" class="mydiv">
00000
</div>
</body>
</html>
16. Attribute selector
a[title] {means that if you select the attribute of title in the a tag, you will select}
a[title=num1] means to select the a tag of the attribute title=num1
a[title^=num] select the a tag whose attribute value starts with num
a[title$=num] select the a tag whose attribute value of title ends in num
a[title|=num] select the attribute value of the title and the a tag connected with num, such as < a title = "num AI" >
a[title~=num] select multiple attribute values of the title. One of the attribute values separated by spaces can be selected. For example, < a tile = "num num2 num3" > you can select any of the three attribute values. For example, a[title~=num2] and a[title~=num3] actually select the same label
a[title*=num] select the title attribute, and all values containing num can be selected. For example, < a title = "mynumaaaa" >
a[title=num][name=lisi] multiple attribute selection means to select the a tag with title=num and name=lisi < a title = "num" name = "lisi" >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* attribute selectors */
[align] {
color: red;
}
h1[align='left'] {
background-color: green;
}
</style>
</head>
<body>
<h1 align="center">111111</h1>
<h1 align="left">111111</h1>
<h1 align="right">111111</h1>
</body>
</html>
17. Filter selector (other pseudo class selectors)
| :first-letter | div: first letter - select the first letter or Chinese character in the first row of div | |
| :first-line | div: first line; select the first row of sub elements |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
font-size: 30px;
font-weight: 900;
}
p::first-letter{
font-size:50px;
color: red;
}
p::first-line{
background-color: #DCDCDC;
}
</style>
</head>
<body>
<p>
An excellent person like me should have lived a brilliant life
<br>
How many people in the world are there for an unknown person like me
</p>
</body>
</html>
18. Page positioning
There are two positioning methods for elements: relative positioning and absolute positioning
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
The origin position of the page, in the upper left corner, the first element will run to the origin position
The default positioning method for page elements is relative positioning
Relative positioning: the first element is at the origin, and the subsequent element parameter is the element in front of it
Absolute positioning: elements are not referenced before, and all elements only refer to the origin position.
*/
button{
/* Positioning method of element:
relative Relative positioning, default
absolute Absolute positioning
*/
position:relative;
}
</style>
</head>
<body>
<button type="button">A button</button>
<button type="button">Two buttons</button>
<button type="button">Three buttons</button>
</body>
</html>
19. Spacing between elements during relative positioning
Relative positioning sets the spacing in four directions
margin-right: 20px;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: relative;
width: 200px;
height: 200px;
border: 1px black solid;
}
/*
Relative positioning: set the spacing in four directions
margin-right: 20px;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px; */
#d1{
background-color: red;
margin-left: 120px;
}
#d2{
background-color: #0000FF;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px;
}
#d3{
margin-top: 150px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="d1">
11111
</div>
<div id="d2">
2222
</div>
<div id="d3">
3333
</div>
</body>
</html>
20. Absolute positioning setting spacing
top:50px;
left:100px;
right: auto;
bottom: auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: absolute;
width: 200px;
height: 200px;
border: 1px black solid;
}
/*
Absolute positioning, set the position of the element from the origin:
top:50px;
left:100px;
right: auto;
bottom: auto;
*/
#d1{
top:50px;
left:100px;
right: auto;
bottom: auto;
background-color: red;
}
#d2{
top:80px;
left:120px;
background-color: #0000FF;
}
#d3{
top:150px;
left:200px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="d1">
11111
</div>
<div id="d2">
2222
</div>
<div id="d3">
3333
</div>
</body>
</html>
21. Differences between line label and block label on CSS Style
Row label, setting up and down spacing is not effective, but setting left and right spacing is effective
In line block label label: setting the upper, lower, left and right spacing is effective
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Block label, which is effective for setting the spacing up, down, left and right */
h1{
margin-top: 50px;
margin-left: 50px;
}
</style>
</head>
<body>
<!-- For row labels, setting the upper and lower spacing is not effective, but setting the left and right spacing is effective. -->
<b style="margin-left: 200px;margin-top: 500px;">This is a row label</b>
<h1>This is a block label</h1>
<!-- Inline block label:Setting the upper, lower, left and right spacing is effective, -->
<button type="button" style="margin-left: 150px;margin-top: 500px;">Button</button>
<button type="button">Button</button>
<button type="button">Button</button>
</body>
</html>
22. Conversion between line elements and block elements within a line
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
/* Convert block elements into row elements */
display: inline;
}
span{
/* Convert row elements into block elements */
display: block;
margin-top: 100px;
}
h2{
/* Convert block elements into inline block elements */
display: inline-block;
margin-top: 300px;
}
div{
height: 300px;
width: 300px;
background-color:red;
/* none You can hide block elements */
display: none;
}
</style>
</head>
<body>
<h1>Ah, do you want more</h1>
<h1>Ah, do you want more</h1>
<span>asfasdfadsfasdf</span>
<span>asfasdfadsfasdf</span>
<span>asfasdfadsfasdf</span>
<span>asfasdfadsfasdf</span>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<h2>asdfasfasffsasddddddddddddddddddd</h2>
<div id="d1">
</div>
</body>
</html>
23. Layer floating
Floating: block labels can be arranged in one line. float: left
clear: left; Clear left float
clear: both; Clear left-right float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* Floating: block labels can be arranged in one line. float: left;*/
#d1{
height: 300px;
width: 300px;
background: red;
float: left;
}
#d2{
height: 300px;
width: 300px;
background: green;
float: left;
}
#d3{
height: 300px;
width: 300px;
background:yellow;
float:left;
}
#d4{
height: 300px;
width: 300px;
background:pink;
}
</style>
</head>
<body>
<div id="d1">
111
</div>
<div id="d2">
222
</div>
<div id="d3">
333
</div>
<!-- clear: left; Clear left float
clear: both; Clear left-right float
-->
<div style="clear: both;"></div>
<div id="d4">
444
</div>
</body>
</html>
24. Use tables for page layout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="" width="100%" height="40px">
<tr>
<td width="300px"></td>
<td width="102px">
<img src="img/logo.png">
</td>
<td align="center" width="200px">
<font size="5">Welcome to western open source!</font>
</td>
<td width="280px"></td>
<td width="50px"><img src="img/phone1.png"></td>
<td width="200px">029-86699937 88262419</td>
<td width="300px"></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="img/linux.jpg" height="480px" width="100%" >
</td>
</tr>
</table>
</body>
</html>
25.div and css layout page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin-top: 0;
}
#tubu {
width: 100%;
height: 400px;
border: 1px black solid;
/* Background picture */
background-image: url(img/linux.jpg);
/* Background picture size */
background-size: 100% 100%;
}
#dh {
width: 100%;
height: 80px;
margin-top: 10px;
border: 1px black solid;
}
#zuo {
width: 25%;
height: 600px;
border: 1px black solid;
float: left;
}
#zhong {
width: 40%;
height: 600px;
border: 1px black solid;
margin-left: 5%;
float: left;
}
#you {
width: 25%;
height: 600px;
border: 1px black solid;
float: right;
margin-right: -2px;
}
#dibu {
margin-top: 10px;
width: 100%;
height: 400px;
border: 1px black solid;
}
#box {
margin-top: 10px;
}
.btn {
margin-top: 10px;
height: 60px;
width: 150px;
border: 1px black solid;
float: left;
margin-left: 5.5%;
/* Text centered left and right */
text-align: center;
/* Text centered from top to bottom: the value is the height of the outer frame */
line-height: 60px;
/* Border fillet */
border-radius: 5px;
background-color: skyblue;
color: white;
font-size: 20px;
box-shadow: 5px 5px 5px gray;
}
.btn:hover {
font-size: 21px;
}
a:link {
color: white;
text-decoration: none;
}
a:hover {
color: #0000FF;
}
</style>
</head>
<body>
<div id="tubu">
Head banner
</div>
<div id="dh">
<div class="btn">
<a href="#"> enter the home page</a>
</div>
<div class="btn">
<a href="#"> learning in place</a>
</div>
<div class="btn">
<a href="#"> about this site</a>
</div>
<div class="btn">
<a href="#"> learning materials</a>
</div>
<div class="btn">
<a href="#"> registration needs to know</a>
</div>
<div class="btn">
<a href="#"> contact us</a>
</div>
</div>
<div id="box">
<div id="zuo">
<table border="0" cellspacing="0" width="100%" height="100%">
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</div>
<div id="zhong">
in
</div>
<div id="you">
right
</div>
</div>
<div id="" style="clear: both;">
</div>
<div id="dibu">
bottom
</div>
</body>
</html>
