Let's practice a topic first: make a sina sports text page. , maybe you can't make this effect very well now, but after learning this section, you will make this page soon. The specific code and effect are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> * a a:hover{ text-decoration:underline;} .news{ width:600px; margin:100px auto; border: solid 1px #bbb; border-top: solid 3px #094683; padding:11px 20px 15px; } .news h2{ color: #000; font-family: "Microsoft Yahei","Microsoft YaHei ", "Blackbody"; font-size: 22px; font-weight: normal; height: 35px; line-height: 35px; overflow: hidden; text-align: center; } .artInfo{ border-bottom: solid 1px #ccc; color: #999; padding: 10px 0; text-align: center; font-size:12px; } .artInfo a{ color: #999; text-decoration:none; margin: 0 10px; } .artInfo a:hover{ text-decoration:underline} .time{ margin:0 10px;} .re{ color:#b60c0c!important;} .article{ padding:20px; font-size: 14px; line-height: 23px; color:#333;} .img-wrap{ text-align:center;} .img-wrap span{ line-height: 20px; padding: 6px 0; color: #666; font-size: 12px; margin: 5px auto; display: inline-block; } .article p{ text-indent:2em; } .ln{ border:1px dashed #ccc; padding:10px; margin-top:10px; } .ln a{ color:#0454a7; text-decoration:none; } .info{ text-align:right; font-size:12px;} .keywords{ margin: 10px 0;} .keywords span{ font-weight:bold; } .load{ margin: 0 20px; padding:2px 0; border:1px solid #0454a7; text-align:center; background-color:rgb(222, 226, 243); } </style> </head> <body> <div> <h2>Luneng warm up 16-0 Big win over amateur team bison 4 goals Monty slightly wearing hat</h2> <div> <span>2015 August 18, 2008:19</span> <a href="#">sina sports </a> micro-blog <a href="#">I have something to say(<span>10,370</span>Ginseng and)</a> <a href="#"> collection of articles</a> </div> <div> <div> <img src="img.jpg" /> <span>Luneng warm up 16-0 A great victory</span> </div> <p>Sina sports news On August 8, Beijing time, Shandong Luneng Club held a warm-up match with the Amateur Team Shandong Sun Jindian football club in the training base, and Luneng finally played 16-0 A big victory over the opponent, aloisio performed four Xi, Han Peng and montillo completed the hat trick, Yuxi Leimei scored twice, Tardelli, Zhao Mingjian, Zhang Wenzhao and Chengyuan all scored goals.</p> <div> <a href="#" title="Luneng Taishan football news">Luneng Taishan football news</a>: #Luneng Taishan#Luneng beat an amateur team 16-0 in the warm-up match, Han Peng and montillo scored a hat trick, bison four Xi, Yuxi Leimei scored twice, and Tardelli, Zhao Mingjian, Zhang Wenzhao and Cheng Yuan scored goals. <div>2015-08-08 17:54 From Baidu browser(49) | Collection | comment(50)</div> </div> <p>As the Chinese football team competed in the East Asia Cup, the Chinese Super League got a two-week interval. Shandong Luneng trained for the match and invited an amateur team to warm up. Although Wang Dalei, Wang Yongpo, Yang Xu, Wang Tong and others are competing in the East Asia Cup with the national football team, Luneng has sent out the best team available, with 16-0 It's reported that he won 9 in the first half-0 Although it's not important to win or lose the match with amateur teams, such a big score victory also shows that Luneng's team is in good condition.</p> <p>The 22nd round of CSL will start next Wednesday. Shandong Luneng will challenge Beijing Guoan away. The direct dialogue between the two teams competing for the title is undoubtedly the most focused battle of the round. As the national football association only finished the East Asia Cup on Sunday, it is very important to recover the physical fitness of the international players in Luneng formation, and the strength of the existing lineup of Luneng players should not be underestimated.(Mata)</p> <div><span>Key words</span>: <a href="#"> CSL</a> <a href="#"> Luneng</a> <a href="#"> aloisio</a> <a href="#"> montillo</a> </div> <div><a href="#"> Click to download [sina sports client], and the live video of the event will be mastered as much as possible < / a > < div > </div> </div> </body> </html>
-Understanding:
- can tell the four parts of the box model
- be able to say the function of the inner margin and its effect on the box
- can say the meaning of different numbers of padding settings
- be able to say 2 conditions required for the block level box to be aligned in the middle
- be able to say the solution of outer margin merging
-Application:
- be able to add border to elements by using border compound writing method
- can calculate the actual size of the box
- be able to use box model to lay out module cases
1. Understand the nature of web page layout
In web layout, how do we arrange the words and pictures in order according to the renderings given to us by the artists
-See through the nature of web layout:
- first use CSS to set the size of the box, and then place the box.
- finally, put the web page elements such as text and pictures into the box.
- the above two steps are the essence of web layout
We have learned that the box is the key point of web page layout, so we should understand the characteristics of this box.
2. Box Model
-The so-called box model:
- think of the layout elements in HTML pages as a rectangular box, that is, a container for content.
* the box model consists of content, border, padding, and margin of elements.
* the text and pictures in the box are the content area
* the thickness of the box we make the border of the box
* the distance between the box content and the border is the inner margin (similar to cell adding of cells)
* the distance between the box and the box is the outer margin (cell packing similar to cell)
**Standard box model**
< img SRC = '. / media / standard box model. PNG' >
3. Box border
< img SRC = '. / media / box border. PNG' >
-Syntax:
~~~css
border : border-width || border-style || border-color
~~~
|Attribute function|
| ------------ | :--------------------: |
|Border width defines the border thickness in px|
|Border style the style of the border|
|Border color|
-Border style:
- none: ignore the width of all borders without borders (default)
- solid: single solid border (most commonly used)
- dashed: dashed border
- dotted: the border is dotted
3.1 comprehensive setting of border
```
border : border-width || border-style || border-color
```
For example:
~~~css
border: 1px solid red; no order
~~~
3.2 summary of box frame writing
In many cases, we do not need to specify four borders. We can specify four borders separately.
|Top border | bottom border | left border | right border|
| :------------------------- | :---------------------------- | :-------------------------- | :--------------------------- |
|Border top style: style; | border bottom style: style; | border left style: style; | border right style: style|
|Border top width: width; | border - bottom width: width; | border left width: width; | border right width: width|
|Border top color: color; | border - bottom color: color; | border left color: color; | border right color: color|
|Border top: width style color; | border bottom: width style color; | border left: width style color; | border right: width style color|
3.3 thin line border of table
< img SRC = '. / media / table border. PNG' >
-Set the distance between cells to 0 through 'cellspacing="0" in the table,
-But the border between the two cells will overlap, making the border thicker
-Through the css attribute:
~~~
table{ border-collapse:collapse; }
~~~
- collapse s means merge
- border-collapse:collapse; Indicates that adjacent borders are merged.
~~~css
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
Border collapse: collapse; / * merge adjacent borders*/
}
</style>
~~~
< img SRC = '. / media / border merge. PNG' >
. padding
< img SRC = '. / media / 16 inner margin. PNG' >
4.1 inner margin:
The padding property is used to set the inner margin. **Refers to the distance between the border and the content. * *
###4.2 settings
|Attribute function|
| ------------- | :------- |
|Padding left | left inner margin|
|Padding right | right inner margin|
|Padding top|
|Padding bottom inner margin|
When we assign a padding value to the box, two things happen:
1. There is a distance between the content and the border, and the inner margin is added.
2. The box will be bigger.
< img SRC = "media / w.jpg" / > * * Note: the meaning of the following values is different. * *
It's a bit troublesome for us to write separately. Can we abbreviate it?
|Number of values|
| -------- | ----------------------------------------------- |
|1 value | padding: upper, lower, left and right inner margins|
|Two values | padding: upper and lower inner margins left and right inner margins|
|Three values | padding: upper inner margin left and right inner margin lower inner margin|
|Four values | padding: upper inner margin right inner margin lower inner margin left inner margin|
Please write the following inner margin:
1. It is required that the box has a left inner margin of 5 pixels
2. It is required to write a box with 25 pixels above and below in the form of shorthand, and 15 pixels above and below.
3. It is required to write a box in a short form. The top inner margin is 12 pixels, the bottom inner margin is 0, the left inner margin is 25 pixels, and the right inner margin is 1
Sina navigation
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sina navigation bar case</title> <style> /*Clear element default inside and outside margins*/ * { margin: 0; padding: 0; } .nav { height: 41px; background-color: #FCFCFC; /*border-top */ border-top: 3px solid #FF8500; /*bottom*/ border-bottom: 1px solid #EDEEF0; } .nav a { /*Convert to inline block*/ display: inline-block; height: 41px; line-height: 41px; color: #4C4C4C; /*It means that the top and bottom are about 0, and it's 20 margins*/ padding: 0 20px; /*background-color: pink;*/ text-decoration: none; font-size: 12px; } .nav a:hover { background-color: #eee; } </style> </head> <body> <div> <a href="#"> set as home page</a> <a href="#"> Sina Mobile</a> <a href="#"> mobile client</a> <a href="#"> blog</a> <a href="#"> Weibo</a> <a href="#"> follow me</a> </div> </body> </html>
The core of sina's navigation bar is that it's not convenient for us to give width, padding and opening boxes because of the different number of words in it.
<img src="media/al.gif"
4.4 calculation of inner box size (actual size of element)
< img SRC = '. / media / box model size. PNG' >
-Width
Element Height = content height + padding + border (Height is content height)
-Height
Element Width = content width + padding + border (Width is content Width)
-Actual size of box = width and height of content + inner margin + border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calculate the actual size of the box</title> <style> div { width: 180px; height: 200px; background-color: pink; /*Add 10px inner margin left and right up and down*/ padding: 10px; /*Actual size of box = content width height + inside margin + border*/ /* = 200 + 20 + 0 = 220 */ /*Solution: The inner margin must be given. We can only change the width of the content and let it subtract the extra inner margin*/ /*200 - 20 = 180 */ } </style> </head> <body> <div> </div> </body> </html>
4.5 problems caused by internal margin
-Questions
< img SRC = '. / media / 31padding problem. PNG' >
It will enlarge the original box
-Solution:
The original size of the box is maintained by setting the width and height of the box and subtracting the corresponding value of the inner margin
1. The width of a box is 100, the padding is 10, and the border is 5 pixels. The actual width of the box is ()
- [x] (A) 130
- [ ] (B) 135
- [ ] (C) 125
- [ ] (D) 115
100 + 20 + 10
2. The following statement about calculating the box width and height according to the following code is correct ()
```css
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}
```
-[] (A) width 200px height 200px
-[x] (B) width 352px height 306px
-[] (C) width 302px height 307px
-[] (D) width 302px height 252px
w 200 + 150 + 2 = 352
h 200 + 100 + 6 = 306
4.6 padding does not affect box size
>If no width is specified for a box, at this time, if padding is specified for the box, the box will not be opened.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } p { /*width: 200px;*/ height: 30px; background-color: purple; padding-left: 30px; /*In special cases, if this box has no width, padding will not open it*/ } </style> </head> <body> <div> <p>Dada dada</p> </div> </body> </html>
5. margin
< img SRC = '. / media / 18margin. PNG' >
5.1 outer margin
The margin property is used to set the margin. Margin is to control the distance between * * boxes**
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; padding: 20px; /*Margin */ /*margin-left: 100px; margin-top: 50px;*/ margin: 100px 20px 0 10px; } </style> </head> <body> <div></div> </body> </html>
5.2 setting:
|Attribute function|
| ------------- | :------- |
|Margin left|
|Margin right|
|Margin top|
|Margin bottom margin|
The shorthand (compound) meaning of the margin value is exactly the same as padding.
5.3 block level box horizontal center
-For a block level box to be horizontally centered, you must:
- the box must have a width specified
- then set the outer margin of * * to auto * *,
In practice, this method is often used for web page layout. The example code is as follows:
css
.header{ width:960px; margin:0 auto;}
Common writing methods, the following three can be.
* margin-left: auto; margin-right: auto;
* margin: auto;
* margin: 0 auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 600px; height: 400px; background-color: pink; /*Align the block level box in the middle. 1. It must have a width. 2. Set the left and right outer margins to auto*/ /*1. margin-left: auto; margin-right: auto;*/ /*2. margin: auto;*/ margin: 0 auto; } </style> </head> <body> <div></div> </body> </html>
5.4 difference between text center and box center
1. The horizontal center of the text in the box is text align: Center, and it can also center and align the elements and blocks in the line
2. Block level box is horizontally centered, left and right margin is changed to auto
css
Text align: Center; / * text line element line block element horizontal center*/
margin: 10px auto; / * block level box is horizontally centered. When margin is changed from left to right to auto, it can be expanded to upper and lower margins*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 600px; height: 300px; background-color: pink; /*Block level box horizontal center*/ margin: 50px auto; /*The text elements and blocks in the box are centered, aligned and horizontally centered*/ text-align: center; } </style> </head> <body> <div> hold still <strong>We can win</strong> <input type="text"> </div> </body> </html>
5.5 difference between inserted picture and background picture
1. We use the most pictures to insert. For example, the mobile location of product display class can only rely on the box model padding margin
4. Background picture we usually use for small icon background or large background picture. Background picture can only pass background position
~~~css
img {
width: 200px; / * insert picture change size width and height*/
height: 210px;
Margin top: 30px; / * you can use margin or padding box model to change the position of the inserted picture*/
Margin left: 50px; / * insert when the picture is also a box*/
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
Background position: 30px 50px; / * I use background position to change the position of background picture*/
}
~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .pic, .bg { width: 500px; height: 500px; border: 1px solid red; /*padding: 30px;*/ } .pic img { margin: 30px; } .bg { background: url(images/3.jpg) no-repeat; background-position: 30px 30px; /*padding: 30px;*/ } </style> </head> <body> <div> <img src="images/3.jpg" alt=""> </div> <div> </div> </body> </html>
5.6 clear default inside and outside margins of elements (important)
< img SRC = '. / media / 19 clear inner and outer margins. PNG' >
In order to control the elements in web pages more flexibly and conveniently, we need to clear the default inner and outer margins of elements when making web pages
Code:
~~~css
* {
padding:0; / * clear inner margin*/
margin:0; / * clear margin*/
}
~~~
Note:
*In order to take care of compatibility, try to set only the left and right inner and outer margins instead of the upper and lower inner and outer margins.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*This is a magic code. Let's write the first sentence of css later*/ * { margin: 0; padding: 0; } span { margin: 30px; } </style> </head> <body> A question <p>Another problem</p> <span> Try to set only the left and right inner and outer margins for the elements in the row, and do not set the upper and lower inner and outer margins.</span> </body> </html>
5.7 merge of outer margins
When using margin to define the * * vertical outer margin * * of a block element, merging of outer margins may occur.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .top, .bottom { width: 200px; height: 200px; background-color: pink; } .top { margin-bottom: 100px; } .bottom { background-color: purple; margin-top: 50px; } </style> </head> <body> <div></div> <div></div> </body> </html>
1) . merging of vertical outer margins of adjacent block elements
-When two adjacent block elements meet, if the element above has a margin bottom
-If the following elements have a margin top margin, the vertical spacing between them is not the sum of margin bottom and margin top
-The phenomenon of * * taking the larger of the two values * * is called the combination of vertical outer margins of adjacent block elements (also known as collapse of outer margins).
<img src="media/www.png" />
**Solution: try to add margin value * * to only one box.
(2) merge (collapse) of vertical outer margins of nested block elements
-For two nested block elements, if the parent element does not have a top inner margin and border
-The parent's top margin merges with the child's top margin
-The combined outer margin is the larger of the two
<img src="media/n.png" />
**Solution:**
1. You can define the top border for the parent element.
2. Upper inner margin can be defined for parent element
2. Can add for parent element overflow:hidden .
There are other methods, such as floating, fixed, absolute positioning box will not have problems, we will summarize later..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 500px; height: 500px; background-color: pink; /*Vertical outer margin merging solution for nesting relationship */ /*1. Upper border transparent can be defined for the parent element*/ /*border-top: 1px solid transparent;*/ /*2. You can specify a top padding value for the parent*/ /*padding-top: 1px; */ /*3. Can be added for parent element overflow:hidden . */ overflow: hidden; } .son { width: 200px; height: 200px; background-color: purple; margin-top: 100px; } </style> </head> <body> <div> <div></div> </div> </body> </html>
6. Stability of box model layout
-After learning the box model, the inner margin and the outer margin, when to use the inner margin and when to use the outer margin?
- can be mixed in most cases. That is to say, you can use the inside margin as well as the outside margin. You can use whatever is convenient for you.
According to the stability, we suggest as follows:
Use width first, padding second and margin second.
```
width > padding > margin
```
-Reason:
- margin will have outer margin merging, and the bug of doubling margin under ie6 (annoying) will be used finally.
- padding will affect the box size, which needs to be added and subtracted (troublesome) and then used.
- width no problem (HI PI) we often use the width remaining method and height remaining method.
Rounded border (CSS3)
< img SRC = '. / media / fillet. PNG' >
-Syntax:
```css
border-radius:length;
```
-Each of these values can be in the form of a number or a percentage.
-Tip: turn a square into a circle
~~~
border-radius: 50%;
~~~
<img src="media/radio.png" />
*< img SRC = '. / media / fillet. PNG' >
*Do not use percentages for the fillets of the rectangles in the above renderings, because percentages will be half of the height and width.
*And here we use only half the height of the rectangle. Precise unit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; /*border-radius: 100px;*/ border-radius: 50%; } p { width: 100px; height: 20px; background-color: red; font-size: 12px; color: #fff; text-align: center; line-height: 20px; border-radius: 10px; } </style> </head> <body> <div> </div> <p> Free on special price </p> </body> </html>
2. Box shadow (CSS3)
< img SRC = '. / media / shadow. PNG' >
-Syntax:
~~~css
Box shadow: horizontal shadow vertical shadow blur distance (virtual and real) shadow size (shadow size) shadow color internal / external shadow;
~~~
-The first two properties must be written. The rest can be omitted.
-The outer shadow is the default, but it can't be written. If you want the inner shadow, you can write inset
~~~css
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/ * box shadow: horizontal position vertical position blur distance shadow size (shadow size) shadow color internal / external shadow*/
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
~~~
#CSS writing specification
It is the beginning of your major to form a good writing standard at the beginning.
##Space specification
A space must be included between the force selector and {.
Example:
~~~css
.selector {
}
~~~
[mandatory] spaces are not allowed between the attribute name and the following:,: and the attribute value must contain spaces.
Example:
~~~css
font-size: 12px;
~~~
##Selector specification
Force union selectors. Each selector declaration must have one row exclusive.
Example:
```
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
```
[suggestion] in general, the nesting level of selectors should not be more than 3, and the limit condition of the position back should be as accurate as possible.
Example:
```css
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login input {}
.comment div * {}
Attribute specification
Mandatory attribute definition must start another line.
Example:
```css
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
```
The mandatory attribute must end with a semicolon.
Example:
```css
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
```
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; margin: 50px auto; /*box-shadow:Horizontal shadow vertical shadow blur distance (virtual and real) shadow size (shadow size) shadow color inner / outer shadow;*/ box-shadow: 0 15px 30px rgba(0,0,0,.3); } </style> </head> <body> <div></div> </body> </html>
Finally, do two exercises:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { /* Clearing the default inside and outside margins is almost what we have to write for css */ margin: 0; padding: 0; } ul { list-style: none; /* Cancels the default list style of the small points in the list */ } .searchPic { width: 238px; height: 294px; border: 1px solid #D9E0EE; border-top: 3px solid #FF8400; / * put this sentence under the border*/ margin: 100px; } .searchPic h3 { height: 35px; line-height: 35px; /* Make the line height equal to the height to center the text vertically */ border-bottom: 1px solid #D9E0EE; font-size: 16px; font-weight: normal; /* Make bold the same */ padding-left: 12px; /* Because this h3, we can't open the box without the width padding of the father who inherits the width */ } .searchPic img { margin: 7px 0 0 8px; /* Upper right lower left */ } .searchPic ul li a { font-size: 12px; color: #666; text-decoration: none; /* UN underline */ } .searchPic ul { margin-left: 8px; } .searchPic ul li{ padding-left: 10px; height: 26px; line-height: 26px; background: url(images/square.png) no-repeat left center; /* Background settings */ } .searchPic ul li a:hover { text-decoration: underline; /* Underline */ color: #ff8400; } </style> </head> <body> <div> <h3>Search interest chart</h3> <img src="images/happy.gif" height="160" width="218" alt=""> <ul> <li><a href="#"> GIF: little fat Dun's face is innocent after being rescued by a card</a></li> <li><a href="#"> GIF: little fat Dun's face is innocent after being rescued by a card</a></li> <li><a href="#"> GIF: little fat Dun's face is innocent after being rescued by a card</a></li> </ul> </div> </body> </html>
The second exercise;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>News listing 2</title> <style> *{ margin:0; padding:0;} .news{ width:240px; border:#009900 solid 1px; background:url(images/bg.gif) center; padding:10px; margin:20px auto; } .news h1{ font-family:Blackbody; color:#FFF; font-size:20px; border-left:#c9e143 solid 4px; padding-left:5px; } .news ul{ background:#FFF; margin-top:5px; padding:0 10px; } .news li{ border-bottom:#666 dashed 1px; list-style:none; background:url(images/tb.gif) no-repeat left; text-indent:1em; } .news a{ color:#06C; font-size:12px; text-decoration:none; line-height:30px; } .news a:hover{ text-decoration:underline; color:#F00; } /*.news .none{ border:none;}*/ </style> </head> <body> <div> <h1>Love knowledge</h1> <ul> <li><a href="#"> dogs are better for health than cats</a></li> <li><a href="#"> What do you think of the authentic Japanese Chai dog</a></li> <li><a href="#"> dog song new year</a></li> <li><a href="#"> what should I pay attention to when driving with pets? </a></li> <li><a href="#[> laughter] this dog suck </a></li> <li><a href="#"> the dog and the boy wear the same clothes and take a love photo</a></li> <li><a href="#"> dog health events at all stages</a></li> <li><a href="#"> funny moment of naughty pet dog trapped in sofa</a></li> <li><a href="#"> Why do you kick the earth with your feet every time you defecate? </a></li> </ul> </div> </body> </html>
