CSS Samples in MSN Spaces - No Table Tags for the Pics
拒绝表格标签, 完全使用CSS进行图片嵌入日志排版, 并应用CSS样式实现图片的边框效果:
这是一张原图:
这是最终排版后的效果图, 其中文字和图片实现了混排且给图片加上了边框效果 :)
南山经之首曰鹊山。其首曰招摇之山，临于西海之上，多桂，多金玉。有草焉，其状如韭而青华，其名曰祝余，食之不饥。有木焉，其状如谷而黑理，其华四照，其名曰迷谷，佩之不迷。有兽焉，其状如禺而白耳，伏行人走，其名曰狌々，食之善走。丽{鹿旨}之水出焉，而西流注于海，其中多育沛，佩之无瘕疾。
又东三百里，曰堂庭之山，多棪木，多白猿，多水玉，多黄金。
又东三百八十里，曰猨翼之山，其中多怪兽，水多怪鱼，多白玉，多蝮虫，多怪蛇，多怪木，不可以上！
又东三百七十里，曰杻阳之山，其阳多赤金，其阴多白金。有兽焉，其状如马而白首，其文如虎而赤尾，其音如谣，其名曰鹿蜀，佩之宜子孙。怪水出焉，而东流注于宪翼之水。其中多玄龟，其状如龟而鸟首虺尾，其名曰旋龟，其音如判木，佩之不聋，可以为底。
CSS + HTML源代码:
<div style="border: #a5cf3d 1px solid; background-color:#fff">
<div style="border: #fff 14px solid;">
<div style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#F5950B; text-align:left">
<div style="float:right; border-left:1px #eeeeee solid; border-top:1px #eeeeee solid; border-bottom:1px #cccccc solid; border-right:1px #cccccc solid;">
<div style="border:4px #ffffff solid;">
<img src="http://www.codedefect.com/spacestipspics/bfly.jpg" alt="右上角图片" />
</div>
</div>
文字区 <br/><br/> 山海经
</div>
</div>
</div>
CSS + HTML: <!-- 具体注释 -->
<div style="border: #a5cf3d 1px solid; background-color:#fff">
<!-- border:最外层边框颜色/宽度/样式 background-color:背景颜色 -->
<div style="border: #fff 14px solid;">
<!-- border: 设置最外层边框和文字区域的距离为14px 这一层可以不写, 但是会影响美观, 另外需要注意的是此处边框的颜色要和前面div的背景色一致 否则显示出来会不协调 -->
<div style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#F5950B; text-align:left">
<!-- font-family:内部文字字体 font-size:文字大小 color:文字颜色 text-align:左对齐 -->
<div style="float:right; border-left:1px #eeeeee solid; border-top:1px #eeeeee solid; border-bottom:1px #cccccc solid; border-right:1px #cccccc solid;">
<!-- float:图片右侧悬浮 大家可以直接改动代码float:left;就会让图片左侧显示 border-left/top/bottom/right 设置图片边框的宽度/颜色/样式 其中左侧和顶部边框的颜色为#eeeeee要比右侧和底部图片边框颜色#cccccc浅 -->
<div style="border:4px #ffffff solid;">
<!-- 和浅蓝色div的目的一样, 设置边框宽度为4px颜色为白色 达到图片边框和图片之间实现空白效果 -->
<img src="http://www.codedefect.com/spacestipspics/bfly.jpg" alt="右上角图片" />
<!-- 图片地址/图片解释 -->
</div>
</div>
文字区 <br/><br/> 山海经
</div>
</div>
</div> 将图片div那一块的代码夹扎在文字中间就能实现图片在右侧中部或者右侧底部等等的效果, 再啰嗦一下, 改动上面float:left; 就会让图片左侧显示...
难度: 简易, 初学者 ★☆☆☆☆
Tools 
Help
