前端
关注
分享
扫一扫
Guo_Elleny
这个作者很懒，什么都没留下…
展开
-
前端右上角已报名三角形实现
实现的效果图实现原理1.两个三角形来实现右上角的样式2.已报名文字通过旋转和定位来实现<html> <head> <meta charset="utf-8"> <title>已报名三角形</title> <link rel="stylesheet" href="./5.css"> </head> <body> <div class="big"> <div c原创 2021-08-17 10:32:44 · 421 阅读 · 0 评论 -
上升菜单栏
上升菜单栏????以前自己的做法是用定位来做的，但是做的很不舒服，现在使用css3的办法很棒使用技术:hover、transition原理:两层快级级结构，鼠标移入,上面的块级结构往上移动实现效果(由于放不上视频，只能截图了)代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- 从下往上滚动菜单原创 2021-04-25 20:23:45 · 167 阅读 · 0 评论 -
浮动流,清除浮动流以及标签嵌套问题
浮动流以及标签嵌套问题浮动流浮动的元素会产生浮动流所有产生了浮动流的元素，块级元素看不到产生的浮动流的元素但是产生了bfc的元素以及文本类元素(inline)以及文本都能看见产生了浮动流的元素因此，我们经常需要清除浮动流**原理:**在产生浮动流的后面清除浮动流 就不会对后面的元素产生影响方法有几种 但是较为好的方法如下**方法：**加::after伪元素 清除浮动清除浮动clear:both; 这个属性 必须在块级元元素才起作用而::after是行内元素例子如下:<!DOCT原创 2021-03-14 14:46:31 · 257 阅读 · 0 评论 -
定位和浮动转化问题 position: absolute；和float浮动可以直接变成行内块元素
隐藏知识点1.position: absolute;可以将元素转化为block属性例子如下 :span是行内元素，正常情况下加宽高属性是不会起作用html<html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com原创 2021-03-14 13:10:46 · 992 阅读 · 0 评论 -
文字溢出打点点点解决方案
文字溢出我们经常需要做到在固定宽高内显示文字，当文字内容过多不希望全部显示，通过打…来代表文字未完，我们是这样做的1.单行文本.box{ white-space:nowrap;/*首先先让文本失去换行功能*/ overflow:hidden;/*再溢出部分不展示隐藏*/ text-overflow:ellipsis;/*最后把溢出部分打点*/}2.多行文本溢出打点方式 ：有些时候通过后段根据文字长度计算宽高，快要溢出时候 后端直接加上…（本菜鸟觉得可不可以：通过js获取元素 快要溢出原创 2021-03-14 00:02:36 · 835 阅读 · 0 评论 -
css实现爱心
纯html css实现爱心案例原理:心型❤️是可以由半个正方向+两个半圆形构成的如图得到这样的图形后 再旋转45度角，就可以变成爱心形状了<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-原创 2021-03-11 16:06:21 · 359 阅读 · 0 评论