问题:关于一个坛友的html布局实现_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:56:47
원래의
1262명이 탐색했습니다.

来源:http://www.ido321.com/888.html

坛友的需求如图

这个跟上次贴友分类菜单的实现类似

html:

   1: <body>
로그인 후 복사
   2:     <div class="test">
로그인 후 복사
   3:         <div>
로그인 후 복사
   4:             <img src="my.jpg" alt="test">
로그인 후 복사
   5:             <h3>图片标题</h3>
로그인 후 복사
   6:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>
로그인 후 복사
   7:         </div>
로그인 후 복사
   8:         <div>
로그인 후 복사
   9:             <img src="my.jpg" alt="test">
로그인 후 복사
  10:             <h3>图片标题</h3>
로그인 후 복사
  11:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>
로그인 후 복사
  12:         </div>
로그인 후 복사
  13:         <div>
로그인 후 복사
  14:             <img src="my.jpg" alt="test">
로그인 후 복사
  15:             <h3>图片标题</h3>
로그인 후 복사
  16:             <span><a href="#">编辑</a>  <a href="#">删除</a></span>
로그인 후 복사
  17:         </div>
로그인 후 복사
  18:     </div>
로그인 후 복사
  19: </body>
로그인 후 복사

css:

   1: *
로그인 후 복사
   2: {
로그인 후 복사
   3:     margin: 0 auto;
로그인 후 복사
   4: }
로그인 후 복사
   5: .test
로그인 후 복사
   6: {
로그인 후 복사
   7:     width: 400px;
로그인 후 복사
   8:     height: 500px;
로그인 후 복사
   9:     border: 1px solid black;
로그인 후 복사
  10: }
로그인 후 복사
  11: .test div
로그인 후 복사
  12: {
로그인 후 복사
  13:     border-bottom: 2px solid #ccc;
로그인 후 복사
  14:     height: 150px;
로그인 후 복사
  15:     width: 350px;
로그인 후 복사
  16:     margin-top: 10px;
로그인 후 복사
  17:     margin-bottom: 5px;
로그인 후 복사
  18:     position: relative;
로그인 후 복사
  19: }
로그인 후 복사
  20: h3
로그인 후 복사
  21: {
로그인 후 복사
  22:     position: absolute;
로그인 후 복사
  23:     left: 155px;
로그인 후 복사
  24:     top: 55px;
로그인 후 복사
  25: }
로그인 후 복사
  26: span
로그인 후 복사
  27: {
로그인 후 복사
  28:     position: absolute;
로그인 후 복사
  29:     top: 58px;
로그인 후 복사
  30:     left: 250px;
로그인 후 복사
  31:     font-weight: bold;
로그인 후 복사
  32: }
로그인 후 복사
  33: a{
로그인 후 복사
  34:     color: #000;
로그인 후 복사
  35:     text-decoration: none;
로그인 후 복사
  36: }
로그인 후 복사
  37: a:hover
로그인 후 복사
  38: {
로그인 후 복사
  39:     color: #000;
로그인 후 복사
  40:     text-decoration: none;
로그인 후 복사
  41: }
로그인 후 복사

效果:


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