文字上右下环绕广告的写法

最新推荐文章于 2025-11-05 20:48:02 发布
转载 最新推荐文章于 2025-11-05 20:48:02 发布 · 97 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yuzhongwusan/archive/2008/10/31/1323533.html
文章标签：

#xhtml

一种文字从上-右-下方向环绕广告位的一个办法：就是用一个宽度为1的空标签的高度来占位，然后图片清除浮动，来制造出这个顶部文字环绕的效果。看代码

<!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=GB2312" />
<title>利用css的clear属性搞定广告文字环绕</title>
<meta name="keywords" content="css,clear,文字环绕" />
<meta name="description" content="利用css的clear属性搞定广告文字环绕，" />
<body>
<div style="float:left;">
<div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。--></div>
<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>
<p>新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容新闻内容</p>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/10/31/1323533.html

3万字干货HTML+CSS入门指南（建议收藏）
李南江
08-01 5136
什么是浏览器 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已 常见主流浏览器 浏览器市场份额-国内统计 浏览器市场份额-国外统计 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现 IE内核 Trident 谷歌内核 WebKit / Blink 火狐内核 Gecko Saf
数据可视化Echarts—— Echarts、设置cssrem 插件的基准值、边框图片、字体图标、立即执行函数用法、无缝滚动原理
weixin_52819925的博客
08-21 1005
数据可视化 数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。 数据可视化的场景：数据可视化在互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑&图分析，地理可视化等。 常见的数据可视化库 D3.js目前 Web 端评价最高的 Javascript 可视化工具库(入手难) 。 ECharts.js百度出品的一个开源 Javascript 数据可视化库。 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用。 AntV蚂蚁金服全新一代数据
利用css的clear属性实现广告文字环绕效果
07-18
<!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> <title>利用css的clear属性实现广告文字环绕效果_网页代码站(www.webdm.cn)</title> <body> <div style="float:left;"> <div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。--></div> <div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div> <p>北京华侨城flash片头，Flash宣传动画源码，旅游地产类flash动画，动画效果流畅，大公司用过的动画，值得借鉴哦。一个完美的Flash网站片头效果，并且包括了fla格式的源文件，是一个房地产公司网站的片头文件，用到了Flash遮罩技术实现了画笔绘图写字效果，创意也比较不错，Flash源码分享给大家。韩国欢乐家庭flash横幅动画源文件，韩国的一个Flash动画剪辑，制作精美，希望大家喜欢。国外音乐网站flash片头源文件，做音乐网站的朋友们，或许可以参考一下呢？本源码来自国外网站。Flash公司办事处地图+TXT数据调用包，请确认你安装了最新版的Flash Player，其实这不算是一个严格的Flash地图，我觉得如果你是一个比较大的公司，用这个Flash显示公司在全国各地的办事处地址比较合适，用TXT存储数据，因此所有数据都可在TXT中修改。一个Flash结合jquery实现的特效，加载远程图片显示进度条，对进度条可方便的定义，代码内loadBg为背景DIV，loading为加载条DIV，loadText为百分比DIV；加载完毕后回调函数----回调参数说明:url-传回图片地址值,picDiv-传回所加载图片DIV的ID,w-传回的图片原始宽度,h-传回的图片原始高度； 　　加载图片事件参数说明： 　　url-图片路径,picDiv-装载图片的DIV的ID，用法：loadImg。Flash个人简历模板源文件，如果你应聘的是一家动画设计公司，相信有这么一个Flash动作制作的个人简历，肯定会得到老板的赏识，如果你对Flash个人简历模板不再行，那么就请赶快下载这套模板吧。 </p> </div> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> </body> </html>
CSS实现文字环绕图片效果
09-24
主要为大家详细介绍了CSS文字环绕图片遇到的问题及解决方法，感兴趣的小伙伴们可以参考一下
自适应资源网站文字广告位代码
专注于与编程相关的知识内容分享
02-28 1578
自适应资源网站文字广告位代码,html源码，记事本修改里面的内容即可。
css 文字广告
qq_41144591的博客
04-11 287
css3公告栏文字广告
HTML+CSS基础小总结，随手过来翻一翻
扛麻袋的少年的博客
09-10 2303
字体文本 1.字体复合属性 通常我们对字体进行修饰时，使用的是如下方式： body { font-style: normal; font-weight: 700; font-size: 18px; line-height: 40px; font-family: "Microsoft Yahei"; } 字体复合属性可以把以上文字样式综合来写，这样可以更节约代码： body { font: font-style font-weight font-size/line-height font-fam
css知识点2
想要上南大的同学的博客
07-16 804
三 css第03天 14 其他样式 14.1 圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：border-top-left-radius、bord
前端复习3：CSS-2
weixin_42476709的博客
03-13 597
前端复习3：CSS-21、CSS 三大特性1.1 CSS层叠性1.2 CSS继承性1.3 CSS优先级2、盒子模型（Box Model）2.1 盒子边框（border）2.2 内边距（padding）2.3 外边距（margin）3 浮动(float)3.2 清除浮动2.2 盒子边框（border） 1、CSS 三大特性 1.1 CSS层叠性 （1） 概念：是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 （
css 文字上右下环绕广告的写法
09-27
在网页设计中，有时我们...总结起来，实现CSS文字上右下环绕广告的关键在于巧妙地运用`float`和`clear`属性，以及适当的占位符元素。通过这种方式，我们可以创建出富有创意的网页布局，同时保持内容的可读性和美观性。
【Echarts数据可视化】一个项目带你学会酷炫的数据可视化
m0_61549953的博客
04-18 665
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’],data: [‘上海’, ‘广州’, ‘北京’, ‘深圳’, ‘合肥’, ‘’, ‘…’, ‘’, ‘杭州’, ‘厦门’, ‘济南’, ‘成都’, ‘重庆’]
文字环绕是css 什么属性,利用css的clear属性搞定广告文字环绕效果
weixin_32029321的博客
08-04 449
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。代码示例：一个宽为0的空白层，...
段落中字体围绕第一个字 或者字体围绕图片
sunlizhen的专栏
07-20 1230
放大看酸辣粉你俩快点撒娇疯狂的思考了疯狂的酸辣粉考虑对方考虑的考虑发sd卡浪费点卡考了多少分？   .first{             width:300px;             height:300px;             border:1px solid #ccc;             margin:0 auto;         }      
文字环绕图片布局
程序猿_hw的博客
12-20 3209
实现文字环绕图片布局。  &lt;div style="width:400px;"&gt; &lt;div style="float:left; clear: both;" align="center"&gt; &lt;img src="/images/w11.jpg" width="120" alt="" hs
HTML - 换行标签的 3 种写法（＜br＞、＜br/＞、＜br /＞）
weixin_52173250的博客
11-05 321
HTML - 换行标签的 3 种写法（<br>、<br/>、<br />）
含分布式电源的配电网可靠性评估研究（Matlab代码实现）
12-06
含分布式电源的配电网可靠性评估研究（Matlab代码实现）
快捷粘贴工具：快速管理常用文本片段一键粘贴提高工作效率，支持自定义热键和分组管理让重复输入成为 “一键了之” 的轻松事
最新发布
12-06
## 软件功能详细介绍 1. **文本片段管理**：可以添加、编辑、删除常用文本片段，方便快速调用 2. **分组管理**：支持创建多个分组，不同类型的文本片段可以分类存储 3. **热键绑定**：为每个文本片段绑定自定义热键，实现一键粘贴 4. **窗口置顶**：支持窗口置顶功能，方便在其他应用程序上直接使用 5. **自动隐藏**：可以设置自动隐藏，减少桌面占用空间 6. **数据持久化**：所有配置和文本片段会自动保存，下次启动时自动加载 ## 软件使用技巧说明 1. **快速添加文本**：在文本输入框中输入内容后，点击"添加内容"按钮即可快速添加 2. **批量管理**：可以同时编辑多个文本片段，提高管理效率 3. **热键冲突处理**：如果设置的热键与系统或其他软件冲突，会自动提示 4. **分组切换**：使用分组按钮可以快速切换不同类别的文本片段 5. **文本格式化**：支持在文本片段中使用换行符和制表符等格式 ## 软件操作方法指南 1. **启动软件**：双击"大飞哥软件自习室——快捷粘贴工具.exe"文件即可启动 2. **添加文本片段**： - 在主界面的文本输入框中输入要保存的内容 - 点击"添加内容"按钮 - 在弹出的对话框中设置热键和分组 - 点击"确定"保存 3. **使用热键粘贴**： - 确保软件处于运行状态 - 在需要粘贴的位置按下设置的热键 - 文本片段会自动粘贴到当前位置 4. **编辑文本片段**： - 选中要编辑的文本片段 - 点击"编辑"按钮 - 修改内容或热键设置 - 点击"确定"保存修改 5. **删除文本片段**： - 选中要删除的文本片段 - 点击"删除"按钮 - 在确认对话框中点击"确定"即可删除
web网页中一张图片被文字上右下环绕的HTML+CSS代码
06-07
要实现一张图片被文字上右下环绕的效果，可以使用CSS的float属性和margin属性来实现。以下是一个示例代码： HTML代码： ``` <p>Your text here ``` CSS代码： ``` .image-wrapper { width: 100%; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值