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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:56 AM

html layout

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:

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn