zoukankan      html  css  js  c++  java
  • 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最后为透明度 */
    }
  • 相关阅读:
    递推 hdu 1396
    递推 hdu 3411
    Eclipse中git上如何把自己的分支保存到远端
    api-gateway-engine知识点(1)
    Java知识点ArrayList
    如何利用VMware安装XP系统
    IOP知识点(1)
    Eclipse如何导入DemoWeb.rar
    mysql忘记root密码
    实习培训——Java多线程(9)
  • 原文地址:https://www.cnblogs.com/Peng2014/p/4644137.html
Copyright © 2011-2022 走看看