![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
cangowu
这个作者很懒,什么都没留下…
展开
-
css中合理的使用nth-child实现布局
写这篇文章的目的,主要是今天要实现一个布局:li,每行三个,总数不定,只能相邻的li之间需要10px的间距,效果如下图: 大家可以先自己实现一下,我这里也是思考了很久,最后整理了思绪,发现先给每个li添加margin-right:10px;然后给第3n个加上margin-bottom:10px;并且去掉margin-right即可 代码:li{ margin-r原创 2016-03-01 17:54:33 · 847 阅读 · 0 评论 -
calc在布局中的使用
css3中增加了calc会计算的属性,那么我们也可以在我们的布局中合理的使用,这里我先抛出一个问题,大家可以思考一下,左右留20px的边距,中间的距离三等分,但是每个区域中间空出10px的距离,如下图: 这里我先说一下我的思路,我们就建一个wrapper,左右留20px的边距,然后在里面建三个div宽度为父级的(100%-20px)/3然后将第一个和第二个设置右边距10px即可。 代码:原创 2016-03-06 09:09:34 · 590 阅读 · 0 评论 -
前端性能优化--能用css的地方尽量不要用js
在写这篇文字的时候,本来没有打算归类到前端性能优化的范畴,只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效果,比较常见的有导航栏,提示信息等,很多时候我们会利用js实现,比如鼠标移动到父级li上,我们希望子级显示菜单,我们可能在js给每个父级的li绑定一个hover事件。 0、导航栏 下面我用css的方式实现,这里我们利用了hover的伪类,(我们可能大部分都是用到a标签上的原创 2016-03-08 07:58:29 · 2037 阅读 · 1 评论 -
前端技术-布局解决方案
前端技术-布局解决方案 一、居中布局 1.水平居中 行内元素 如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。 定宽块状元素 当被设置元素为块状元素时用 text-align:center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。转载 2016-12-07 11:21:29 · 466 阅读 · 0 评论 -
chrome滚动条样式
/** chrome **/ ::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-th原创 2016-11-25 13:51:20 · 575 阅读 · 0 评论