前端CSS
关注
分享
扫一扫
一粒程序米
行业方向：物联网 移动开发
展开
-
float浮动怎么居中？
<view class="page"><span class="pageDown">上一页</span><span class="pageUp" >下一页</span></view> .page{ float:left; position: relative; left: 50%; margin-bottom: 20px; } .page span{ float:left; positi原创 2021-11-04 19:45:00 · 1749 阅读 · 0 评论 -
前端项目使用阿里巴巴icon font的具体过程
1.阿里巴巴矢量图官网：https://www.iconfont.cn/2.把需要用到的图标加入购物车，需要注册登录3.把选好的图标添加至项目4.下载到本地5.解压，打开，选择复制这四个文件，粘贴到项目的css文件里6.在项目中使用...原创 2021-08-18 19:53:58 · 405 阅读 · 0 评论 -
css元素垂直居中的四个方法（包括未知元素的高度的解决方法）
方法一：绝对定位居中（原始版之已知元素的高宽）.content { width: 200px; height: 200px; background-color: #6699ff; position: absolute; /*父元素需要相对定位*/ top: 50%; left: 50%; margin-top: -100px; /*设为高度的1/2*/ margin-left: -100px; /*设为宽度的1/2*/原创 2021-08-11 17:24:10 · 657 阅读 · 0 评论 -
通过column-count和break-inside的CSS3属性实现瀑布流
<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> body { margin: 0; } .waterfall-container { /*分几列*/ column-count: 2; width: 100%; .原创 2021-08-11 16:44:39 · 378 阅读 · 0 评论 -
JavaScript动态创建表格，并打印九九乘法表
首先通过getElementById的方式获取到表格dom,然后用嵌套循环分别创建表格的行和列，创建的函数是createElement，不小心打成了createComment，导致找了好久的bug，我可能眼睛瞎了吧。最后，在每创建完一列的时候，给列赋上算式的值，并在每一行创建完之后，让表格dom追加行。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>&.原创 2021-07-13 18:51:16 · 1371 阅读 · 0 评论 -
css动画实战---火箭在宇宙穿梭
动画用法 animation: zd .4s linear 0s infinite alternate; @keyframes zd { from { transform: translateX(-20px) translateY(-20px); } to { transform: translateX(20px) translateY(20px); .原创 2021-07-13 14:30:22 · 291 阅读 · 0 评论 -
css过渡效果-仿镜子翻盖
效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ height: 200px; width: 200px; margin: 40px auto; perspective: 500px; } img原创 2021-07-13 11:51:11 · 352 阅读 · 0 评论 -
前端笔记css（4）---css的继承、层叠和优先级
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css继承和层叠</title> <style type="text/css"> /* p{color: red;} */ div{font-size: 60px;} </style> </head> <body> <div &原创 2021-06-03 16:45:08 · 181 阅读 · 0 评论 -
前端笔记css（3）----css伪类
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>伪类</title> <!-- <style type="text/css"> a:link{color: black;} /* 未访问状态 */ a:visited{color: red;}/* 已访问状态 */ a:hover{color: blue;}/* 鼠标.原创 2021-06-03 16:04:43 · 246 阅读 · 0 评论 -
前端笔记css（2）----css选择器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css选择器</title> <style type="text/css"> p,h1{color: blue;} /* 标签选择器 */ p.special{color: purple;} /* 类选择器 */ h2.special{color: coral;} .原创 2021-06-03 15:32:39 · 157 阅读 · 0 评论 -
前端笔记css（1）----css使用方法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css基础</title> <!-- 外部样式：把css代码写在一个独立的css文件中 在head标签引用--> <link rel="stylesheet" type="text/css" href="css基础.css"/> </head>.原创 2021-06-03 14:01:36 · 214 阅读 · 0 评论