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

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

WBOY

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

Original

1252 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: <body>

Copy after login

   2:     <div class="test">

Copy after login

   3:         <div>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

   7:         </div>

Copy after login

   8:         <div>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

  12:         </div>

Copy after login

  13:         <div>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

  17:         </div>

Copy after login

  18:     </div>

Copy after login

  19: </body>

Copy after login

css:

   1: *

Copy after login

   2: {

Copy after login

   3:     margin: 0 auto;

Copy after login

   4: }

Copy after login

   5: .test

Copy after login

   6: {

Copy after login

   7:     width: 400px;

Copy after login

   8:     height: 500px;

Copy after login

   9:     border: 1px solid black;

Copy after login

  10: }

Copy after login

  11: .test div

Copy after login

  12: {

Copy after login

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

Copy after login

  14:     height: 150px;

Copy after login

  15:     width: 350px;

Copy after login

  16:     margin-top: 10px;

Copy after login

  17:     margin-bottom: 5px;

Copy after login

  18:     position: relative;

Copy after login

  19: }

Copy after login

  20: h3

Copy after login

  21: {

Copy after login

  22:     position: absolute;

Copy after login

  23:     left: 155px;

Copy after login

  24:     top: 55px;

Copy after login

  25: }

Copy after login

  26: span

Copy after login

  27: {

Copy after login

  28:     position: absolute;

Copy after login

  29:     top: 58px;

Copy after login

  30:     left: 250px;

Copy after login

  31:     font-weight: bold;

Copy after login

  32: }

Copy after login

  33: a{

Copy after login

  34:     color: #000;

Copy after login

  35:     text-decoration: none;

Copy after login

  36: }

Copy after login

  37: a:hover

Copy after login

  38: {

Copy after login

  39:     color: #000;

Copy after login

  40:     text-decoration: none;

Copy after login

  41: }

Copy after login

Effect:

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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