Div+css 实现图文混排

HTML样式案例

最新推荐文章于 2023-07-20 15:57:16 发布

最新推荐文章于 2023-07-20 15:57:16 发布 · 208 阅读

文章标签：

#CSS #HTML

DOM 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个HTML页面样式的实例，展示了如何使用内联CSS来布局文本和图片，包括文本居中、固定宽度高度的div以及图片的浮动效果等。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css"> 
*{ 
	margin:0px; 
	height:0px;
	} 
body
{ 
	text-align:center; 
	} 
#company_brief 
{ 
	padding:.5em; 
	width:254px; 
	height:209px;
	font-family: "宋体"; 
	font-size: 9pt; 
	line-height: 150%; 
	color: #000; 
	letter-spacing: .1em; 
	margin:0px auto; 
	text-align:left; 
	border:1px solid #000;
	} 
div img
{ 
	width:100px; 
	height:100px; 
	border:none; 
	float:right; 
	padding:.1em; 
	} 
div li
{ 
	float:left; 
	list-style:none; 
	width:100px;
    height:100px; 
	margin:10px; 
	} 
div li img
{ 
	width:100px; 
	height:100px; 
	border:none; 
	} 
</style>
</HEAD>
<BODY>
<div id="company_brief"> <img src="http://www.linxz.cn/images/index.jpg"/> 公司简介内容公司简介内容公司简介内容公司简介内容公内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容<br />
  公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容公司简介内容<br />
  <ul>
    <li><img src="http://www.linxz.cn/images/index.jpg"/></li>
    <li><img src="http://www.linxz.cn/images/index.jpg"/></li>
    <li><img src="http://www.linxz.cn/images/index.jpg"/></li>
  </ul>
</div>
</BODY>
</HTML>

很不错的效果！！！！！！！