zoukankan      html  css  js  c++  java
  • 如何让<h1></h1>和<span></span>并列显示

    <!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" />
    <style>
    .leftl {
     WIDTH: 440px; DISPLAY: inline; BACKGROUND: url(http://www.like815.com/pro/pic_bg01.gif) #fcf9e6 repeat-y; FLOAT: left; MARGIN-RIGHT: 10px
    }
    .leftl H4 {
     TEXT-ALIGN: left; PADDING-BOTTOM: 10px; PADDING-LEFT: 20px; WIDTH: 400px; PADDING-RIGHT: 20px; BACKGROUND: url(http://www.like815.com/pro/pic_01.gif) no-repeat left top; FLOAT: left; HEIGHT: 15px; COLOR: #af6705; PADDING-TOP: 10px; border:1px #F00 solid
    }
    .leftl H4 SPAN {
     TEXT-ALIGN: right; FLOAT: right; COLOR: #2f629b; FONT-WEIGHT: normal; border:1px  #30F solid
    }
    /**********/
    .leftl .content {
     PADDING-BOTTOM: 0px; MARGIN: 20px; PADDING-LEFT: 0px; WIDTH: 400px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; PADDING-TOP: 0px
    }
    .leftl .content DT {
     MARGIN: 0px 20px 0px 0px; WIDTH: 140px; FLOAT: left
    }
    .leftl .content DT UL.top {
     PADDING-BOTTOM: 0px; MARGIN: 0px 0px 20px; PADDING-LEFT: 0px; WIDTH: 140px; PADDING-RIGHT: 0px; BACKGROUND: #fadba2; FLOAT: left; PADDING-TOP: 0px
    }
    .leftl .content DT UL {
     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 140px; PADDING-RIGHT: 0px; BACKGROUND: #fadba2; FLOAT: left; PADDING-TOP: 0px
    }
    .leftl .content DT UL LI.imgfull {
     PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; WIDTH: 128px; PADDING-RIGHT: 5px; PADDING-TOP: 5px
    }
    .leftl .content DT UL LI IMG {
     BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid; DISPLAY: block; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid
    }
    .leftl .content DT UL LI.tit {
     TEXT-ALIGN: center; PADDING-BOTTOM: 5px; MARGIN: 0px 0px 10px; PADDING-LEFT: 0px; WIDTH: auto; PADDING-RIGHT: 0px; BACKGROUND: #f89506; COLOR: #fff; FONT-WEIGHT: bold; PADDING-TOP: 5px
    }
    .leftl .content DT UL LI.photo {
     TEXT-ALIGN: center; PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 4px 0px 4px 6px; PADDING-LEFT: 0px; WIDTH: 60px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px
    }
    .leftl .content DT UL LI.photo IMG {
     BORDER-BOTTOM: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 58px; DISPLAY: block; MARGIN-BOTTOM: 5px; HEIGHT: 58px; BORDER-TOP: #fff 1px solid; BORDER-RIGHT: #fff 1px solid
    }
    .leftl .content DD {
     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 240px; PADDING-RIGHT: 0px; FLOAT: right; PADDING-TOP: 0px
    }
    .leftl .content DD UL {
     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 240px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; FLOAT: right; OVERFLOW: hidden; PADDING-TOP: 0px
    }
    .leftl .content DD UL LI {
     TEXT-ALIGN: left; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-LEFT: 15px; WIDTH: 225px; TEXT-OVERFLOW: ellipsis; PADDING-RIGHT: 0px; WHITE-SPACE: nowrap; BACKGROUND: url(pic_dot01.gif) no-repeat 0px 8px; COLOR: #999; OVERFLOW: hidden; PADDING-TOP: 0px
    }
    </style>
    <title>无标题文档</title>
    </head>
    <body>
    <DIV class="leftl">
        <H4><SPAN><A class="blue" href="aaaaaaaaaa">更多&gt;&gt;</A></SPAN>标题部分<SPAN><A class="blue" href="aaaaaaaaaa">文字描述</A></SPAN></H4>
        <DL class="content">
          <DT>
          <UL class="top">
            <LI class="imgfull"><A href="aaaaaaaaaa"><IMG  src="img.gif"></A> </LI></UL>
          <UL>
            <LI class="tit">aaaaaaaaaa</LI>
            <LI class="photo"><A href="aaaaaaaaaa" target=_blank><IMG src="img.jpg"></A>
            <A class="blue" href="aaaaaaaaaa" target=_blank>aaaaaaaaaa</A> </LI></UL></DT>
          <DD>
          <UL>
            <LI><A class="gray" href="aaaaaaaaaa" target=_blank><FONT color=red>aaaaaaaaaa</FONT></A></LI>
          </UL>
          </DD>
        </DL>
     <H5></H5>
    </DIV>
    </body>
    </html>

  • 相关阅读:
    差分约束
    c++ 添加
    2 jQuery的入口函数
    1 jQuery的概述
    清除浮动的常用4种方式
    虚函数指针和它对应的虚函数表
    对于C++中顿悟
    前端和后端交互的一些认识
    前端初学者一看就懂:Ajax调用后台接口案例(转)
    前端和后端是怎么交互的(转)
  • 原文地址:https://www.cnblogs.com/hxwzwiy/p/2412342.html
Copyright © 2011-2022 走看看