`
hipeace87
  • 浏览: 175181 次
  • 性别: Icon_minigender_1
  • 来自: 山东菏泽
社区版块
存档分类
最新评论

Div+css 实现图文混排

    博客分类:
  • DOM
阅读更多
<!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>

 很不错的效果!!!!!!!

 

 

1
0
分享到:
评论

相关推荐

    div+css布局实例淘宝网分析

    随着互联网技术的不断发展,网站设计已经从简单的图文混排发展到了更加注重用户体验和交互性的阶段。在这个过程中,div+css布局作为一种灵活且高效的网页布局方式逐渐成为了前端开发中的主流选择。本文将通过对淘宝...

    DIV+CSS案例(11-20)

    7. **化石网**:可能是关于文物或古生物的教育性网站,利用`CSS`来设计有教育感的界面,如时间线、图文混排、信息图等。 8. **韩国料理**:类似欢乐西餐厅,但重点在于展示韩国料理特色,可能包含食谱分享、预约...

    div+css页面布局.rar

    2. 浮动(float):浮动最初是为了实现图文混排,但在Div+CSS布局中,通过设置元素浮动,可以使其脱离正常文档流,从而实现横向排列或创建多列布局。 3. 定位(positioning):通过设置position属性(如static、...

    Div+CSS资料大全

    5. **浮动与清除**:浮动(float)常用于实现图文混排,但会引发父元素高度塌陷问题,此时需用到清除(clear)来恢复正常的布局顺序。 6. **响应式设计**:随着移动设备的普及,Div+CSS的响应式设计变得至关重要。...

    2天驾驭DIV+CSS(全新发布2.0.3版本)

    浮动技术可以让元素脱离常规的文档流,实现图文混排;而定位则让元素可以自由地在页面上定位,包括相对定位、绝对定位、固定定位等。 ### 清除浮动和导航条设计 清除浮动是解决浮动元素带来的布局问题的关键技术,...

    div+css新闻发布系统

    2. 图文混排:结合`&lt;img&gt;`元素和文本,实现图文并茂的新闻展示。 3. 交互设计:通过CSS动画和JavaScript实现悬停效果、点击展开/收起等功能,增强用户体验。 总结,"div+css新闻发布系统"是利用HTML和CSS技术构建的...

    Div+Css网页版式布局

    9. **浮动(Float)**:浮动最初用于创建图文混排,但现在更多地用于创建多列布局。`float: left;` 或 `float: right;` 可以让元素向左或向右浮动,从而让其他元素环绕其周围。 10. **Flexbox布局**:Flexbox是CSS3...

    div+css教案.pdf

    3. 图片样式和图文混排:介绍如何控制图片样式和在文本中排列图片。 4. 背景图像:学习如何设置网页背景和页面布局。 5. 列表样式:教授如何设计不同类型的列表样式。 6. 表格样式:讲解CSS在表格设计中的应用。 7. ...

    基于DIV_CSS的个人博客网页设计应用研究

    图文混排是网页内容排版中的重要内容,只有通过图文混编,枯燥的文字才能变得生动,多彩的图片才能和文字有序的排列在一起。 结语 本文通过对基于 DIV+CSS 的个人博客网页设计应用研究,展示了 DIV+CSS 布局方法的...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    - **图文混排**: 利用CSS Grid或Flex布局实现图片与文本的合理排列。 #### 2.2 美观性与实用性兼顾 - **色彩搭配**: 选择合适的色彩方案,使网站看起来舒适且吸引人。 - **字体设置**: 合理选用字体大小、行间距...

    美食介绍网页,html+css,包括tabs切换,css轮播图

    “css轮播图”指的是使用CSS技术实现的图片轮播功能。轮播图(Slider或Carousel)通常用于在有限的空间内展示多张图片或内容,常用于首页的焦点图或者商品展示。通过CSS,可以控制轮播图的动画效果,如自动切换、...

    用DIV+CSS技术设计的西安旅游网站18页(web前端网页制作课作业)HTML+CSS旅游网站设计与实现

    - **图文混排**: 使用适当的CSS样式展示图文结合的信息。 - **分页**: 通过JavaScript实现内容分页加载。 - **评论系统**: 允许用户留下反馈或评价。 #### 3. 表单设计 - **用户注册/登录**: 提供简单的表单让用户...

    变幻之美DIV+CSS

    制作图文混排的页面元素; ?通过修改CSS文件实现页面重构; ?在页面中插入Flash文件; ?class与id同时配合使用; ?“代码重用”的编码思路; ?应用CSS实现“当前页”效果; ?以CSS实现截字效果; ?自适应高度...

    《精通CSS+DIV网页样式与布局》光盘源码

     4.3 图文混排   4.4 图文实例:八仙过海  . 第5章 用CSS设置网页中的背景   5.1 背景颜色   5.2 背景图片   5.3 背景综合一:我的个人主页   5.4 背景综合二:古词《念奴娇·赤壁怀古》   第...

    DIV+CSS实例.pdf

    - **浮动(float)**: `float`属性用于元素的布局,可设置为`left`、`right`或`none`,常用于创建图文混排的效果。 - **字体(font)**: CSS允许设置字体系列、大小、风格(如粗体、斜体)等,例如`font-family`、`font...

    CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx

    在网页设计中,图文混排是一项常见的任务,尤其是在新闻、博客...总之,通过这样的CSS+Table方法,我们可以轻松实现图文混排中的文本自适应图片宽度,而且无需担心浏览器兼容性问题,让网页设计变得更加高效和美观。

    div+css有实例,易学易懂

    - **图文混排**:处理文本和图像的排列方式。 #### 行高与间隔 - **行高属性详解**:通过`line-height`属性设置。 - **利用行高属性使文本垂直居中**:结合`line-height`和`height`属性。 - **间隔与空白**:使用`...

    图文混排的导航条

    用div+css制作的简单的图文混排的导航条

    图文轮播(js+css+html)

    总结来说,创建一个左右滚动的图文轮播涉及HTML构建基本结构,CSS进行样式设计和动画效果,以及JavaScript实现动态交互。这三者共同协作,才能让网页的图文轮播功能既美观又实用。在实际开发中,开发者需要灵活运用...

    webView图文混排.zip

    在本教程“webView图文混排.zip”中,我们将深入探讨如何在`webView`中实现图文混排,以创建更丰富、更具吸引力的用户体验。 1. **图文混排基础** 图文混排是指在一个布局中同时展示文字和图片,使得信息呈现更加...

Global site tag (gtag.js) - Google Analytics