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

DIVCSS5模块 上标题下(左图片 右简介)DIV CSS布局

DIVCSS5模块 上标题下(图片 简介)DIV CSS布局完整HTML+CSS代码,实例模块布局教程,图文在线演示,完整案例压缩包下载。

上下结构上标题下(左图右简介)DIV CSS模块效果截图
上下结构上标题下(左图右简介)DIV CSS模块效果截图

这样的布局在实际中常遇到,这里DIVCSS5以单独一个这样的局部模块为布局实例对象。上为文章标题、下结构为左边图片右边简介局部。

一、DIVCSS模块分析   -   TOP

遇到这样的CSS布局首先要分析其结构首先从上到下分析为上下结构,上为文章标题,下右分为左右结构其中左边为图片,右边为简介内容。

常见用到DIV布局结构,上标题可以使用h3标签,下左边图片可以直接对img标签设置靠左float:left样式,右边简介可以使用一个div标签布局。

布局这样的首先考虑到标题、简介、图片等宽度高度是否有限制,通常为了实践布局对齐一般标题宽度高度、图片高度宽度、简介高度宽度均固定死,内容可少可多,但内容多时候不能超出各自盒子范围。这个时候对标题、简介局部设置CSS高度CSS宽度同时设置隐藏超出溢出内容样式Overflow:hidden。

这里模块中的简介一般最多显示多少个字数通常通过程序控制从数据库调用多少个字,所以后面的省略号是手动加入的,并程序限制死最多显示多少个文字,我们CSS DIV布局时,不要超出字数即可。

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

1、初始化模板准备
为了兼容各大浏览器仍然使用DIVCSS5提供初始化模板,在此基础上进行此模块的布局。以免不兼容各大浏览器。

在提供初始化模板基础上进行基础修改,以适应本局部模块CSS布局。

2、图片素材
本实例模块没有其它图标图片素材,只有一个图片内容,只需要切出使用即可,这里命名为“i90x60,jpg”,保存到images文件夹里即可。

三、DIV+CSS模块布局关键代码与效果截图   -   TOP

1、关键HTML代码

  1. <div class="warp-box"> 
  2.     <h3><a href="#">文章标题 总价过亿元天价豪车盘点</a></h3> 
  3.     <div class="box"> 
  4.         <a href="#"><img src="images/i90x60.jpg" /></a> 
  5.         <div> 
  6.             召开了14年秋季拍立得新品发布会,发布了两款全新的拍立得新品及五款特别款新品 
  7.             ......[<a href="#">详情</a>
  8.         </div> 
  9.     </div> 
  10. </div> 

因为在.box盒子里div和img标签为此盒子唯一标签,所以没有再单独给予加入class命名,直接对标签设置CSS样式。

2、关键CSS代码

  1. a:hover,.warp-box h3 a:hover,.warp-box .box div a:hover{color:#FF8C04} 
  2.  
  3. .warp-box{ margin:0 auto; width:280px} 
  4. .warp-box h3{height:46px; line-height:46px; font-weight:bold; 
  5. font-size:14px; font-family:"\5FAE\8F6F\96C5\9ED1"} 
  6. .warp-box h3 a{ color:#388FEC} 
  7. .warp-box .box{ overflow:hidden} 
  8. .warp-box .box img{ float:left; width:90px; height:60px} 
  9. .warp-box .box div{ float:right; width:180px; height:60px; line-height:20px; text-align:left} 
  10. .warp-box .box div a{ color:#5C5B58} 

3、效果截图

模块局部CSS+DIV布局效果截图
模块局部CSS+DIV布局效果截图

四、在线演示与压缩包下载   -   TOP

1、在线演示

查看案例

2、打包下载

五、CSS DIV布局小结   -   TOP

这里DIVCSS5以一个单独的一个模块布局,如果是列表型多个这样的模块布局,这个时候就需要使用UL LI布局,只需要把改模块最外层的DIV盒子使用li标签布局,控制li宽度实现独占一行排版或多列排版。灵活使用,掌握其DIV CSS布局思想和技巧无论使用什么标签均没问题。

如需转载,请注明文章出处和来源网址:/template/m766.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

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