随笔分类 - css
css相关
摘要：链接：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 容器和项目： 上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。 注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<
阅读全文
摘要：。 <ul> <li class="a">li</li> <li class="a">li</li> <li class="a">li</li> <p class="a b">p</p> <li class="a">li</li> <li class="a">li</li> </ul> <li>li
阅读全文
摘要：<!-- 加载动效 --> <div id="myloader"> <div class="loader"> <div class="grid"> <div class="cube cube1"></div> <div class="cube cube2"></div> <div class="cu
阅读全文
摘要：为什么要尝试这种布局方式呢？ 因为上中下布局，通常中间的内容会有上下滑动的需求，而通过定位来写这些滑动时，在ios上会出现滑动问题，比如说，滑动中间的内容，导致把整个网页拖拽动了，而 中间内容却没有拖拽动，还有一些其它的问题，总之是定位引起的的，特别是fixed定位在ios上容易出问题。今天见了一个
阅读全文
摘要：<div class="minVideoViewBox"> <div class="miniStreamView"></div> <div class="miniStreamView"></div> <div class="miniStreamView"></div> <div class="min
阅读全文
摘要：如何让图片像背景一样显示呢？ 这里需要用到object-fit属性 MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit object-fit的取值： fill（不保持纵横比缩放图片，使图片完全适应）contain（保持纵
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="vintage1">美丽的中国语</h1> <h1 class="vintage2">美丽的中国语</h1>
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：总表图如下： FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044 #FFCCCC #FF8888 #FF3333 #FF0000
阅读全文
摘要：近期公司让我修改一些之前的table标签写的页面，感觉对table相关的标签不是太熟悉，于是专门整理一下： 1、如果给td标签设置百分比宽度，比如有10列内容，我们却设置了每个单元格是30%的宽度，会是这样的效果，（单元格会紧着前面的达标宽度，后面的自适应） 那么如果给单元格设置固定宽度呢？（目前我
阅读全文
摘要：偷懒神奇链接：https://qishaoxuan.github.io/css_tricks/glass/
阅读全文
摘要：看到一篇很好的文章，感觉不用我自己总结了， 上个链接：https://blog.csdn.net/zhouzuoluo/article/details/81010331
阅读全文
摘要：加上如下的CSS设置，就是设定好宽度width，然后设置合适的word-wrap和word-break属性： .breakAll{ white-space:normal; word-break:keep-all; word-wrap: break-word; } word-warp 属性设置如何处理
阅读全文
摘要：在input框上加上这段代码就可以了 另外，我在一个页面上，用一个开关去控制一部分内容显示隐藏与显示时，当我隐藏该隐藏的内容后，不该隐藏的内容也隐藏了，就发现加过上面样式的input框不受影响，于是，我把全部元素都加上了这个css ，也就是把input变成了*,问题解决了，看来这个样式挺有用的， 特
阅读全文
摘要：前端颜色表：https://blog.csdn.net/zhengguoliangyls/article/details/80502166 选择器： id选择器：#id 类选择器：.class 标签选择器：p、div、h1、、、、 后代选择器：空格隔开，后面的元素是前面的子元素：#box li .a
阅读全文
摘要：上面图片时将字体文件放入到fonts文件夹内， 里面有一个fonts.css文件，将字体文件声明好， 然后像下面图片一样，在另外一个css内@import引入，（当然，也可以直接将声明和引用放在一个css文件里，这里采用@import引入的方式）
阅读全文
摘要：容器元素设置的样式 display:flex：规定元素是flex布局，里面的元素自然会像浮动一样横向排列； 横向排列或纵向排列，正序还是倒序 flex-direction：row | row-reverse | column | column-reverse;规定子元素是横向排列还是纵向排列； 子元
阅读全文
摘要：好文章链接：30分钟学会less 自己总结一下这篇文章中的几个关键字：变量、混合、函数、嵌套、@import 下面贴上自己照着上面写的一些代码：
阅读全文
摘要：html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol,...
阅读全文
