摘要: 知识梳理 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 阅读(71) 评论(0) 推荐(0) 编辑
摘要: 一 属性选择器 使用要点 属性选择器、标签选择器、伪类选择器权重都是10 1)直接写属性 [ 最基本的使用 ] /*所有按钮改为小手*/ button { cursor: pointer; } /*给添加禁用的按钮修改为默认小箭头*/ 选择的是:既是 button 又有 disabled 属性的元素 阅读全文
posted @ 2021-01-31 19:19 棉花糖88 阅读(141) 评论(0) 推荐(0) 编辑
摘要: 一 语义化标签 1)常用标签 <header></header> //1 头部标签<nav></nav> //2 导航标签<asite></asite> //3 侧边栏标签<article></article> //4 内容标签<section></section> //5 块级标签<footer> 阅读全文
posted @ 2021-01-30 22:20 棉花糖88 阅读(93) 评论(0) 推荐(0) 编辑
摘要: 是兄弟关系 这个是重点 阅读全文
posted @ 2021-01-30 15:31 棉花糖88 阅读(22) 评论(0) 推荐(0) 编辑
摘要: 三个重点 1 网页图标 2 网页三大标签 3 字体图标 4 logo的主流写法 一 引入icon图标 1 )获取别的网站的icon图标 https://www.jd.com/favicon.ico //获取京东的icon小图标https://www.mi.com/favicon.ico //获取小米 阅读全文
posted @ 2021-01-29 11:31 棉花糖88 阅读(81) 评论(0) 推荐(0) 编辑
摘要: 用到的背景图片 1 滑动门 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav { width: 800px; margin: 100px auto; 阅读全文
posted @ 2021-01-29 08:51 棉花糖88 阅读(69) 评论(0) 推荐(0) 编辑
摘要: 一 元素的显示与隐藏 1)display实现 display:none; //隐藏元素display:block; //显示元素display:block; 不光有转换块元素的功能,还有显示的功能特点:隐藏元素 不保留位置 2)visibility实现 visibility [ˌvɪzəˈbɪlət 阅读全文
posted @ 2021-01-28 10:42 棉花糖88 阅读(76) 评论(0) 推荐(0) 编辑
摘要: 一个完整的网页,由标准流、浮动、定位一起完成布局的。 1)标准流 块元素按顺序上下排列行内元素按顺序左右排列 2)浮动 可以让多个块元素在一行显示浮动的盒子就是按照顺序左右排列 3)定位 定位按照顺序前后层叠排列显示,后来居上,可以通过z-index来调整显示顺序 阅读全文
posted @ 2021-01-26 17:54 棉花糖88 阅读(111) 评论(0) 推荐(0) 编辑
摘要: 定位总结 关于定位 1 标准流在最底层 ( 海底 )2 浮动的盒子在中间层 ( 海面 )3 定位的盒子在最上层 ( 天空 ) 前置知识 1)为什么要使用定位 将盒子定在某一个位置,自由的漂浮在其他盒子上面 2)基本语法 定位 = 定位模式 + 边偏移 3)边偏移 [ 方位名词 ] top: 30px 阅读全文
posted @ 2021-01-25 21:54 棉花糖88 阅读(111) 评论(0) 推荐(0) 编辑
摘要: 一 浮动 float 1)作用 1 让多个盒子水平排列一行,使得浮动称为重要的布局手段2 可以实现盒子的左右对齐等3 浮动最早是用来控制图片,实现文字环绕图片的效果 2)特性 1 脱离标准流2 浮动的元素具有了行内块元素的特性。3 浮动的元素需要添加一个标准流父亲4 浮动会导致父元素高度坍塌 3)浮 阅读全文
posted @ 2021-01-25 21:49 棉花糖88 阅读(106) 评论(0) 推荐(0) 编辑