liをクラス指定せずに3カラムで並べる

<style type="text/css">
#box1{
	width: 600px;
}
ul{
	width: 615px;
	margin: 0 -15px 0 0;
	overflow: hidden;
	_zoom: 1;
	font-size:77%;
}
li{
	width: 180px;
	padding: 5px;
	margin-right: 15px;
	float: left;
	background-color: #cccccc;
}
</style>

<ul>
    <li>liボックス<br />
        幅：190px<br />
        マージン：15px</li>
    <li>liボックス<br />
        ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
    <li>liボックス<br />
        ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
</ul>

---

liをクラス指定せずに4カラムで並べる

<style type="text/css">
#box2{
	width: 600px;
}
ul{
	width: 612px;
	margin: 0 -12px 0 0;
	overflow: hidden;
	_zoom: 1;
	font-size:85%;
}
li{
	width: 131px;
	padding: 5px;
	margin-right: 12px;
	float: left;
	background-color: #cccccc;
}
</style>

<ul>
    <li>liボックス<br />
        幅：141px<br />
        マージン：12px</li>
    <li>liボックス<br />
        ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
    <li>liボックス<br />
        ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
    <li>liボックス<br />
        ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
</ul>

---

高さ指定したボックスの一番下にボタンとかを配置したい。

<style type="text/css">
#box3_1{
	border:1px solid #cccccc;
	background-color: #ffffff;
	padding: 5px;
	margin: 5px;
	height: 100px;
	position: relative;
}
#box3_1 input{
	position: absolute;
	right: 0;
	bottom: 0;
}
</style>

<div id="box3_1">
    <p>高さ：100px<br />
        ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
    <p>
        <input type="button" value="ボタン" />
    </p>
</div>

---

dt / ddを横並びにする

<style type="text/css">
dt{
	clear: left;
	float: left;
	margin:0 0 0.8em 0;
	width: 7.5em;
	padding:5px;
}
dd{
	margin:0 0 0.8em 0em;
	padding:5px 0 5px 8em;
	background-color: #cccccc;
}
</style>

<dl>
    <dt>dtです。</dt>
    <dd>ddです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</dd>
    <dt>dtです。</dt>
    <dd>ddです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</dd>
</dl>

---

<hr />に画像を使う

<style type="text/css">
*html hr{
	display :list-item;
	width:0;
	margin-left:-10px;
	list-style :url(line.png) inside;
	color:#ffffff;
	background-color: #ffffff;
}
hr{
	border:0;
	height: 26px;
	background:url(line.png) 50% 0 no-repeat;
}
</style>

<hr />

<param name="wmode" value="transparent" />
<embed wmode="transparent" ... />

#test_flash{
    position:relative;
}
#test_hoge{
    position:absolute;
    top:0px;
    left:100px;
    padding:10px;
    width:300px;
    color:#00f;
}
#test_hoge span{
    background-color:#eeeeee;
}

<script src="/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg');<!-- IE6の透過PNG対策 -->
</script>
<![endif]-->
<div id="flash">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="550" height="400" id="test" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="wmode" value="transparent" />
	<param name="movie" value="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/test.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed wmode="transparent" src="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/test.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_jp" />
	</object>
	<div id="hoge">
	<p>HTMLテキストです。</p>
	<img src="http://zaru.tofu-kun.org/wp-content/uploads/2010/02/img.png" />
	</div>
</div>