随笔分类 -  CSS

用 HTML 元素实现自定义的滚动条
摘要：有时，浏览器默认的滚动条不能满足需求，我们要实现自定义的滚动条。借助于鼠标移动事件和滚轮事件，以及内容元素的滚动相关属性，可以很容易地实现这样的需求。下面就来试一试。 我们这次要实现的滚动条需要有以下功能或要素： 可拖动的滑块； 滚动条两端有可以小幅度滚动的按钮； 滑块与两端按钮之间的区域可点击以进 阅读全文
posted @ 2017-05-14 21:24 zhu'sDevlog 阅读(31210) 评论(1) 推荐(4)
使元素相对于窗口或父元素水平垂直居中的几种方法
摘要：如果一个元素具有固定或相对大小，要使其不管如何调整窗口大小或滚动页面，始终位于浏览器窗口中间，可使用如下方法： 效果如图： 那如何让一个元素相对于其父元素水平垂直居中呢？首先，要把元素的position属性值改为absolute，使其有可能相对于父元素定位，而不是相对于浏览器窗口定位。absolut 阅读全文
posted @ 2016-11-04 21:07 zhu'sDevlog 阅读(12483) 评论(2) 推荐(2)
铺满浏览器窗口的界面设计
摘要：要做这样一个页面： 将<header>和<footer>的宽度设为100%即可让它们水平铺满窗口，难点在于如何设置<nav>和<iframe>的高度。网上的做法一般是设置<html>和<body>的高度为100%，然后设置<nav>和<iframe>的高度为calc(100% - 70px)，但如果 阅读全文
posted @ 2016-10-26 21:01 zhu'sDevlog 阅读(2023) 评论(0) 推荐(0)