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

这个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>

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

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

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

图片也可以添加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最后为透明度 */

}

巴特西

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

最新文章

热门文章