Question: Regarding a forum friend's html layout implementation_html/css

Question: Regarding a forum friend's html layout implementation_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 11:56:47

Original

1372 people have browsed it

Source: http://www.ido321.com/888.html

The needs of forum friends are as shown in the picture

This is similar to the implementation of the friend classification menu last time

html:

1	`1: <body>`

Copy after login

1	`2: <div` `class="test">`

Copy after login

1	`3: <div>`

Copy after login

1	`4: <img src="my.jpg"` `alt="test">`

Copy after login

1	`5: <h3>图片标题</h3>`

Copy after login

1	`6: <span><a href="#">编辑</a> <a href="#">删除</a></span>`

Copy after login

1	`7: </div>`

Copy after login

1	`8: <div>`

Copy after login

1	`9: <img src="my.jpg"` `alt="test">`

Copy after login

1	`10: <h3>图片标题</h3>`

Copy after login

1	`11: <span><a href="#">编辑</a> <a href="#">删除</a></span>`

Copy after login

1	`12: </div>`

Copy after login

1	`13: <div>`

Copy after login

1	`14: <img src="my.jpg"` `alt="test">`

Copy after login

1	`15: <h3>图片标题</h3>`

Copy after login

1	`16: <span><a href="#">编辑</a> <a href="#">删除</a></span>`

Copy after login

1	`17: </div>`

Copy after login

1	`18: </div>`

Copy after login

1	`19: </body>`

Copy after login

css:

1: *

Copy after login

2: {

Copy after login

1	`3: margin: 0 auto;`

Copy after login

4: }

Copy after login

1	`5: .test`

Copy after login

6: {

Copy after login

1	`7: width: 400px;`

Copy after login

1	`8: height: 500px;`

Copy after login

1	`9: border: 1px solid black;`

Copy after login

10: }

Copy after login

1	`11: .test div`

Copy after login

12: {

Copy after login

1	`13: border-bottom: 2px solid #ccc;`

Copy after login

1	`14: height: 150px;`

Copy after login

1	`15: width: 350px;`

Copy after login

1	`16: margin-top: 10px;`

Copy after login

1	`17: margin-bottom: 5px;`

Copy after login

1	`18: position: relative;`

Copy after login

19: }

Copy after login

20: h3

Copy after login

21: {

Copy after login

1	`22: position: absolute;`

Copy after login

1	`23: left: 155px;`

Copy after login

1	`24: top: 55px;`

Copy after login

25: }

Copy after login

1	`26: span`

Copy after login

27: {

Copy after login

1	`28: position: absolute;`

Copy after login

1	`29: top: 58px;`

Copy after login

1	`30: left: 250px;`

Copy after login

1	`31: font-weight: bold;`

Copy after login

32: }

Copy after login

33: a{

Copy after login

1	`34: color: #000;`

Copy after login

1	`35: text-decoration: none;`

Copy after login

36: }

Copy after login

1	`37: a:hover`

Copy after login

38: {

Copy after login

1	`39: color: #000;`

Copy after login

1	`40: text-decoration: none;`

Copy after login

41: }

Copy after login

Effect: