教程：CSS高级技巧之文字环绕图片

CPU

濠电偞鍨堕幐鍓у垝椤栨凹鐔嗛柨鐕傛嫹

闂備礁鎲￠崝鏇㈠箠鎼淬劍鍋ら柨鐕傛嫹

闂備礁鎼€氼參宕曢崘鑼殾闁跨噦鎷�

闂備胶枪缁绘劙藝閻㈢ǹ鐓橀柨鐕傛嫹

缂備胶铏庨崣搴ㄥ礈濞戞◤娲晸閿燂拷

闂備礁鎼€氼剚鏅舵禒瀣︽慨妯挎硾闂傤垶鏌ㄩ悤鍌涘

闂備浇妗ㄩ悞锔界珶閸℃稒鍋夐柨鐕傛嫹

濠电姰鍨奸崺鏍偋閻愪警鏁婇柨鐕傛嫹

闂備浇妗ㄧ粈渚€鎮洪妸銉㈡敠闁逞嶆嫹

缂傚倷鐒﹂〃鍡椢涙笟鈧、娆撳炊椤掆偓鐎氬鏌ㄩ悤鍌涘

闂備胶枪缁绘垵锕㈤崷顓炲灊闁跨噦鎷�

CPU

濠电偞鍨堕幐鍓у垝椤栨凹鐔嗛柨鐕傛嫹

闂備礁鎲￠崝鏇㈠箠鎼淬劍鍋ら柨鐕傛嫹

闂備礁鎼€氼參宕曢崘鑼殾闁跨噦鎷�

闂備胶枪缁绘劙藝閻㈢ǹ鐓橀柨鐕傛嫹

缂備胶铏庨崣搴ㄥ礈濞戞◤娲晸閿燂拷

闂備礁鎼€氼剚鏅舵禒瀣︽慨妯挎硾闂傤垶鏌ㄩ悤鍌涘

闂備礁鎼悧鎰枍閿濆鏁婇柛顐犲劜閸嬨劑鏌涢…鎴濅簽闁绘牭鎷�

闂備浇妗ㄩ悞锔界珶閸℃稒鍋夐柨鐕傛嫹

濠电姰鍨奸崺鏍偋閻愪警鏁婇柨鐕傛嫹

闂備浇妗ㄧ粈渚€鎮洪妸銉㈡敠闁逞嶆嫹

缂傚倷鐒﹂〃鍡椢涙笟鈧、娆撳炊椤掆偓鐎氬鏌ㄩ悤鍌涘

闂備胶枪缁绘垵锕㈤崷顓炲灊闁跨噦鎷�

闂備胶鎳撻悘婵堢矓瀹曞洨绀婇柡鍐ㄥ€哥€垫煡鏌ゆ慨鎰偓妤呭春閿燂拷

闂佸湱鍘ч悺銊ヮ潖婵犳艾鏋侀柕鍫濇婵粍銇勯弽銊ф噭妞ゆ劧鎷�

濠殿喗甯楃粙鎺楀垂閻㈠壊鏁囬柛锔诲幐閸嬫捇鎮烽柇锔叫﹂梺鍛婄懕閹凤拷

缂傚倸鍊搁崯顖炲垂閸︻厼鍨濋柛鎾茶閸嬫捇鎮烽柇锔叫﹂梺鍛婄懕閹凤拷

缂傚倷绶￠崹闈涚暦閻㈤潧鍨濋柣鎴灻杈ㄤ繆椤栨碍鎯堟い鏇嫹

闂備礁鎼崐瑙勫垔娴犲瀚冮悗锝庡枛缁€鍫⑩偓骞垮劚濞层劍瀵奸敓锟�

缂傚倸鍊风粈浣衡偓姘煎枤缁辩偞寰勫畝鈧壕濂告倵濞戞顏囶暯

缂傚倸鍊搁崯顖炲垂閸︻厼鍨濋柛鎾茶閸嬫捇鎮烽柇锔叫﹂梺鍛婄懕閹凤拷

缂傚倸鍊搁崯顖炲垂閸ф违濠㈣埖鍔曠粈鍡涙煛閸垺鏆╃紒瀣舵嫹

缂傚倸鍊搁崯顖炲垂閸︻厼鍨濋柤鍝ユ暩椤╂煡鏌曢崼婵囶棤闁靛牞鎷�

闂佸搫顦遍崕鎰板垂椤栨埃鏋庨柕蹇嬪€曞Λ妯好归悡搴ｆ憼妞わ讣鎷�

濠电偞鍨堕幐濠氭嚌妤ｅ啫鑸归悗闈涙啞鐏忓酣鏌涢弴銊ユ珮闁哥儑鎷�

闂佽娴烽幊鎾凰囬鐐茬煑闊洦娲樼亸搴ㄦ煕閺囥劌娅橀柛鐑囨嫹

濠电偞鍨堕幐濠氭嚌妤ｅ啫鑸归柟缁㈠枛缁€澶愭煏婵犲繗鍚傞柛瀣崌閺佹捇鏁撻敓锟�

CPU

濠电偞鍨堕幐鍓у垝椤栨凹鐔嗛柨鐕傛嫹

闂備礁鎲￠崝鏇㈠箠鎼淬劍鍋ら柨鐕傛嫹

闂備礁鎼€氼參宕曢崘鑼殾闁跨噦鎷�

闂備胶枪缁绘劙藝閻㈢ǹ鐓橀柨鐕傛嫹

缂備胶铏庨崣搴ㄥ礈濞戞◤娲晸閿燂拷

闂備礁鎼€氼剚鏅舵禒瀣︽慨妯挎硾闂傤垶鏌ㄩ悤鍌涘

闂備浇妗ㄩ悞锔界珶閸℃稒鍋夐柨鐕傛嫹

濠电姰鍨奸崺鏍偋閻愪警鏁婇柨鐕傛嫹

闂備浇妗ㄧ粈渚€鎮洪妸銉㈡敠闁逞嶆嫹

闂備胶枪缁绘垵锕㈤崷顓炲灊闁跨噦鎷�

⊕ 网站首页 ⊕注册会员 ⊕ 本站免费电影 ⊕ 留言板 ⊕ 繁體中文

您现在的位置：陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文

闂備焦妞垮鈧紒鎻掝煼瀹曟粓鎼归锝呭妳闂佸搫鍟崐褰掑汲韫囨拹娑㈡晲閸℃瑥鈷岄梺闈涙４閹凤拷

缂備胶铏庨崣搴ㄥ礂濞戞ǚ鏋庨柕蹇娾偓宕囩獮闂佸疇妗ㄩ懗鍫曞垂閿燂拷

濠电偛鐡ㄧ猾鍌炲礃閳哄倸鍓梺璇茬凹缁茬粯绔熼崼銉ョ獥闁跨噦鎷�

闂佸搫顦遍崕鎰板垂椤栨埃鏋庨柕蹇婃噰閸嬫挸鈽夊畷鍥╂殺闁诲孩鐔幏锟�

缂傚倸鍊搁崯顖炲垂閸︻厼鍨濋柤绋跨仛閸庣喖鏌￠崘銊モ偓褰掑汲閿燂拷

IT闂備礁鎼崐鐑藉础閸愬樊娓婚柨鐕傛嫹

闂佸湱鍘ч悺銊ヮ潖婵犳艾鏋侀柕鍫濐槸缁狀噣鏌嶈閸撴瑩顢欒箛娑欐櫢闁跨噦鎷�

闂備焦妞垮鈧紒鎻掝煼瀹曟粌鐣烽崶鈺冿紲缂傚倸鐗忔慨鐢稿矗閿燂拷

闂佽崵鍠愰悷銉ノ涘┑瀣ㄢ偓鍌炲醇閺囩偞鐎┑鐐叉閸ㄧ喖寮婚敓锟�

专题栏目

婵犵數鍋涙径鍥礈濠靛棴鑰垮ù锝呮贡椤╃兘鎮规担鍝ワ紞缂佸鐏濋埥澶愬箻鐎涙ê纾冲銈忕导缁瑥顕ｉ崐鐔虹杸闁哄洨鍠撻悰锟�

最新热门

最新推荐

相关文章

Photoshop教程：制作旋转
 PhotoShop教程：制作个性
 iPhone 4一卡双号教程
 XT701免费升级800万像素
 5230乐随享服务激活简易
 Windows7下通过HDMI连接
 Windows优化大师使用教程
 强制退出游戏后不扣分详
 eNet部分视频教程无法播
 教程:国标麻将规则及番种

教程：CSS高级技巧之文字环绕图片

教程：CSS高级技巧之文字环绕图片

作者：陈鹏文章来源：eNet 点击数：92 更新时间：2009-9-12 8:46:42

文字环绕图片(SandBags)

　　在印刷业中, 常用的文字图片混搭的排版法被延伸到了Web视觉设计中, 如何来完成呢?
这里说的并不是简单的文字包围图片, 不过原理很类似, 同样是通过float属性来完成效果的. 先看一看效果图:

　　这应该不是简单的图片float能完成的了吧?

　　不过实现的原理还是不是很推荐, 因为有相当多的额外标签, 整份文档看起来并不是非常语义化.

　　说归说, 示例代码还是要给出来的.

　　HTML代码如下:

＜div class="wrap_area">
＜img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />

＜div class="shape_wrap">
＜div style="width: 250px;">＜/div>
＜div style="width: 280px;">＜/div>
＜div style="width: 305px;">＜/div>
.
.
.
＜/div>

＜p>Numerous blocks of text＜/p>
.
.
.
＜/div>

　　CSS代码大致如下:

div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }

　　CSS掌握的不错的同学们应该就已经知道其中的奥妙了, 同样是利用 float 将div部分内容提出文档流, 然后等于是挖人工河一样, 用div的堆砌造出一条正文要通过的 "渠道".

　　适合于纯视觉化设计的效果.

热门推荐：

在命令行下配置XP防火墙的办法

解决四种宽带路由器不能上网故障

文章录入：陈鹏责任编辑：陈鹏

上一篇文章： CSS+DIV实现图片动态显示

下一篇文章：教程：CSS高级技巧之阴影效果

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】