css
关注
分享
扫一扫
文章平均质量分 64
chelflan
不积跬步无以至千里
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
html中固定宽度的两端对齐
html中固定宽度的两端对齐原创 2022-03-24 09:43:12 · 656 阅读 · 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 · 1688 阅读 · 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 · 921 阅读 · 0 评论 -
多行文字最后一行显示省略号
多行文字最后一行显示省略号,代码如下div{display: -webkit-box;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;//数字代表第几行显示 .....-webkit-box-orient: vertical;}...原创 2019-11-20 12:26:00 · 595 阅读 · 0 评论 -
position:sticky
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8244本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。一、Chrome杀了个回马枪position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，C...转载 2018-12-28 10:25:49 · 906 阅读 · 0 评论 -
less介绍（2）
Less类似的预处理css语言还有 Sass styuls等等 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 官网 中文网 中文网 http://www.w3cplus.com/css/less概要为什么要有预处理CSSCSS基...转载 2018-07-20 13:38:51 · 230 阅读 · 0 评论 -
less的介绍
第一章 LESS简介第一节 变量第二节 混合第三节 嵌套规则第四节 函数 & 运算第二章 使用第一节 客户端使用第二节 服务端使用第三章 语法第一节 变量第二节 混合用法第三节 带参数混合第四节 嵌套规则第五节 运算第六节 作用域第七节 注释第八节 避免编译...转载 2018-07-20 13:36:07 · 276 阅读 · 0 评论 -
html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块级元素。块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）常用的块状元素有：<div>、<...转载 2018-07-19 11:20:31 · 389 阅读 · 0 评论 -
css实现超出div长度文字自动隐藏或用省略号表示
在网页设计中，一些区域的标题文字是不能换行的，例如首页显示的文章标题，因为布局是固定的，换行会打乱布局，从而使网页产生错位。因此，我们需要一行一段文字，超出行宽的文字用省略号表示或者直接去掉不用省略号代替。看看下图中的实例。超出div长度用省略号表示上图显示，扩展阅读的文章标题，超出行宽用省略号表示。本文我们就来看看如何用css来实现的。css实现超出div长度用省略号表示源代码...转载 2018-07-23 17:47:19 · 39846 阅读 · 4 评论 -
flex:1
flex:1让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：转载 2018-06-28 00:17:12 · 3700 阅读 · 0 评论 -
flex实战例子
你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的...转载 2018-06-28 00:16:13 · 3600 阅读 · 1 评论 -
flex语法
网页布局（layout）是 CSS 的一个重点应用。 ...转载 2018-06-27 23:53:27 · 243 阅读 · 0 评论 -
Sticky Footer（2）
css sticky footer布局参考地址：张鑫旭老师-css sticky footer布局 结合项目具体场景给出介绍：点击信息，弹出浮层，显示详细信息。浮层最下面有个关闭按钮，一直处在底部，当内容未撑开一页大小时，关闭按钮处在页面最底端。当内容撑开超出一页的大小时，底部内容向下推送。...转载 2018-06-27 23:02:53 · 152 阅读 · 0 评论 -
Sticky Footer（1）
什么是 “Sticky Footer”所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。实现方法1. 将内容部分的底部外边距设为负数这是个比较主流的用...转载 2018-06-27 22:56:53 · 151 阅读 · 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 · 160 阅读 · 0 评论