www.hvbet.com溢出隐藏后如何得到内部元素的高度?

( www.hvbet.com )

场景:div高度是500px,设置为{overflow: hidden},内部的元素不固定(可能有多个,可能有隐藏的,可能有浮动的,总高度可能超过500px

求解:如何优雅的得到内部元素的总高度?

首先你现在的情况应该是只能把所有内部元素的高度挨个相加。

所以你可以试着改变一下html结构,用一个div将你这里的内部元素包裹起来,这样一来,你只需要知道这个div的高度即可。

如果你使用的是jQuery的话,直接$”内部元素”.height;

(看完/读完)这篇文章有何感想! www.hvbet.com的分享…

www.hvbet.comweui 用伪元素生成border,源码有点不理解

( www.hvbet.com )

    
.weui_actionsheet_cell {
  position: relative;
  padding: 10px 0;
  text-align: center;
  font-size: 18px;
}
.weui_actionsheet_cell:before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: scaleY0.5;
              transform: scaleY0.5;
}

我想知道为什么weui中,利用伪元素生成border,同时使用了border:1px和height:1px;,然后又在Y轴上缩放0.5倍。我觉得直接用border不久可以了,应该没有那个浏览器不支持border的吧。

为了适应高清屏、retina屏的1px border问题。用transform scale y一下就解决了。用伪元素的好处也在于不用多些无用的div标签。

如果只有宽度没有高度,这里给出高度,应该只是为了更好的显示出来~避免显示不出来的情况吧~~这里应该是为了1px的border宽,先给1px的高度,然后再给Y轴缩放回来~最后应该是一条线。

为了解决retina屏幕的1px边框问题

不说话,看图

为了实现0.5px边框

(看完/读完)这篇文章有何感想! www.hvbet.com的分享…

hvbet鸿运国际手机版pt下载安装CSS animation问题

( hvbet鸿运国际手机版pt下载安装 )

如图,求思路

@cheapskate @superman369

自己写了个小demo,欢迎提出不足之处

http://codepen.io/abcdGJJ/pen…

可以试下将三角形定在一个隐藏的div上,然后让div自转。如果想让三角形也转的话,再给三角形加个自转的动画就行啦

这是个好问题

(看完/读完)这篇文章有何感想! hvbet鸿运国际手机版pt下载安装的分享…

hvbet鸿运国际手机版pt下载安装网页多层背景效果如何实现

( hvbet鸿运国际手机版pt下载安装 )

http://www.bilibili.com/html/…
类似如上页面的banner部分,是用什么样的方式实现的?

总共用了5个div,设置每个背景图片,图片格式均为png图片,然后对每个div都设置了transform:translate;
监听用户的滚动事件scroll,并且设置不同的递增值.然后错位视觉滚动就来了,有兴趣自己可以去搜索下.
五张图为:




可以设置一个有透明度的 div

图像处理软件制作
或者
背景图像 上面覆盖 RGBA背景的DIV 再覆盖 PNG图像

(看完/读完)这篇文章有何感想! hvbet鸿运国际手机版pt下载安装的分享…

hvbet鸿运国际手机版pt下载安装js animationend事件监听动画结束在浏览器中使用不稳定?

( hvbet鸿运国际手机版pt下载安装 )

demo :https://jsfiddle.net/y4eaenbr/

有时候等半天才执行alert, 有时候半天都不执行要点一下页面(或者敲一下键盘)才alert,
这个事件为什么这么不稳定?

<script type="text/javascript">
        $"button".on"click", function{
          $this.addClass"button".on"animationend webkitAnimationEnd", function {
            alert"啊哈哈";
          }
        }
</script>

测试没问题, 要点页面或者按键盘才会弹出, 这是你浏览器卡alert, 调试用console.log, 不要用alert

animationend ie9及以下不兼容, chrome和firefox, 基本没什么问题

(看完/读完)这篇文章有何感想! hvbet鸿运国际手机版pt下载安装的分享…

