CSS
兰亭古墨
这个作者很懒,什么都没留下…
展开
-
如何用 css 画一个正方体
懒得写思路了,直接看代码吧原创 2022-06-28 17:13:51 · 700 阅读 · 0 评论 -
CSS3绘制方格背景图类似于ProcessOn 绘制面板
<div class="canvas">中心画布</div>.canvas { border: 1px solid #f2f2f2; background: -webkit-linear-gradient( top, transparent 15px, #f2f2f2 15px, #f2f2f2 16px, transparent 16px, transparent 31px, #f2f2f2 31px, #原创 2021-10-30 18:27:35 · 444 阅读 · 0 评论 -
三栏布局之双飞翼布局
效果图* { margin: 0; padding: 0;}html,body { width: 100%; height: 200px; text-align: center; background: #eee;}.header { height: 48px; background: lightblue;}.footer { clear: both; height: 60px; background: lightgray;}.con原创 2021-02-03 15:31:24 · 219 阅读 · 0 评论 -
三栏布局之圣杯布局
运用到负边距的知识点margin-left 为负: 左移margin-right 为负:左拉*{ margin: 0; padding: 0;}html, body { width: 100%; height: 100%; text-align: center; background: #eee;}.header { height: 48px; background: lightblue;}.footer { clear: both; heig原创 2021-02-03 15:01:09 · 247 阅读 · 0 评论 -
弹性盒子中 flex: 0 1 auto
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis,默认值为0 1 auto。1.flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。2.flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。3.flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。<div class="parent"> <div class="item.转载 2020-07-15 09:20:45 · 2761 阅读 · 0 评论 -
CSS三栏布局方法及其分析
前言相信很多同学在面试的时候遇到过三栏布局的问题,一般面试题会让你尽可能多的写出三栏布局的方法,本篇小记对三栏布局的一些主流方法,做一些总结和分析。不正之处,欢迎指点!正文1.绝对定位法html如下:<div class="container"> <div class="left"></div> <div class="center"...原创 2019-11-09 17:30:54 · 529 阅读 · 0 评论 -
CSS hack写法
表格1 选择器hack 选择器hack写法 针对的浏览...原创 2019-01-06 17:37:28 · 513 阅读 · 0 评论 -
CSS绘制平行四边形
方法有三:(1)、父元素transform: skewX(-45deg);子元素transform: skewX(45deg); 效果图1:<!DOCTYPE html><h...原创 2018-09-27 21:42:56 · 11442 阅读 · 0 评论 -
滑向未来(现代 JS 与 CSS 滚动实现指南)
一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱。我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时,)将使你的页面滚动更平滑、美观且性能更好。大多数的网页的内容都无法在一屏内全部展现,因而(页面)滚动对于用户而言是必不可少的。对于前端工程师与 UX 设计师而言,跨浏览器提供良好的滚动体验,同时符合设计(要求),...转载 2018-05-16 15:39:06 · 527 阅读 · 0 评论 -
CSS background-attachment 属性 实例
午后无聊,随便浏览了下网站,一不小心进了百度影音的官网,发现它这个背景图固定,真不晓得是怎么做到了,琢磨良久,原来用的是background-attachment: fixed;做成的,嗯,神奇的CSS!百度影音官网: http://player.baidu.com/yingyin.html效果图:(看鼠标移动的位置)附上代码:<!DOCTYPE html><html>...原创 2018-04-18 15:37:31 · 760 阅读 · 0 评论 -
css实现两栏自适应布局
前端经典的两栏布局1、左侧定宽,左浮动; 右侧宽度100%; 两栏布局;左侧定宽左浮动,右侧宽度100% .left{ float: left; width: 200px; height: 400px; background: red;}.right{ width: 100%; he原创 2017-11-07 10:30:42 · 1182 阅读 · 0 评论 -
前端开发怎么使用图标字体?
获取图标字体:(1)GlyphiconHalfling:收费的800+图标;(2)FontAwesome:免费的675个图标;(3)IconMoon 自定义图标字体,上传svg制作自己想要的图标字体; svg字体获取(http://www.iconfont.cn)使用图标字体: --> --> @font-face{原创 2017-09-21 21:48:55 · 681 阅读 · 0 评论 -
史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2017-10-17 21:28:40 · 501 阅读 · 0 评论 -
最全CSS3选择器
一,CSS3 选择器分类二,选择器语法1,基本选择器语法选择器类型功能描述* 通配选择器 选择文档中所以HTML元素E 元素选择器选择指定类型的HTML元素#id ID选择器选择指定ID属性值为“id”的任意类型元素.class转载 2017-09-25 18:08:15 · 346 阅读 · 0 评论 -
浏览器hack总结 详细的浏览器兼容性解决方法
由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试。CSS Hack面对浏览器诸多的兼容性问题,经常需要通过CSS样式来调试,其中用的最多的就是CSS Hack。所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式,通过使用某个浏览器单独识别的样式代码,控制该浏览器的显示效果。CSS Hack转载 2017-09-25 17:44:43 · 542 阅读 · 0 评论