随笔分类 -  2_1：CSS 基础

day2
摘要：是兄弟关系 这个是重点 阅读全文
posted @ 2021-01-30 15:31 棉花糖88 阅读(24) 评论(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 阅读(94) 评论(0) 推荐(0)
1 滑动门
摘要：用到的背景图片 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 阅读(74) 评论(0) 推荐(0)
css高级技巧
摘要：一 元素的显示与隐藏 1）display实现 display:none; //隐藏元素display:block; //显示元素display:block; 不光有转换块元素的功能，还有显示的功能特点：隐藏元素 不保留位置 2）visibility实现 visibility [ˌvɪzəˈbɪlət 阅读全文
posted @ 2021-01-28 10:42 棉花糖88 阅读(86) 评论(0) 推荐(0)
11：网页布局总结
摘要：一个完整的网页，由标准流、浮动、定位一起完成布局的。 1）标准流 块元素按顺序上下排列行内元素按顺序左右排列 2）浮动 可以让多个块元素在一行显示浮动的盒子就是按照顺序左右排列 3）定位 定位按照顺序前后层叠排列显示，后来居上，可以通过z-index来调整显示顺序 阅读全文
posted @ 2021-01-26 17:54 棉花糖88 阅读(131) 评论(0) 推荐(0)
10：定位
摘要：定位总结 关于定位 1 标准流在最底层 ( 海底 )2 浮动的盒子在中间层 （ 海面 ）3 定位的盒子在最上层 ( 天空 ) 前置知识 1）为什么要使用定位 将盒子定在某一个位置，自由的漂浮在其他盒子上面 2）基本语法 定位 = 定位模式 + 边偏移 3）边偏移 [ 方位名词 ] top: 30px 阅读全文
posted @ 2021-01-25 21:54 棉花糖88 阅读(148) 评论(0) 推荐(0)
09：浮动
摘要：一 浮动 float 1）作用 1 让多个盒子水平排列一行，使得浮动称为重要的布局手段2 可以实现盒子的左右对齐等3 浮动最早是用来控制图片，实现文字环绕图片的效果 2）特性 1 脱离标准流2 浮动的元素具有了行内块元素的特性。3 浮动的元素需要添加一个标准流父亲4 浮动会导致父元素高度坍塌 3）浮 阅读全文
posted @ 2021-01-25 21:49 棉花糖88 阅读(120) 评论(0) 推荐(0)
08：盒模型：边框 + 内边距 + 外边距
摘要：知识梳理 1 盒子是网页布局的关键点2 padding值会撑开盒子3 样式的层叠性 后面的会覆盖前面的4 块级元素的宽度默认和父级的宽度一样5 块级元素不设置宽度就是通栏的6 border-top: 1px solid transparent; 透明边框7 li是块级元素 不用给宽度，默认和父亲一样 阅读全文
posted @ 2021-01-25 21:40 棉花糖88 阅读(353) 评论(0) 推荐(0)
07：显示模式 + 行高
摘要：一 显示模式 display 1）块级元素 h1-h6 p div ul ol li //1 常见块元素： //2 特点 . 自己独占一行 . 宽度默认父级容器的100% . 空格 内外边距都可以设置 . 是容器级盒子，可以包含 行内元素 和 块元素 p h1-h6 dt 都是文字级块标签，里面不能 阅读全文
posted @ 2021-01-25 10:14 棉花糖88 阅读(117) 评论(0) 推荐(0)
06：选择器
摘要：知识梳理 选择器就是找到页面中特定的HTML元素CSS就两件事 选对人 做对事选择器分为基础选择器 和 复合选择器 一 基础选择器 1）标签选择器 [ 元素选择器 ] div {color: red;} //直接写HTML元素名称 2）类选择器 [ 重点 ] <div class = "one tw 阅读全文
posted @ 2021-01-24 15:31 棉花糖88 阅读(163) 评论(0) 推荐(0)
05：背景设置
摘要：背景总结 一 背景位置 [ 难点] background-position：X坐标 Y坐标; [ 参数可以使用方位名词 和 精确数值 ]精确数值: 百分数 或整数和单位标识组成的长度值 方位名词: top center bottom left right 1） 使用前提 必须先指定 backgrou 阅读全文
posted @ 2021-01-23 17:27 棉花糖88 阅读(293) 评论(0) 推荐(0)
04：文本 + 字体
摘要：一 文本样式 1）颜色 color 1 预定义颜色值 red blue pink等2 十六进制 #fff000 #000000 [ 最常用 ]3 rgb模式 rgb(255,0,0,0.1) 最后一个参数是透明度 [ 设置阴影时常用 ] 2）水平对齐 text-align: left center 阅读全文
posted @ 2021-01-22 20:12 棉花糖88 阅读(108) 评论(0) 推荐(0)
03：CSS三大特性
摘要：一 层叠性 .nav { color: red; } .nav { color: blue; } <div class="nav">样式的层叠性</div> //页面文字显示蓝色 原则： . 样式冲突 遵循的原则是就近原则，哪个样式离结构近，就执行哪个。 . 样式不冲突，不会层叠 二 继承性 子标签 阅读全文
posted @ 2021-01-22 20:01 棉花糖88 阅读(132) 评论(0) 推荐(0)
02：Emmet 语法 + Ps切图
摘要：Emmet的HTML语法（敲代码的快捷方式） 版权声明：本文为网上转载。 所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。 2.输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补 阅读全文
posted @ 2021-01-19 11:07 棉花糖88 阅读(80) 评论(0) 推荐(0)
01：基本概念 + 引入CSS
摘要：一 书写规范 1）空格规范 .box { width: 200px;}选择器和花括号之间有空格冒号和后面的值之间有空格 2）选择器规范 .box, .nav { width: 200px; height: 200px; }并集选择器，每个选择器声明必须独占一行 3）每个属性独占一行 .box {wi 阅读全文
posted @ 2021-01-19 10:26 棉花糖88 阅读(104) 评论(0) 推荐(0)