www.hvbet.comREM布局,平板如何处理的

( www.hvbet.com )

如题。平板下,只想让其显示640宽。但是效果全乱了

用媒体查询试试看?

媒体查询+maxwidth

你设置一个最大宽度就可以了

rem 的原理是吧屏幕分成12分 iphone像素宽度为640px 所以在iphone上面写像素都是实际/64=..rem
ipad 的实际像素是768*2 retina屏就是 比如宽度220px 就等于 220/153.6=1.43229rem

(看完/读完)这篇文章有何感想! www.hvbet.com的分享…

hvbet鸿运国际手机版pt下载安装问一个屏幕滚动的问题

( hvbet鸿运国际手机版pt下载安装 )

页面div容器有两层
大致如下页面格局

<html>
    <head>
        <style>
        /*头部和底部bar*/
        .top_bar{position:fixed;top:0px;height:40px; }
        .botton_bar{ position:fixed;button:0px;height:80px;}
        
        /*一些工具区域,这事一个点击底部bar,某个按钮弹出来的页面层,希望工具比较多的时候显示滑条
         *可惜是手机端和pc存在,滑动事件冒泡问题,下拉时center也在动
         *以及pc端出现比较恶心滑条很难看
         *想继续保持,页面内容比较多*/
        .panel{ height:100vh; overflow:scroll;  }
        
        /*正常的内容区域*/
        .center{ min-height:100000px;}
        </style>
    </head>
<body>
    <div class="container">
        <div class="top_bar"></div>
        <div class="panel">
            <ul>
                <li>.........</li>
                <li>.........</li>
                <li>.........</li>
                <li>.........</li>
            </ul>
        </div>
        
        <div class="center">
            <p>
            .....................
            </p>
            
        </div>
        <div class="botton_bar"></div>
    </div>
</body>
</html>

问题是解决页面工具区,事件冒泡,希望不通过js. 调整页面结构来解决问题

(看完/读完)这篇文章有何感想! hvbet鸿运国际手机版pt下载安装的分享…

www.hvbet.com请问css 中一个元素能做出这种选中效果么?

( www.hvbet.com )

如果做不出,也可以两个元素,最好不要绝对定位

首先是不太可能只用一個元素,因為想要實現自定義的 radio 或是 checkbox 時,都得靠 labelfor 來實現,就是隱藏實際 input ,然後自定義 label 的樣式來實現,所以至少得兩個。

實現

<input name="radios" class="circle-radio" type="radio" id="radio1"/><label for="radio1"></label>

<input name="radios" class="circle-radio" type="radio" id="radio2"/><label for="radio2"></label>
.circle-radio {
  visibility: hidden;
}

.circle-radio + label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #00AAFF;
}

.circle-radio:checked + label {
  display: block;
  background: #00AAFF;
  box-shadow: inset 0px 0px 0px 6px white;
}

如果只是单纯的表示这样一个图形的话,单个div是可以实现的,即通过背景的径向渐变

<div id="a"></div>
<style>
    #a{
        width:100px;
        height:100px;
        border-radius:50%;
        background: -webkit-radial-gradient #0af 0%,#0af 25%,transparent 26%,transparent 60%, #0af 61%, #0af 100%;
    }
</style>

上述代码是运行结果请看
http://jsbin.com/vunoraxoko/e…

当然,如果你是想表示radio等单选或复选的话
单个元素恐怕不能满足你的要求

对于这一点,你可以参考楼上 @Tomoe 的回答

    <div class="outer">
        <div class="inner"></div>
    </div>
.outer {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 3px solid blue;
    border-radius: 50px;
}
.inner {
    display: none;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    margin-top: 25%;
    border-radius: 25px;
    background-color: blue;
}
div.outer:hover div.inner{
    display: block;
}

使用 border-radius 和 css 伪类选择器 :hover
预览

(看完/读完)这篇文章有何感想! www.hvbet.com的分享…