css
文章平均质量分 58
wyd1022
这个作者很懒,什么都没留下…
展开
-
生成箭头
<div class="arrow-up"><!--向上的三角--></div>.arrow-up{ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #f...原创 2017-10-31 10:34:56 · 306 阅读 · 0 评论 -
FLEX实现两侧边栏固定中间自适应布局
12345678910111213141516171819202122<style type="text/css"> #outer{ display: flex;转载 2017-10-31 11:20:50 · 2157 阅读 · 0 评论 -
基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
之前写过一个小项目,首先这个页面布局是这个样子滴,举个栗子,京东的首页:这算是一种还算常见的页面样式吧,头部和底部固定(或者底部固定没有头、头部固定没有底),有的会用fixed去做,但有在很多手机上会出现很多的奇葩的问题。思前想后,后来我决定使用弹性布局去做,至少在手机浏览器中都是支持的,虽然写法上可能为了考虑老版本要多谢一些兼容性的无用CSS,配合HTML5 hist转载 2017-10-31 14:48:12 · 3474 阅读 · 1 评论 -
左边固定,右边自适应及左边自适应,右边固定布局的几种方法
自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充!页面布局如下:一、左边固定,右边自适应的布局1. 左边左浮动,右边加个overflow:hidden; #lt{ float: left;wi转载 2017-11-01 14:48:07 · 2572 阅读 · 0 评论 -
css实现右侧固定宽度,左侧宽度自适应
反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。这种布局比较常见,博客园很多默认主题就是这种。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?要实现这种布局,也算比较简单。我们先给出html结构:12345div id="转载 2017-11-01 14:49:08 · 1178 阅读 · 0 评论 -
CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一转载 2017-11-01 15:34:31 · 130 阅读 · 0 评论