随笔分类 -  2_2：CSS 高级

微信小程序
摘要： 阅读全文
posted @ 2021-02-07 11:03 棉花糖88 阅读(62) 评论(0) 推荐(0)
响应式布局
摘要：布局容器最基本使用 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial- 阅读全文
posted @ 2021-02-07 08:49 棉花糖88 阅读(63) 评论(0) 推荐(0)
苏宁首页demo
摘要：把一个css文件导入到另一个css文件中 @import "文件名";@import "common.css"; flex布局不用担心外边距合并的问题 阅读全文
posted @ 2021-02-06 15:39 棉花糖88 阅读(55) 评论(0) 推荐(0)
rem适配方案
摘要：重点 阅读全文
posted @ 2021-02-06 12:22 棉花糖88 阅读(61) 评论(0) 推荐(0)
less的使用
摘要：less的嵌套 孩子是写在父亲标签里面的 添加伪类伪元素 前面添加 & 连接符 阅读全文
posted @ 2021-02-06 11:16 棉花糖88 阅读(69) 评论(0) 推荐(0)
rem布局
摘要：em单位 em是相对于父元素的字体大小来说的 小demo div { font-size: 12px; } div p { width: 10em; height: 10em; background: pink; } <div> <p>dd</p> </div> p的大小是基于父盒子的字体大小来说的 阅读全文
posted @ 2021-02-05 22:25 棉花糖88 阅读(81) 评论(0) 推荐(0)
2 flex布局 子项的三个常用属性
摘要：小demo 左右固定 中间自适应 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, i 阅读全文
posted @ 2021-02-04 15:56 棉花糖88 阅读(256) 评论(0) 推荐(0)
2 移动端开发选择
摘要：移动端的特殊样式 /*去除a连接点击时 后侧的高亮背景*/ a { -webkit-tap-highlight-color: transparent; } /*添加这个属性 iOS上 输入框和按钮才可以书写自定义样式*/ input { -webkit-appearance: none; } /*禁 阅读全文
posted @ 2021-02-03 14:36 棉花糖88 阅读(48) 评论(0) 推荐(0)
1 移动端布局基础：流式布局
摘要：一 移动端基础 二 视口 阅读全文
posted @ 2021-02-03 09:38 棉花糖88 阅读(61) 评论(0) 推荐(0)
小demo 旋转木马
摘要：小demo 旋转木马 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻转导航</title> <style> body { /*添加透视*/ perspective: 1000px; } /*最外面的盒子* 阅读全文
posted @ 2021-02-03 08:45 棉花糖88 阅读(91) 评论(0) 推荐(0)
3d 小demo
摘要：demo1 两面翻转的盒子 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> <style> body { perspective: 500px; } .box { positio 阅读全文
posted @ 2021-02-02 21:30 棉花糖88 阅读(63) 评论(0) 推荐(0)
4：3D装换
摘要：z轴单位一般不用 百分比 直接用精确的单位 一 透视 per spect ive perspective: 500px; [值是 视距 就是上图中的 d距离 ] body { perspective: 500px;//透视的值是: 视距px } div { width: 200px; height: 阅读全文
posted @ 2021-02-02 20:40 棉花糖88 阅读(55) 评论(0) 推荐(0)
4：动画的使用
摘要：基础语法 <style> /*第一步：定义动画*/ @keyframes move { //开始状态 0% { transform: translateX(0px); } //结束状态 100% { transform: translateX(500px); } } div { width: 300 阅读全文
posted @ 2021-02-01 21:02 棉花糖88 阅读(103) 评论(0) 推荐(0)
3：2D装换 [ 重点 ]
摘要：知识梳理 translate //1 位移 rotate //2 旋转 scale //3 缩放 transform-origin //4 设置旋转中心 一 平移 [ translate ] div { width: 150px; height: 100px; background: pink; t 阅读全文
posted @ 2021-01-31 22:10 棉花糖88 阅读(81) 评论(0) 推荐(0)
2：属性选择器 + 结构伪类选择器 + 伪元素
摘要：一 属性选择器 使用要点 属性选择器、标签选择器、伪类选择器权重都是10 1）直接写属性 [ 最基本的使用 ] /*所有按钮改为小手*/ button { cursor: pointer; } /*给添加禁用的按钮修改为默认小箭头*/ 选择的是：既是 button 又有 disabled 属性的元素 阅读全文
posted @ 2021-01-31 19:19 棉花糖88 阅读(160) 评论(0) 推荐(0)
1：新增 H5 常用属性
摘要：一 语义化标签 1）常用标签 <header></header> //1 头部标签<nav></nav> //2 导航标签<asite></asite> //3 侧边栏标签<article></article> //4 内容标签<section></section> //5 块级标签<footer> 阅读全文
posted @ 2021-01-30 22:20 棉花糖88 阅读(101) 评论(0) 推荐(0)