css样式图文排版

最新推荐文章于 2022-09-14 20:24:30 发布

原创最新推荐文章于 2022-09-14 20:24:30 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #float #xhtml #integer #div

java 论论专栏收录该内容

49 篇文章

订阅专栏

<!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>

#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>

<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>