【CSS】
文章平均质量分 90
CSS
不停喝水
Web. Write Less,Do More
展开
-
CSS-06-2 标签显示模式 行高 背景颜色 css三大特性
2. 标签显示模式(display)重点目标:理解标签的三种显示模式三种显示模式的特点以及区别理解三种显示模式的相互转化应用实现三种显示模式的相互转化2.1 什么是标签显示模式什么是标签的显示模式?标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个作用:我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。标签的类型(分类)HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。原创 2022-06-02 10:27:18 · 267 阅读 · 0 评论 -
CSS 03-03 文本颜色 水平对齐 行间距 首行缩进 文本线 笔记
2.1 color:文本颜色作用:color属性用于定义文本的颜色,其取值方式有如下3种:表示表示属性值预定义的颜色值red,green,blue,还有我们的御用色 pink十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%)注意我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色2.2 text-align:文本水平对齐方原创 2020-06-03 23:34:33 · 323 阅读 · 0 评论 -
CSS 08-01 爱宠知识 案例思路笔记
1.首先确定结构*清除内外边距1.整个为一个大盒子,测量高宽.W H2.然后测量边框,border:1px solid red;3.然后给bgi4.然后给一个margin:20px auto 0;5.最后分析给一个padding:10px这里有宽所以会撑大!要减去.box { width: 240px; height: 307px; margin: 20px auto 0; border: sol原创 2020-06-14 11:59:59 · 472 阅读 · 0 评论 -
CSS 05-01 新浪导航栏 项目笔记
一定要先分析1.先确定结构div navaaaaa2.构建样式a.构建边框测量高度测量背景色测量上框色测量下框色3.原创 2020-06-09 15:12:31 · 107 阅读 · 0 评论 -
HTML5 CSS3提高 11-01 新增标签及属性 表单 多媒体 结构伪类 伪元素 过渡 小米log jd进度条
HTML5新特性语义化标签 (★★)<header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 尾部标签多媒体标签视频标签- video(★★★)基本使用当前 <video>元素支持三种视频格式: 尽量使用 mp4格式使用语法: <video src="media/mi.mp4"></原创 2020-06-20 08:53:52 · 826 阅读 · 0 评论 -
CSS 06-01 浮动 清除浮动 切图
1. 浮动(float)目标记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流)块级元素会独占一行,从上向下顺序排列;常用元素:di原创 2020-06-09 23:22:39 · 170 阅读 · 0 评论 -
CSS 07-01 学成在线页面制作
1. 学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。pink老师:取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~1.1 前期准备素材学成在线PSD源文件开发工具 = PS(切图) + sublime(代码) + chrome(测试)1.2 前期准备工作原创 2020-06-14 12:00:21 · 247 阅读 · 0 评论 -
CSS 05-01 盒子模型笔记 核心之一!!!!!! 内外边距 圆角 阴影
盒子模型(CSS重点)css学习三大重点: css 盒子模型 、 浮动 、 定位主题思路:目标:理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1.看透网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置。最后把网页元素比如原创 2020-06-07 00:03:01 · 282 阅读 · 0 评论 -
CSS 03-01三种样式 基础选择器 笔记
学习目标理解:1.CSS的目的作用2.CSS的三种引入方式应用:1.CSS三种引用方式的书写2.通过样式规则给标签添加简单的样式1.HTML的局限性1.关注内容原创 2020-06-02 20:53:54 · 372 阅读 · 0 评论 -
CSS 08-01 伪元素清除浮动方法
例子1:在div内部的最前面添加div::befote{ content:"清明"; width:100px; height:100px; bgc:red;div::after{content:"河图"<div> 上 </div>.clearfix:after {content:".";转为行内块元素display:block;照护兼容性隐藏元素height:0;隐藏元素visibility:hidden;清除浮动clear:both;}原创 2020-06-17 11:06:44 · 117 阅读 · 0 评论 -
CSS 03-02 字体大小 粗细样式 文本对齐 行间距 缩进 文本线 笔记
CSS字体样式属性调试工具目标应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常用的emment语法能够使用开发人员工具代码调试1.font字体1.1 font-size:大小作用:font-size属性用于设置字号p { font-size:20px; }单位:可以使用相对长度单位,也可以使用绝对长度单位。相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。注意:我们文字大小以后,基本就原创 2020-06-03 13:34:58 · 1036 阅读 · 0 评论 -
CSS 04-01 复合选择器 链接伪类 标签显示模式display 行高 背景 css三大特性 笔记
今日重点:复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个或多原创 2020-06-04 00:01:23 · 422 阅读 · 0 评论 -
CSS 4-01 简单导航栏案例 总结
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 1.变化样式 有大小 有一行原创 2020-06-05 23:54:50 · 525 阅读 · 0 评论 -
18-1 2D 3D 动画 移动端1px细线问题 浏览器12px字体问题
一. 2d1.过渡效果transition!!!1.过渡是属性值的变化,是从默认状态到结束状态之间一个变化的过程,过渡需要触发条件,(通常过渡都是添加默认状态,谁做过渡给谁加)2.transiton:要过渡得属性 花费时间S 运动曲线ease linear 何时开始3.transition:width 1s,height 1s 1s;这个让高度等1S,如果用Hover 给定位,那么会一直抖动,因为 是honver得话,只是经过 你过了就没了.简写:transition: all 1s;原创 2020-07-09 12:14:22 · 144 阅读 · 0 评论 -
[补充知识 2.0] 结构伪类选择器 盒子水平垂直居中方法 字体图标 页面可修改
1.结构伪类选择器,选择li里面的第几个a<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style原创 2020-07-06 18:04:12 · 204 阅读 · 0 评论 -
[补充知识 1.0] 盒子阴影 文字阴影 pleaseholder改颜色 C3盒子模型 背景照片-渐变-精灵图居中 鼠标经过改边框色 margin负值
1.阴影不占位置的第一个值是水平偏移量正值向右,负值向左第二个值垂直偏移量 正值向下.负值向上第三个值是模糊范围第四个值是阴影的大小第五个是阴影的颜色如果我想多个方向有阴影那么可以通过逗号隔开锤子面试题一个div用三种方法写出三个颜色<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" co原创 2020-07-01 18:50:34 · 489 阅读 · 0 评论 -
H5C3 13-2 3D转换
一、 3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, y, z)透视:perspctive3D呈现 transfrom-style3D 移动 translate3d - transform: translate3d(x, y, z):其中x、y、z 分别指要移动的轴的方向的距离二、透视 perspective知识要点透视需要写在被视察元素的父盒子上面代码演示body { persp原创 2020-06-29 23:50:06 · 301 阅读 · 0 评论 -
地图热点图
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .map {原创 2020-06-29 12:18:22 · 951 阅读 · 0 评论 -
H5C3 13-1 2D转换 动画
1.transform:translate;不改变其他盒子的位置1.1.对行内标签没有效果1.2. 参数%移动,是自身宽度或者高度的%来对比可以配合定位来实现盒子在盒子里面水平垂直居中1.3对行内元素无效1.transform:translate(100px,100px)2.transform:translateX(100px)3.transform:translateY(200px)一、rotate1.transform:rotate(30deg)可以让三角小图标鼠标经过旋转180°原创 2020-06-28 23:44:57 · 152 阅读 · 0 评论 -
伪元素 添加字体图标 案例
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> @font-face原创 2020-06-24 16:18:28 · 1442 阅读 · 0 评论 -
土豆视频案例 鼠标经过时候出现播放按钮 伪元素案例
土豆视频案例鼠标经过时候出现播放按钮<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style&g原创 2020-06-24 16:17:07 · 521 阅读 · 2 评论 -
数字翻页栏练习
数字翻页栏练习<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {原创 2020-06-24 10:17:24 · 111 阅读 · 0 评论 -
京东秒杀价格三角 案例
京东秒杀价格标签<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> *原创 2020-06-23 15:21:27 · 222 阅读 · 0 评论 -
CSS 09-01 定位 笔记
定位(position)目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:普通流(标准流)浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置 自由的漂浮在其原创 2020-06-17 23:08:37 · 168 阅读 · 0 评论 -
CSS 10-01 显示隐藏 界面样式 垂直对齐 精灵技术 滑动门 笔记
1.元素显示与隐藏1.1display显示(重点)使用较多display:none 隐藏 ,不保留位置display:block 显示/转换成块级元素1.2 visibility可见性(了解)使用较少visibility:hidden 隐藏元素,保留位置(停职留薪)visibility:visible 显示元素1.3overflow溢出(重点)1.清除浮动2.保证盒子的内容不会超出该盒子范围overflow:visible 默认 不剪切内容也不添加滚动条overflow:hidde原创 2020-06-18 23:56:12 · 246 阅读 · 0 评论