![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
Pandora_417
以码为梦,不负韶华
展开
-
flex布局实现瀑布流
必须是按列来排序,还得设置高度display: flex;flex-direction: column;flex-wrap: wrap;height: 1000px;<!-- * @Descripttion: * @Author: Pandora * @Date: 2021-11-18 18:11:20--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"原创 2021-11-18 19:03:41 · 2632 阅读 · 1 评论 -
column-gap和column-count 之纯css实现瀑布流
column-gap列之间的距离column-count一行有多少列<!-- * @Descripttion: 瀑布流 * @Author: Pandora * @Date: 2021-11-18 16:35:22--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con原创 2021-11-18 17:31:44 · 658 阅读 · 0 评论 -
让行内元素(如图片)在div中水平垂直居中的四种方法
(1)第一种:用vertical-align<div class="method1"> <span class="tiptop"></span> <img class="test" src="img/Dota2.jpg" alt="dota2"></div> <style>.method1{ text...原创 2019-04-27 13:00:56 · 324 阅读 · 0 评论 -
Less与SASS区别
在介绍less和sass的区别之前,我们先来了解一下他们的定义:一、Less、Sass/Scss是什么?1、Less:是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。2、Sass:是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如...原创 2019-04-22 22:58:48 · 223 阅读 · 0 评论 -
前端小技巧
文字加边框后依旧有padding,文字左边产生竖线,几个span标签仅中间有|,边框半径,渐变式颜色背景,文字垂直轮播原创 2019-08-02 15:57:32 · 282 阅读 · 0 评论 -
js图片垂直滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...原创 2019-07-30 18:07:15 · 148 阅读 · 0 评论 -
获取浏览器和屏幕各种高度宽度
原生JSdocument.body.clientWidth; //网页可见区域宽(body)document.body.clientHeight; //网页可见区域高(body)document.body.offsetWidth; //网页可见区域宽(body),包括border、margin等document.body.offsetHeight...原创 2019-07-30 18:05:54 · 142 阅读 · 0 评论 -
响应式布局与自适应
响应式布局的一些技术点纪录:(1)允许网页的宽度自动的调整(2)尽量少使用绝对的宽度,多点百分比(3)相对大小的字体:字体不要使用px写死,最好使用相对大小的em,或者高清方案rem,这个不限制与字体,别的属性也可以这么设置(4)流式布局,float等float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚...原创 2019-07-30 17:04:02 · 148 阅读 · 0 评论 -
登录注册页面优化
7月16日优化pc端和移动端的登录注册页面原代码结构及界面如下: 优化后(主要是参照网易云注册页面写的,讲真的,网易云登录注册页面简洁美观的不要不要的):优化思路:给form表单外层添加父级元素,更改背景颜色,使整个表单突出,更美观一点;ul标签设置外边距ol标签加width: 100%;border: solid #DDD 1px小图标去掉li标签,直接放入ol标签...原创 2019-07-17 11:52:20 · 715 阅读 · 0 评论 -
清除浮动的最常用的四种方法,以及优缺点
为什么要清除浮动?清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题总结一下:当父元素不给高度的时候,内部元素不浮动时会撑开而浮动的时候,父元素变成一条线清除浮动的方法(最常用的4种)1.额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)(不推荐)<div class="clear">额外标签法</div>...原创 2019-08-21 18:06:41 · 214 阅读 · 0 评论 -
animate.css的使用
前言 animate.css是一个使用CSS3的animation制作的动画效果的CSS集合,里面预设了很多种常用的动画,且使用非常简单。本文将详细介绍animate.css的使用引入 animate.css的最新版本是3.5.2,引入animate.css很容易,有以下几种方法1、从官网下载https://raw.github.com/daneden/animate.css/mas...原创 2019-05-18 10:10:49 · 240 阅读 · 0 评论 -
OO CSS(面向对象 CSS)
面向对象的CSSOO CSS的概念解读OO CSS的作用和注意事项OO CSS代码实战众多开发者忽视了CSS的表现(认为他太过简单,是一种机械的工作),而且更多关注在JavaScript的性能上或者其他方面。OO CSS将页面可重用元素抽象成一个类,用Class加以描述,而与其对应的HTML即可看成是此类的一个实例。OO CSS 的作用和注意事项——作用加强代码复用以方便维护...原创 2019-04-22 22:41:20 · 310 阅读 · 0 评论 -
div通过sort方法进行排序
<script> $(function() { var asc = function(a, b) { return $(a).find('input').val() > $(b).find('input').val() ? 1 : -1; } var desc = function(a, b) { ...原创 2019-08-27 17:09:26 · 575 阅读 · 0 评论 -
CSS布局定位
源码:https://github.com/Pandora417/findCity.git最终结果如上图所示,可以自适应移动端、pc端。方法一:在DIV+CSS布局中,定位可以使用锚点。同一页面中的定位:<a href="#q1">A</a> <a href="#q1">B</a> <a href="#q1">C</...原创 2019-08-15 11:21:37 · 124 阅读 · 0 评论 -
纯css垂直轮播文字
html<div class="div1"> <div class="div2"> <p>Pandora</p> <p>潘潘潘潘潘潘潘潘潘潘潘潘</p> <p>潘潘潘潘潘潘潘潘潘潘潘潘</p> <p>潘潘潘潘潘潘潘潘潘...原创 2019-07-27 12:05:51 · 1022 阅读 · 0 评论 -
如何用CSS代码设定按钮的圆角样式
用CSS代码设定按钮的圆角样式,这个在css3中才能实现,通过使用border-radius来实现这个效果,不过有浏览器的兼容性问题,-moz(例如 -moz-border-radius)用于Firefox;-webkit(例如:-webkit-border-radius)用于Safari和Chrome;border-radius:5px 15px 20px 25px;它的意思就是上的圆角5px,...原创 2019-07-31 10:56:08 · 2711 阅读 · 0 评论 -
CSS文字不超出一行或两行,若超出则变成省略号形式
一行内超出点点点overflow:hidden; /*超出的部分隐藏起来。*/ white-space:nowrap;/*不显示的地方用省略号...代替*/text-overflow:ellipsis;/* 支持 IE */超出两行显示点点点 overflow: hidden; text-overflow: ellipsis; display: -webkit-box...原创 2019-07-31 10:05:59 · 1269 阅读 · 2 评论 -
关于AOS —— 一个用于在页面滚动的时候呈现元素动画的工具库
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的。但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部的时候,元素能够回到前一个状态,如此达到循环动画的效果。体验地址:http://michalsnik.github.io/aos/Install using Yarn, Npm, Bowerya...原创 2019-04-27 21:02:00 · 418 阅读 · 0 评论