HTML8模块 左图片右标题简介div css布局模块，局部DIV+CSS模块布局介绍与代码+效果在线演示+打包下载。
HTML8模块效果截图
如果是单独的左边图片，右边标题加简介，一般作为普通布局即可，使用div、h3等普通html标签元素布局即可。
一、div css模块分析
这样的局部布局实现，首先还是认清它的结构，首先我们可以看作左右结构布局（也就使用float:left和float:right实现左右结构布局），左边单独的图片，右边可以使用一个div盒子布局，右侧又可以分为上下结构的布局，而标题为上一般使用h3标签布局标题，内容可以使用span也可以使用div布局简介内容，简介内容需要注意，为了左右布局对齐布局，一般简介和标题字数都是需要程序控制调用最多多少个字数的，当然我们就按照他现有效果布局即可。
比起大网页结构布局来说，这个局部模块布局比较小而已，所以麻雀虽小，五脏俱在。打破对大网页有结构想法，要认识再小的模块或局部都是随时存在结构布局的。
二、CSS模块布局所需准备
为了兼容各大浏览器依然使用HTML8初始化模板，在此基础上进行此模块的布局。
1、布局这样确定的模块，实现知道宽度，当然这里是单独的局部我们就布局居中即可
2、左边是图片素材，所以我们需要PS获取这个图片，切出图片素材宽度为112高度为75,所以我们将图片命名为“i112x75.jpg”
3、基础设置需要对body字体颜色设置，带超链接文字颜色，以及鼠标悬停时文字颜色进行设置。
三、关键代码
1、关键HTML代码
- <div class="HTML8">
- <a href="#"><img src="images/i112x75.jpg" /></a>
- <div class="right">
- <h3><a href="#">标题内容标题内容标题内容</a></h3>
- <div>那么不要再犹豫了，因为没有任何理由不选择这儿 <span>...<a href="#">[详细]</a></span></div>
- </div>
- </div>
2、关键CSS代码
- .HTML8{ margin:0 auto; width:310px; overflow:hidden}
- .HTML8 img{ float:left; width:112px; height:75px}
- .HTML8 .right{ float:right; width:188px; text-align:left}
- .HTML8 .right h3{ height:26px; line-height:26px;font-family:"Microsoft YaHei";
- font-size:16px; overflow:hidden;}
- .HTML8 .right div{ padding-top:5px; height:44px;overflow:hidden}
- .HTML8 .right div span{color:#353535}
这里特别说明下：
1）、因为此“.HTML8”模块内只有一个img图片，所以直接使用“.HTML8 img”对图片设置靠左等样式从而节约代码。
2）、这里设置overflow:hidden，作用是避免对应盒子内容过多从而内容撑破或溢出，这样可以实现布局对齐完美效果。
3、DIV+CSS布局模块的效果截图
左图右内容的模块CSS布局效果截图
四、演示与下载
1、HTML8模块演示
2、完整左图右内容CSS模块打包下载