![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html和css的那些事
文章平均质量分 50
panliyou
这个作者很懒,什么都没留下…
展开
-
使用css制作动态时钟详细教程
使用css制作动态时钟完成效果:步骤一:创建一个宽高为300px圆形时钟的外表盘,边框加上阴影更好看一点,页面背景色为黑色代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-02-12 17:17:12 · 5728 阅读 · 4 评论 -
less计算中除法不生效的问题
less计算中除法不生效的问题less中做算术运算的时候一般加法+,减法-,乘法*可以直接写基本不会出现什么问题但是除法/需要()括起来,不然会认为你的是有两个值 值一 / 值二,不会进行计算返回计算结果例如:less文件css文件...原创 2021-01-31 10:56:50 · 4185 阅读 · 8 评论 -
文本溢出隐藏变成省略号
文本溢出隐藏变成省略号1.单行文本溢出隐藏变成省略号1.文本不换行强制文本在一样显示white-space: nowrap;2.溢出隐藏overflow: hidden;3.文字溢出部分变成省略号…text-overflow: ellipsis;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont原创 2021-01-18 20:36:53 · 1105 阅读 · 0 评论 -
元素显示与隐藏的几种方式
元素显示与隐藏的几种方式1.display:none;(常用)元素隐藏且在文档中部不占位置,不会影响其它结构transition(过渡),没有过渡效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-01-18 20:02:52 · 641 阅读 · 1 评论 -
清除浮动的几种方式
清除浮动的几种方式浮动:浮动元素在文档中不占位置脱离标准流,所以它在页面中没有高度,标准流的元素会占据浮动元素的原来位置导致浮动元素盖住标准流元素,但很多时候也要用到浮动所以需要清除浮动带来的影响。1.给浮动元素的父元素添加伪元素清除浮动带来的影响(推荐)原理:浮动元素的前后添加了伪元素并转为了块级元素加上clear: both;清除左右两侧的浮动.<!DOCTYPE html><html lang="en"><head> <meta char原创 2021-01-18 18:33:28 · 178 阅读 · 0 评论 -
pc端常见的几种布局:分栏布局,通栏布局,版心布局,版心布局
pc端常见的几种布局:分栏布局,通栏布局,版心布局,版心布局1分栏布局: float2 通栏布局: 在页面中不设置宽度,让默认宽度和浏览器等宽的布局3.版心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;心布局: 内容始终出现在整个浏览器版面的中心固定的版心宽度+margin: 0 auto;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2021-01-17 20:25:55 · 4720 阅读 · 1 评论 -
实现圣杯布局(双飞翼布局)的几种方式
实现圣杯布局(双飞翼布局)的几种方式圣杯布局:左右两边盒子的宽度固定不会随着屏幕大小的改变而改变,中间盒子宽度自适应1.使用定位的方式让左右两边的盒子绝对定位,左边盒子left:0,右边盒子:right:0,绝对定位盒子不占位置,中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me原创 2021-01-17 19:50:21 · 1073 阅读 · 1 评论 -
使元素水平垂直居中的几种方式
使元素水平垂直居中的几种方式1.居中元素有具体宽高的情况通过绝对定位用居中元素的外边距使自己居中<!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-Co原创 2021-01-16 14:13:24 · 122 阅读 · 1 评论