web设计_6_图片/标题/说明文字布局

jkgh

这个web中常见的单元布局,最好的布局方式就是利用float布局。

其中有个很关键的问题是需要清浮动。子集浮动是无法撑开父级的高度。

目前较完善的清浮动解决方案:在浮动的父级上添加.clear,达到清楚浮动的效果。

.clear{
     *zoom:1;  /*利用CSS hack 触发IE6,7haslayout 解决bug */
}

.clear:after{
    conten:'';
    display:block;
    clear:both;
}

 

以上布局结构为: 可以利用dl dt dd结构

<article id="sweden">
    <dl>
        <dt>...</dt>
        <dd class="img"><img /></dd>
        <dd>...</dd>
    </dl>
    <dl>
        <dt>...</dt>
        <dd class="img"><img /></dd>
        <dd>...</dd>
    </dl>
    <dl>
        <dt>...</dt>
        <dd class="img"><img /></dd>
        <dd>...</dd>
    </dl>

</article>

首先通过浮动布局和清浮动,做成以下布局样式,

jkgh1

再在需要反向浮动的dl标签上添加类名,设置反向样式。

jkgh2

布局思想:先从整体布局相同或相似的,再通过局部命名空间不同设置私有特殊的样式。

 

图片也可以添加CSS3 box-shadow属性,对于不兼容的浏览器无法显示也没关系。

.shadow{
-webkit-box-shadow:1px 2px 2px rgba(0,0,0,0.15); 
-moz-box-shadow:1px 2px 2px rgba(0,0,0,0.15); 
box-shadow:1px 2px 2px rgba(0,0,0,0.15);   /*  分别表示纵向偏移,横向偏移,模糊偏移,颜色值rgba最后为透明度 */
}
posted @ 2015-07-13 22:35  331415706  阅读(354)  评论(0编辑  收藏  举报