![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 64
chelflan
不积跬步无以至千里
展开
-
html中固定宽度的两端对齐
html中固定宽度的两端对齐原创 2022-03-24 09:43:12 · 583 阅读 · 0 评论 -
通过css实现按钮hover时背景色从左慢慢移动到右边
通过css实现按钮hover时背景色从左慢慢移动到右边直接上代码直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con原创 2021-09-01 15:22:53 · 1567 阅读 · 0 评论 -
一个基于css的图片展示悬浮字的效果
一个基于css的图片展示悬浮效果目标:一个基于css的图片展示悬浮效果技术:css效果图:代码如下技术忙点目标:一个基于css的图片展示悬浮效果技术:css效果图:之前鼠标悬浮之后之后代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e原创 2021-06-09 17:24:10 · 867 阅读 · 0 评论 -
多行文字最后一行显示省略号
多行文字最后一行显示省略号,代码如下div{display: -webkit-box;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;//数字代表第几行显示 .....-webkit-box-orient: vertical;}...原创 2019-11-20 12:26:00 · 557 阅读 · 0 评论 -
position:sticky
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8244本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。一、Chrome杀了个回马枪position:sticky早有耳闻也有所了解,后来,Chrome放弃了对其支持,我也就不关心这个声明了,今天偶然发现,卧槽,C...转载 2018-12-28 10:25:49 · 856 阅读 · 0 评论 -
less介绍(2)
Less类似的预处理css语言还有 Sass styuls等等 一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点 官网 中文网 中文网 http://www.w3cplus.com/css/less概要为什么要有预处理CSSCSS基...转载 2018-07-20 13:38:51 · 209 阅读 · 0 评论 -
less的介绍
第一章 LESS简介第一节 变量第二节 混合第三节 嵌套规则第四节 函数 & 运算第二章 使用第一节 客户端使用第二节 服务端使用第三章 语法第一节 变量第二节 混合用法第三节 带参数混合第四节 嵌套规则第五节 运算第六节 作用域第七节 注释第八节 避免编译...转载 2018-07-20 13:36:07 · 233 阅读 · 0 评论 -
html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。块级元素特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行)2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)常用的块状元素有:<div>、<...转载 2018-07-19 11:20:31 · 365 阅读 · 0 评论 -
css实现超出div长度文字自动隐藏或用省略号表示
在网页设计中,一些区域的标题文字是不能换行的,例如首页显示的文章标题,因为布局是固定的,换行会打乱布局,从而使网页产生错位。因此,我们需要一行一段文字,超出行宽的文字用省略号表示或者直接去掉不用省略号代替。看看下图中的实例。超出div长度用省略号表示上图显示,扩展阅读的文章标题,超出行宽用省略号表示。本文我们就来看看如何用css来实现的。css实现超出div长度用省略号表示源代码...转载 2018-07-23 17:47:19 · 39431 阅读 · 4 评论 -
flex:1
flex:1让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容:转载 2018-06-28 00:17:12 · 3639 阅读 · 0 评论 -
flex实战例子
你会看到,不管是什么布局,Flex往往都可以几行命令搞定。我只列出代码,详细的...转载 2018-06-28 00:16:13 · 3495 阅读 · 1 评论 -
flex语法
网页布局(layout)是 CSS 的一个重点应用。 ...转载 2018-06-27 23:53:27 · 196 阅读 · 0 评论 -
Sticky Footer(2)
css sticky footer布局参考地址:张鑫旭老师-css sticky footer布局 结合项目具体场景给出介绍:点击信息,弹出浮层,显示详细信息。浮层最下面有个关闭按钮,一直处在底部,当内容未撑开一页大小时,关闭按钮处在页面最底端。当内容撑开超出一页的大小时,底部内容向下推送。...转载 2018-06-27 23:02:53 · 112 阅读 · 0 评论 -
Sticky Footer(1)
什么是 “Sticky Footer”所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。实现方法1. 将内容部分的底部外边距设为负数这是个比较主流的用...转载 2018-06-27 22:56:53 · 129 阅读 · 0 评论 -
CSS之使用display:inline-block来布局
CSS之使用display:inline-block来布局 <div class="postBody"> <div id="cnblogs_post_body" class="blogpost-body"><p style="text-align: center;.转载 2018-06-27 22:49:11 · 127 阅读 · 0 评论