• CSS-- 实用CSS样式


    自用实用CSS样式


    1.清除DIV浮动

    <span style="font-family:KaiTi_GB2312;">clear: both;</span>

    原效果:


    对下面移位的标签加入该CSS后效果如下:
    <span style="font-family:KaiTi_GB2312;">element.style {
    clear: both;
    }</span>



    2.使用min-width解决缩小浏览器窗口滚动条右边部分留白问题

    使用min-width前,我们可以看到class="top"这个div,当前width为636px,但是由于top这个div的最外层的div当前已经被固定为960px,所以当窗口小于960px的时候,滚动条往右拉时对右边宽度超出636px那部分并没有起作用,因为浏览器虽然有滚动条了,但并不知道我们哪个位置需要开始使用滚动条显示




    对于这种情况,我们只需要加入min-960px,因为我们当前网页的内容都显示在宽度为960px区域内,设置Min-width相当于告诉浏览器:当窗口宽度小于960px时,你就要给可滚动显示我要展示的区域啦


    3.使用pointer-events:none;解决上层DIV被下层DIV阻止点击事件


    案例:目前有两个同级的DIV,下层DIV只用于显示透明的样式,上层DIV只用于数据展示,看起来就像被包裹在一个透明的面板上,效果如下:

    上图我们可以看到,实际上recommend 这个DIV实际上是跟gray 同级的,而通过z-index这个属性使它们分别处在上下层,但是加入pointer-events:none; 之前,我想点击recommend这个div 上的"more.."超链接是点击不了的,因为这时被下层DIV gray阻止了所有事件,通过把pointer-events:none;设置到下层元素gray上,就可以去除下层DIV对上层DIV的干扰,事件点击操作

  • 相关阅读:
    架构设计
    第七章
    第六章
    第五章
    第四章
    第三章
    第二章
    第一章
    链表中环
    实现链表中的部分翻转
  • 原文地址:https://www.cnblogs.com/evan-liang/p/9189573.html
Copyright © 2020-2023  润新知