<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<head>
<title>不规则图片环绕文字</title>
<style>
html, body {
margin: 0px;
padding: 40px 0 0 100px;
background:#000;color:#fff;font-size:14px;
}
div{margin: 0px;
padding: 0px;
border: 0px;
color:#fff;font-size:14px;}
#content {
background: url(http://www.donews.net/images/www_donews_net/dodo/49134/o_003.jpg) no-repeat;
margin: 0px;
padding: 0px;
border: 0px;
line-height:155%
}
.blank {
float: left;
clear: left;
margin: 0px 25px 0px 0px;
font-size:9px;font-family:arial;
height:21px
}
</style>
</head>
<body>
<div id="content">
<div class="blank" style="width:175px;">1 </div>
<div class="blank" style="width:180px;">2 </div>
<div class="blank" style="width:170px;">3 </div>
<div class="blank" style="width:166px;">4 </div>
<div class="blank" style="width:160px;">5 </div>
<div class="blank" style="width:155px;">6 </div>
<div class="blank" style="width:138px;">7 </div>
<div class="blank" style="width:136px;">8 </div>
<div class="blank" style="width:120px;">9 </div>
<div class="blank" style="width:126px;">10 </div>
<div class="blank" style="width:132px;">11 </div>
<div class="blank" style="width:138px;">12 </div>
<div class="blank" style="width:138px;">13 </div>
<div class="blank" style="width:138px;">14 </div>
月色正朦胧<br />
与清风把酒相送<br />
太多的诗颂<br />
醉生梦死也空<br />
和你醉后缠绵<br />
你曾记得<br />
乱了分寸的心动<br />
怎么只有这首歌<br />
会让你轻声合<br />
醉清风<br />
梦镜的虚有<br />
琴声一曲相送<br />
还有没有情浓<br />
风花雪月颜容<br />
</div>
</body>
</html>
分享到:
相关推荐
div边框加文字效果
点击文字弹出一个DIV层窗口代码,下载就能用
如何实现“文字环绕图片”的霸道效果呢?!!(虽然感觉很2,没有哪个UI设计师会这样设计一个网页。但是觉得这种排版好有趣哦~) 答案就是,用动态div啦~ 把文字分成4块,环绕着图片。图片的大小和div的大小事先...
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航,就尝试做了一下。结果碰到了几个问题,后来在同事的提醒下总算完成了,记录一下也跟大家分享分享。 先看图(图片...
Div+CSS规则整理 DIV CSS
DIV 文字可以换行但是纯数字和字母不可以换行解决方案
div中多行文字垂直居中
有的时候flash上放div的话;在div里边在放文字的话;div的文字会不显示的;本实例就是为了解决这个问题写的实例;希望和我一样遇到这问题的朋友能帮到你们;
一款简洁实用的DIV+CSS图标文字列表布局样式代码,不错的网页图文列表布局排版效果。
DIV+CSS学习基础规则大全,精心整理的HTML网页设计基础规则知识,从菜鸟到高手都需要了解的HTML知识。
基于DIV的JS滚动条控制文字滚动特效,拖动滚动条,文字区域可上下滚动,滚动条也是自定义的,不是默认风格的滚动条,本滚动条不但兼容IE浏览器,还可正常运行于火狐和Chrome等浏览器中。
可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...
XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: <div id="container"> <div id="header"><h1>Header</h1></div> <div id="wrapper"> <div id=...
在页面中的div做滚动条,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,使得div在固定的宽度和高度内可以显示更多的内容。
利用css的clear属性实现广告文字环绕效果_网页代码站(www.webdm.cn) <div style="float:left;"> <div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层,利用该层的高度控制广告层上下的位置。...
使用DIV+CSS达到文字阴影的一个效果代码!
外部DIV如何强制宽度不被内部DIV撑开
div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...