css樣式圖文排版

sunnylovecmc發表於2009-11-08
原文網址 : https://blog.csdn.net/sunny243788557/article/details/4787431
CSS

 <!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" />
<title>css圖文排版</title>

<style type="text/css">

#menu{
 list-style-type:none;
 list-style-position:outside;
 list-style-image:none;
 margin-top:auto;
 padding-top:10px;
}

#menu li{
 /*float:left;*/
 margin:5px;
 border:solid 1px blue;
 display:inline;
}

#top{
 background-image:url(html_css_javascript/image/bg.png);
 height:40px;
 text-align:center;
}


.clearfloat { /* 此類應當放在 div 或 break 元素上，而且該元素應當是完全包含浮動的容器關閉之前的最後一個元素 */
 clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
</style>

</head>

<body>

<div id="top">
    <ul id="menu">
        <li>home</li>
        <li>home</li>
        <li>home</li>
        <li>home</li>
        <li>home</li>
    </ul>
</div>

 

<h1> 主要內容 </h1>
    <p>
   
    <div style="float:left; margin:10px;"><img src="html_css_javascript/image/hand1.gif"/></div>
   
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam.<div style="float:right; margin:10px;"><img src="html_css_javascript/image/hand1.gif"/></div> Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.
   
   
   
    </p>
    <br class="clearfloat"/>
    <hr/>
   
   
    <h2>H2 級別的標題 </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</body>
</html>

相關文章