随笔分类 - css基础
css基础知识
摘要：这个是scss中的语法，表示上一级的选择器 例如源码： ul{ margin-bottom: 20px; & >li{ margin-bottom: 0; } } 相当于代码 ul{ margin-bottom: 20px; } ul >li{ margin-bottom: 0; }
阅读全文
摘要：界面搭建<i></i> 1、右三角形 i { width: 0; height: 0; border: 20px solid transparent; border-left: 20px solid red; } 实现效果： 2、下三角形 i { width: 0; height: 0; borde
阅读全文
摘要：搭建扇子结构 <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12&l
阅读全文
摘要：搭建一个太极的盒子 <body> <div></div> </body> 样式（使用 linear-gradient线性渐变；radial-gradient径向渐变） <style> body { background-color: lightcyan; } div { width: 200px;
阅读全文
摘要：1、单行超出显示省略号 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //文本超出时显示省略号 white-space: nowrap; //设置文本不换行 2、多行超出显示省略号 overflow: hidden; //超出隐藏 text-ov
阅读全文
摘要：功能实现： 先搭建一个用于轮播的容器，水平置入需要轮播的图片，设置图片大小为容器的大小，超出容器的部分隐藏显示 然后用动画使每次需要轮播时让图片向左平移容器的宽度，这样一个简单的轮播就做好了 废话不多说，世界上案例吧 界面搭建 <body> <div class="swiper-container"
阅读全文
摘要：box-shadow: 水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转内阴影（默认外阴影） 例如： box-shadow: 10px 10px 5px 2px #ff4444 inset;
阅读全文
摘要：第一种： 使用 padding 和 text-align: center 例如： .center { padding: 100px 0; border: 1px solid green; text-align: center; } 第二种： 1、当文本内容为单行时 ， 使用line-height 和
阅读全文
摘要：第一种方式：使用最多 <link rel="stylesheet" href="css文件路径"> 第二种方式 <style> @import url("css文件路径") </style> 两者之间的区别？ 区别1：link属于html标签，而@import是css提供的一种方式 区别2：当页面被
阅读全文
