08 2021 档案
摘要：Bootstrap 导航栏 | 菜鸟教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式的导航栏</title> <link rel="stylesheet" href="https://c
阅读全文
摘要：效果 在线查看 代码少，都在HTML里 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
阅读全文
摘要：css3鼠标经过内容区时，边框线条特效效果制作。 html: <div class="strength grWidth hidden"> <div class="homeTitle"> <h2>为什么选择优胜空间？</h2> </div> <ul class="strengthMain"> <li>
阅读全文
摘要：ul li ：后代选择器，ul 里所有的 li 元素，包括 ol 里的 li ; ul>li ：子代选择器，下一级的DOM节点，不包括 ol 里的 li 。 ul>ol>li ：子代选择器必须一代接一代。 1 <ul> 2 <li>111</li> 3 <li>222</li> 4 <li>333<
阅读全文
摘要：前言 不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。 在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在
阅读全文
摘要：在css中单位长度用的最多的是px、em、rem，这三个的区别是： px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素
阅读全文
摘要：使用Sass优雅并高效的实现CSS中的垂直水平居中 移动端总结 布局神器：display:flex css3中提出了一种新的布局模式：弹性盒子（flex box）。 它是一种当页面需要适应不同的屏幕大小和设备类型时确保元素拥有恰当的行为的布局方式。 目的是更好的对一个容器中的子元素进行排列，对齐，和
阅读全文
摘要：使用@keyframes规则，可以创建动画。 在动画的过程中，可以多次更改css样式的设定。 对于指定的变化：发生时用0%，或关键字“from”和“to”，这与0%和100%相同。 0%：开头动画。 100%：动画完成。 语法：@keyframes animationname { keyframes
阅读全文
摘要：一、nth-child() 1. nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。 2. nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。 3. ntn-child(even)：父元素下的偶数子元素
阅读全文
摘要：无论如何改动border，margin与padding的值，都不会导致box总尺寸发生变化。 建议学习和设置此属性： *{box-sizing:border-box} 不改变box-sizing的话，边框计算结果如下 width(宽度) + padding(内边距) + border(边框) = 元
阅读全文
摘要：最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。 1.0 CSS3标准 writing-mode:horizontal-tb;//默
阅读全文
摘要：在css样式文件中增加如下代码：（建议放在文件最上方） ::selection { background: hsla(5, 92%, 76%, 0.8); color: #fff; }
阅读全文
摘要：详解使用CSS3的@media来编写响应式的页面
阅读全文
摘要：一般网站如果制作按钮，多做一些互动，可以让客户获得更好的体验。 例如鼠标滑过按钮，让背景颜色从左往右滑出来（或者从右往左都可以）： <a target="_blank" href="#" class="butn white"><span>观众预登记</span></a> 默认状态的css： .but
阅读全文
