博客设置

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; 就会让图片左侧显示...