欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS模块 >

DIVCSS5模块 左图片右标题简介div css布局模块

DIVCSS5模块 左图片右标题简介div css布局模块,局部DIV+CSS模块布局介绍与代码+效果在线演示+打包下载。

DIVCSS5模块效果截图
DIVCSS5模块效果截图

如果是单独的左边图片,右边标题加简介,一般作为普通布局即可,使用div、h3等普通html标签元素布局即可。

一、div css模块分析   -   TOP

这样的局部布局实现,首先还是认清它的结构,首先我们可以看作左右结构布局(也就使用float:leftfloat:right实现左右结构布局),左边单独的图片,右边可以使用一个div盒子布局,右侧又可以分为上下结构的布局,而标题为上一般使用h3标签布局标题,内容可以使用span也可以使用div布局简介内容,简介内容需要注意,为了左右布局对齐布局,一般简介和标题字数都是需要程序控制调用最多多少个字数的,当然我们就按照他现有效果布局即可。

比起大网页结构布局来说,这个局部模块布局比较小而已,所以麻雀虽小,五脏俱在。打破对大网页有结构想法,要认识再小的模块或局部都是随时存在结构布局的。

二、CSS模块布局所需准备   -   TOP

为了兼容各大浏览器依然使用DIVCSS5初始化模板,在此基础上进行此模块的布局。

1、布局这样确定的模块,实现知道宽度,当然这里是单独的局部我们就布局居中即可
2、左边是图片素材,所以我们需要PS获取这个图片,切出图片素材宽度为112高度为75,所以我们将图片命名为“i112x75.jpg”
3、基础设置需要对body字体颜色设置,带超链接文字颜色,以及鼠标悬停时文字颜色进行设置。

三、关键代码   -   TOP

1、关键HTML代码

  1. <div class="divcss5"> 
  2. <a href="#"><img src="images/i112x75.jpg" /></a> 
  3. <div class="right"> 
  4. <h3><a href="#">标题内容标题内容标题内容</a></h3> 
  5. <div>那么不要再犹豫了,因为没有任何理由不选择这儿 <span>...<a href="#">[详细]</a></span></div> 
  6. </div> 
  7. </div> 

2、关键CSS代码

  1. .divcss5{ margin:0 auto; width:310px; overflow:hidden} 
  2. .divcss5 img{ float:left; width:112px; height:75px} 
  3. .divcss5 .right{ float:right; width:188px; text-align:left} 
  4. .divcss5 .right h3{ height:26px; line-height:26px;font-family:"Microsoft YaHei";  
  5. font-size:16px; overflow:hidden;} 
  6. .divcss5 .right div{ padding-top:5px; height:44px;overflow:hidden} 
  7. .divcss5 .right div span{color:#353535} 

这里特别说明下:
1)、因为此“.divcss5”模块内只有一个img图片,所以直接使用“.divcss5 img”对图片设置靠左等样式从而节约代码。

2)、这里设置overflow:hidden,作用是避免对应盒子内容过多从而内容撑破或溢出,这样可以实现布局对齐完美效果。

3、DIV+CSS布局模块的效果截图

左图右内容的模块CSS布局效果截图
左图右内容的模块CSS布局效果截图

四、演示与下载   -   TOP

1、DIVCSS5模块演示

查看案例

2、完整左图右内容CSS模块打包下载

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m761.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2014-11-14 12:02 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。