随笔分类 - css
摘要：看了一下视图是 .top 这个盒子多出来的空隙 首先想到的是给.top 加 margin: 0; padding: 0; 但是还是没有作用 百度了一下发现，这个应该和对齐方式有关，默认是父元素的基线上对齐 给图片元素的顶端与行中最低的元素的顶端对齐。 vertical-align:bottom
阅读全文
摘要：Animate.css的简单使用 animate.css是一个基于css3 animation动画库，库中预设了几乎所有日常开发中的需求 animate.css 的官网为：https://animate.style 一、安装方式 CDN 地址：<link rel="stylesheet" href=
阅读全文
摘要：学习css的flex属性使用方法前要先了解flex 有主轴和副轴的概念。 主轴默认就是x轴，副轴默认是y轴。但是主轴和父轴是可以设置的。 一、先了解 display:flex; 添加弹性盒子 和 flex-direction 设置x轴或y轴哪个是主轴的属性 <!DOCTYPE html> <html
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3{ color: transparent; font-size: 60px; -webkit-text-str
阅读全文
摘要：怎么让一行文字超出的部分用省略号代替 <ul> <li>第一行文字比较长呀呀呀呀呀</li> <li>第二行文字比较长</li> <li>第三行文字</li> </ul> 要设置一下宽度，超出的部分就会被隐藏起来了。加背景颜色可以更好的看出效果 li{ width: 140px; backgroun
阅读全文
摘要：@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 那媒体查询该如何使用呢？ 一、铺垫 1.首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" cont
阅读全文
