QK31

</p>
<h1>图片列表</h1>
<p><style>
    .dataView {
        width: 100%;
        height: 150px;
    }

    .dataView dl {
        border: 1px solid #dddddd;
        width: 130px;
        margin: 5px;
        float: left;
    }

    .dataView dl dt {
        text-align: center;
        padding: 5px;
    }

    .dataView dl a:hover img {
        border: 3px solid #dddddd;
    }

    .dataView dl dd {
    }
</style></p>
<div class="dataView">
	<dl>
		<dt><a href="#"><img src="test1.jpg" /></a></dt>
		<dd>标题</dd>
		<dd>其他</dd>
	</dl>
	<dl>
		<dt><img src="test1.jpg" /></dt>
		<dd>标题</dd>
		<dd>其他</dd>
	</dl>
</div>
<p>

</p>
<h1>左右表格</h1>
<p><style>
    .dataList {
        width: 100%;
        height: 150px;
    }

    /*DL, DT, DD TAGS LIST DATA*/
    .dataList dl {
        margin-bottom: 50px;
    }

    .dataList dl dt {
        background: #5f9be3;
        color: #fff;
        float: left;
        font-weight: bold;
        margin-right: 10px;
        padding: 5px;
        width: 100px;
    }

    .dataList dl dd {
        margin: 2px 0;
        padding: 5px 0;
    }
</style></p>
<div class="dataList">
	<dl>
		<dt>Name:</dt>
		<dd>John Don</dd>
		<dt>Age:</dt>
		<dd>23</dd>
		<dt>Gender:</dt>
		<dd>Male</dd>
		<dt>Day of Birth:</dt>
		<dd>12th May 1986</dd>
	</dl>
</div>
<p>

 <style type="text/css">
    .margins-removed {
        width: 100%;
        height: 150px;
    }

    .margins-removed dl {
        margin: 0;
        padding: 0;
    }

    .margins-removed dt {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    .margins-removed dd {
        margin: 0 0 1em 0;
        padding: 0;
    }
</style></p>
<h1>文件列表</h1>
<div class="margins-removed">
	<dl>
		<dt>Green and Golden Bell Frog</dt>
		<dd>Nisl ut aliquip ex ea commodo consequat</dd>
		<dt>Bull Frog</dt>
		<dd>Lorem ipsum dolor sit amet elit...</dd>
		<dt>Spotted frog</dt>
		<dd>Facilisis at vero eros et accumsan</dd>
	</dl>
</div>
<p>

 <style>
    .border-around {
        width: 200px;
    }

    .border-around dl {
        margin: 2em 0;
        padding: 0;
        width: 20em;
    }

    .border-around dt {
        background-color: #131210;
        color: #959289;
        padding: .5em;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        border-left: 1px solid #131210;
        border-right: 1px solid #131210;
        border-top: 1px solid #131210;
    }

    .border-around dd {
        margin: 0 0 1em 0;
        background: #DBD8D8;
        text-align: center;
        padding: 1em .5em;
        font-style: italic;
        border-left: 1px solid #131210;
        border-right: 1px solid #131210;
        border-bottom: 1px solid #131210;
    }
</style></p>
<h1>&nbsp;</h1>
<div class="border-around">
	<dl>
		<dt>Green and Golden Bell Frog</dt>
		<dd>Nisl ut aliquip ex ea commodo consequat</dd>
		<dt>Bull Frog</dt>
		<dd>Lorem ipsum dolor sit amet elit...</dd>
		<dt>Spotted frog</dt>
		<dd>Facilisis at vero eros et accumsan</dd>
	</dl>
</div>
<p>

 <style>
    .table-display {
        width: 100%;
        height: 150px;
    }

    .table-display dl {
        float: left;
        width: 520px;
        margin: 1em 0;
        padding: 0;
        border-bottom: 1px solid #999;
    }

    .table-display dt {
        clear: left;
        float: left;
        width: 200px;
        margin: 0;
        padding: 5px;
        border-top: 1px solid #999;
        font-weight: bold;
    }

    .table-display dd {
        float: left;
        width: 300px;
        margin: 0;
        padding: 5px;
        border-top: 1px solid #999;
    }
</style></p>
<div class="table-display">
	<dl>
		<dt>Green and Golden Bell Frog</dt>
		<dd>Nisl ut aliquip ex ea commodo consequat</dd>
		<dt>Bull Frog</dt>
		<dd>Lorem ipsum dolor sit amet elit...</dd>
		<dt>Spotted frog</dt>
		<dd>Facilisis at vero eros et accumsan</dd>
	</dl>
</div>
<p>

 <style>
    .float-right {
        width: 100%;
        height: 150px;
    }

    .float-right dl {
        border: 1px solid #000;
        background-color: #ddd;
        width: 142px;
        text-align: center;
        padding: 0 0 10px 0;
        float: right;
        margin: 0 0 1em 1em;
    }

    .float-right dt {
        font-weight: bold;
        background-color: #131210;
        color: #959289;
        padding: 5px 10px;
        margin-bottom: 10px;
    }

    .float-right dd img {
        border: 1px solid #000;
        width: 100px;
        height: 100px;
    }

    .float-right dd {
        margin: 0;
        padding: 0 10px 5px 10px;
        font-size: 85%;
    }
</style></p>
<div class="float-right">
	<dl>
		<dt>Banksia flower</dt>
		<dd><img alt="" src="test1.jpg" /></dd>
		<dd><em>Banksius maximus</em></dd>
		<dd>Found off the coast of Australia</dd>
	</dl>
</div>
<p>

 <style>
    dl.event {
        margin: 2em 0;
        padding: 0;
        font-family: georgia, times, serif;
    }

    .event dt {
        position: relative;
        left: 0;
        top: 1.1em;
        width: 5em;
        font-weight: bold;
    }

    .event dd {
        border-left: 1px solid #000;
        margin: 0 0 0 6em;
        padding: 0 0 .5em .5em;
    }
</style></p>
<dl class="event">
	<dt>23 March</dt>
	<dd>Car club meeting</dd>
	<dd>7pm</dd>
	<dd>See a wide range of classic cars on display...</dd>
	<dt>13 June</dt>
	<dd>Cake stall</dd>
	<dd>12pm</dd>
	<dd>Cakes of every type. All proceeds go to the...</dd>
</dl>
<p>