CSS3笔记
文章平均质量分 69
课程链接 https://www.bilibili.com/video/BV14J4114768 P61-P540
Suyuoa
这个作者很懒,什么都没留下…
展开
-
附录1-chrome调试工具
1打开chrome调试工具我们用谷歌浏览器打开一个网页后,按下F12可以弹出chrome调试工具,点击Elements这一项左侧是html,右侧是css2调试值或内容在右边的css中,我们可以改动数值,比如我现在想把这个字变蓝在这里改成blue,这个字就变蓝了在这里调试后不会帮你保存3通过元素找到html代码这里有一个箭头,点一下这个箭头把箭头移动到我们内容上,它就会告诉你这个内容在html文件中的哪个部分4css中出现错误的情况用这........原创 2022-02-24 14:07:45 · 3433 阅读 · 0 评论 -
21.CSS初始化
为了保证兼容性,也为了方便开发,所以我们需要进行CSS初始化比如将所有元素的内外边距清零常用的还有下面这些倾斜标签不倾斜li取消前面的点儿图像取消边框且垂直居中按钮鼠标样式为手型设置链接颜色并清除下划线链接hover的文字颜色按钮与文本框字体body的一些设置-webkit-font-smoothing 是抗锯齿性,当我们这样设置后,将文字放大,文字不会变得很模糊常用的类,比如说hide,后面我们给元素一个hide的类,元素就会被隐藏起来原创 2022-03-11 10:52:27 · 744 阅读 · 0 评论 -
16.字体图标
像这种图标我们除了使用精灵图做,还可以使用字体图标做相对于精灵图,字体图片有几个有点不需要图像文件 对图像文件放大或缩小图像会失真(影响很小,因为精灵图中的图像就很小) 后面换精灵图比较麻烦(美工麻烦,前端也麻烦)字体图标英文名称是iconfont,它展示的是图标,但本质上是字体,我们用调试工具看一下它原来悬停上是这种蓝色的现在我们改为红色的发现连同图标一起变红了字体图标只有一些简单的图标,如果遇到了复杂的图标,还是要用精灵图来做目录1下载字体图标2..原创 2022-03-09 13:39:23 · 276 阅读 · 0 评论 -
40.css变量
我们刚才使用的定义域是html,可以理解为全局作用域。现在我们想让变量只在类名为one的标签中生效这样就不会影响其他元素了。原创 2023-06-22 11:36:42 · 50 阅读 · 0 评论 -
附录12-伪类选择器
伪类就是内容的状态,比如这个在我鼠标没放上去的时候,它是这样的放上去之后它变色了这个用的就是伪类选择器伪类选择器包含很多,我们这里先讲链接伪类选择器,伪类选择器用冒号表示,冒号后接伪状态伪类选择器都是可以不加前面元素的,一般是当子元素的某些条件用的,我们会在下面的反选中做一个例子。原创 2022-09-08 16:11:34 · 1657 阅读 · 0 评论 -
附录11-CSS样式补充
我们使用list-style可以改变这个样式,最常用的就是list-style:none;除了把头样式搞没以外,你还可以对其设置别的样式,详细情况可以看一下这个。数值为1等于没设置,1为默认值。默认li的头样式是这样的。原创 2022-09-02 15:28:16 · 116 阅读 · 0 评论 -
附录2-PS基本操作
1 标尺打开一张图像文件后,如果是这样的我们可以按下 ctrl+r 打开标尺,出现标尺后,我们右键标尺,然后选择 像素这样我们就可以观察效果图上的像素值了左侧有一个放大镜按钮,那个可以放大或缩小图片。按住空格后会出现一个手形工具,这时再移动鼠标就可以移动图像了2测量我们一般使用右侧的矩形框进行测量,点击矩形框后进行拖动,会自动出现W与H的值选区不想要的时候点一下别的地方就可以取消选区了,或者按下ctrl+d也行3参考线我们打开标尺后,选择这个工....原创 2022-03-11 11:05:03 · 805 阅读 · 0 评论 -
39.响应式布局
它从大到小的变化是这样的最大状态(xxl),左中右比例大致为2:7:3较大状态(xl),结构不变,页面两侧的空间逐渐消失,这里我们得知xl与xxl的结构是相同的,所以不需要对xxl单独设置份数大状态(lg)最右侧消失(要对右侧设置在lg以下消失),左侧与中侧大概3:9,其余无变化中等状态(md)左侧横着放在了最上面最小状态(sm)最上侧的一些信息消失,且不能够再进行缩小最后我们看一下移动端的情况,跟最小的情况差不多,我门就不做修改了我们制作的思路是这样的,先做大的,再一步一步修改小的。...原创 2022-08-26 15:16:16 · 1098 阅读 · 0 评论 -
附录10-项目黑马面面
视频地址项目效果地址项目要做成这个样子我先放代码,代码的结构是这样的swiper中的内容我们后面会提到,charge_learn是充电学习的css与js,employment_guidance是就业指导的css与jsindex.htmlindex.lessindex.js中没有内容,没有做轮播图之外的交互动作charge_learn中的rotate.lessemployment_guidance中的rotate.less。原创 2022-08-22 11:17:24 · 1395 阅读 · 0 评论 -
38. 适配布局
之后你在定义元素宽高的时候都使用rem作为单位,比如你在原型图上看到了一个宽150px,高200px的盒子,那么你给的时候就应该给width3(150/50)rem,height4(200/50)rem。如果这里你没有使用less,也不想用计算器一个一个算,那么你可以使用vscode中的插件cssrem,这个插件在你写px的时候,会自动帮你转换成rem,使用方式在这里有介绍。好处是使用rem为单位,我们只需要修改html的字体大小,就可以改变所有元素的大小,而且是等比例改变。.........原创 2022-07-21 09:36:40 · 2003 阅读 · 0 评论 -
37. flex布局
flex布局也叫弹性布局。原创 2022-07-15 16:44:59 · 1389 阅读 · 1 评论 -
附录9-less基础
less(LeanerStyleSheets)是CSS的扩展语言,也叫CSS预处理器,其余常见处理器还有Sass,Stylusless中文网址less语句在语句前面写//进行注释。原创 2022-07-19 10:47:08 · 914 阅读 · 0 评论 -
36. 流式布局
流式布局也叫百分比布局,我们在布局时不适用固定的像素值,我们下面布局一个看一下我像要在页面中放两个盒子,高度一个300px,另一个200px。宽度一个为30%,另一个为70%这样你无论用什么像素的手机显示的样子都是类似的把手机转过来也是一样为了让盒子内的内容正常显示,我们会通过设置最大(小)宽度,最大(小)高度对盒子的大小进行限制一般只对宽度进行约束,最小宽度一般设置为320px,最大宽度一般设置为640px,这个也得具体情况具体分析为了更好的理解流式布局,我们在下面模拟京东移动版的首页我们要注意的一点是,原创 2022-07-11 16:12:48 · 546 阅读 · 0 评论 -
35. 多倍图
目录1 物理像素与物理像素比2 多倍图3 多倍精灵图物理像素(设备分辨率)是屏幕显示的最小颗粒,是真实存在的,移动端设备会在出厂时进行设置,比如苹果6的物理像素的750*1334我们使用的px不一定等于1个物理像素,我们以ipone6距离,虽然它的分辨率是750x1334,但它折成px,是375x667我们可以搞一个375x667的盒子看能不能把页面占满发现刚好可以完全占满(你可以在chrome调试工具中将宽与高减小1px,减小后发现会留出一条缝)那么这里就可以引入物理像素比(dpr)的概念,物理像素原创 2022-07-11 16:09:32 · 348 阅读 · 0 评论 -
34. 视口 viewport
视口是浏览器显示页面内容的屏幕区域,我们以京东为例,京东的页面是非常长的只有我当前显示出来的部分叫做视口(可以理解为可视区域)视口可以分为 布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(idel viewport)由于移动端的网页对高度要求是不大的,因为你上下滑动这个动作比较方便(而左右移动却不是很方便)。所以我们后续都使用宽度来解释视口目录1 布局视口2 视觉视口3 理想视口4 meta视口标签布局视口就是你整体网页的宽度如果你的布局视口远超手机原创 2022-07-11 16:05:34 · 222 阅读 · 0 评论 -
33. 初识移动端CSS
从33章之后我们主要针对移动端CSS移动端浏览器基本不需要考虑兼容性问题,原因是移动端的浏览器开发的都比较晚我们可以通过chrome调试工具模拟移动端,打开调试工具后点击这里,就可以看到手机访问时的情况了使用手机端访问相同的地址有时会有不同的效果(根据不同设备进行重定向),比如我们用移动端访问jd.com(会重定向到m.jd.com),一般来讲移动端页面的地址会在原有地址前加m.再用PC端访问有两种移动端页面,一种是开发的时候直接针对移动端进行开发,像上面京东那样(单独制作移动端页面)另一种是页面会根据不同原创 2022-07-11 16:02:48 · 441 阅读 · 0 评论 -
附录8-私有前缀
为了兼容老版本浏览器有时会加入私有前缀私有前缀一般是这几个写的时候在属性前加入前缀原创 2022-04-07 16:04:56 · 252 阅读 · 0 评论 -
附录7-服务器
服务器的介绍可以看一下P353黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili目录1稳定的2不太稳定的1稳定的如果你想要一个稳定的云服务器,你百度一下,会出现这几个结果华为云,腾讯云,百度云,阿里云,我们以阿里云为例,这有很多款服务器可以选择只有服务器还不够,我们还需要一个域名或公网IP,这个你跟客服聊一下,他会告知你该怎么弄2不太稳定的我们下面说一下便宜(在2022.4...原创 2022-04-07 15:46:16 · 869 阅读 · 0 评论 -
附录6-消除临近盒子的边框
我们现在有三个盒子,每个盒子都有1像素的边框我们发现两个相邻的盒子边框挤在一起了我们现在不想让他挤在一起,那么我们现在将margin-left设置为-1px发现挤在一起的效果就消失了这个就相当于右侧的盒子压住了左边的盒子,左边盒子的右边框被压在了底下动作顺序是先浮动,浮动就靠上了第一个盒子,之后再移动-1像素,就压上了这样就会出现一个问题,我现在想让鼠标经过的盒子边框变成蓝色发现最右侧的盒子没有问题,但左边的两个就不能正常显示了这个时候我们要在hove原创 2022-03-18 14:26:56 · 1123 阅读 · 0 评论 -
附录5-SEO优化
SEO(Search Engine Optimization)搜索引擎优化,可以利用搜索引擎的规则提高网站再搜索引擎内的自然排名我们现在用搜索引擎搜索1此时 晋江文学城 的排名就要比 百度汉语 的排名高不过这个应该不是自然排名在前端中使用TDK三个标签进行SEO优化T title 标题 D description 说明 K keywords 关键词我们可以看一下京东的例子title的形式最好为 [网站名称] - [网站的介绍],title是要在网页上显示出来的,文字最好不原创 2022-03-17 17:07:15 · 120 阅读 · 0 评论 -
附录4-favicon图标
favicon图标就是我们网页上的这个首先得有一张图片,我们现在就用CSS3.png这张图然后我们进入favicon图标转换网页,我们可以使用这个制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net进入后我们选择我们的图片,输入验证码,然后点击生成ico图标之后我们选择我们要保存的路径,然后点击保存这样我们就得到了favicon图标然后我们在html中使用link标签中的shortcut icon.原创 2022-03-17 16:20:08 · 434 阅读 · 0 评论 -
附录3-项目开发流程
课程中讲的是这样一个流程,在课程的 P299黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili预付定金大约是报价的30%在初稿审核的时候,首先会有这样的一个原型图与客户进行交流确认无误后会做出效果图,之后就进入前后端的开发了...原创 2022-03-16 13:44:34 · 68 阅读 · 0 评论 -
32.三维转换属性
三维在网页中显示出来有两个特点近大远小 被遮挡后不可见三维转换有四个常用属性,3D位移(translate3d),3D旋转(rotate3d),透视(perspective),3D呈现(transfrom-style)与二维转换相同,由于转换的属性名都为transform,所以无论写多少transform只有最后的语句生效,写一个二维的再写一个三维的,也是只有最后的语句生效目录1三维坐标系2透视 perspective3三维移动 translate3d4三维旋........原创 2022-04-07 15:23:43 · 1419 阅读 · 0 评论 -
31.动画属性
动画属性是animation,比起过渡可以实现更多变化,更多控制,连续自动播放等效果动画这一节的时候,在学的时候最好自己写一下来看,不然会很难理解,如果没有解释器的话,可以到这里进行在线测试HTML/CSS/JS 在线工具 | 菜鸟工具我下面的代码html与css是不分开的,你可以把代码复制左上角,然后到右下角就可以看到效果了目录1动画的基本用法2动画序列2.1from...to...2.2插入节点2.3改变不同属性2.4改变多个属性3...原创 2022-04-02 17:48:00 · 2053 阅读 · 0 评论 -
30.二维转换属性
(二维)转换(transform)可以实现元素位移(translate),旋转(rotate),缩放(scale)等效果常用的是这三个,还有其他不常用的由于转换的属性名都为transform(包括后面要提到的三维转换),所以无论写多少transform只有最后的语句生效目录1 二维坐标2 位移 translate2.1 基本用法2.2translate不会影响其它元素的位置2.3垂直(水平)居中2.3.1垂直居中2.3.2水平居中3旋转 rota......原创 2022-04-07 14:52:41 · 753 阅读 · 0 评论 -
29.品优购页面的链接
链接之后就失去了页面的独立性,建议是将页面完成后再进行链接目录1 主页2列表页3注册页1 主页主页要连接列表页与注册页注册页在头部的这里连接列表页在导航的这里链接2列表页列表页要在搜索部分的logo处返回主页3注册页注册页要在头部的logo处返回主页将以上链接连接上后,发现可以成功跳转页面...原创 2022-03-31 11:00:16 · 162 阅读 · 0 评论 -
28.品优购注册页
注册页不需要做seo优化,下面这个是注册推荐的类名1 头部htmlcss2注册区域2.1代码部分htmlcss2.2要注意的点2.2.1label的右侧对齐我给了一个宽度,然后右侧对齐2.2.2正确信息与错误信息当我们使用JS进行验证的时候,一般会有正确与错误两种信息,我们会给这两种信息不同的类名来控制展示哪一个信息在当前的代码中我没有做正确的信息,也没有给错误信息类名2.2.3表单问题...原创 2022-03-31 10:58:45 · 354 阅读 · 0 评论 -
27.品优购列表页
目录1 头部与尾部2导航部分3内容部分1 头部与尾部这两个地方是一样的我们直接复制html并复用相关的css有的版本logo的右侧还有一个 秒杀 的图像,那个如果要做的话直接插入图像然后进行定位就行,在我的代码中没有做这个图像我html我不建议写到头部中,而是在和header平级的地方放一张图像,然后相对定位即可原因是你不能把 秒杀 这张图像放在 头部的css中,那么你后期维护的话是不能再次进行复用的,与其不能方便复用还不如让页面效果与html和css...原创 2022-03-31 10:53:57 · 148 阅读 · 0 评论 -
26.品优购首页
主页在一个项目中我们一般命名index.html我们在 品优购首页.html 中链接初始化css实际项目中最好不要使用中文作为文件名称,这里为了好理解我就使用中文了 首页一般命名为 index.html,初始化css一般命名为 base.css ,其余公用css一般命名为 common.css目录1头部1.1代码部分1.2要注意的问题1.2.1版心问题1.2.2命名问题1.2.3竖线2搜索部分2.1代码部分2.2要注意的......原创 2022-03-31 10:48:19 · 439 阅读 · 0 评论 -
25.品优购项目
目录1 案例介绍2案例准备1 案例介绍我们做一个这个页面百度 品优购 可以查到,百度的地址有时会更改页面,不过你百度 品优购 然后找别的地址总可以看到这个页面这个就是给前端人员练习的一个网站,网站有三个页面构成首先是首页然后是注册页面,在这里有个 免费注册 链接点开后出现注册页最后点击这里的手机这个是列表页2案例准备在这个项目中,我是先把项目做完然后截的图首先我们把该准备的东西都准备了,创建下面这些文件夹,图像的话我们可以用...原创 2022-03-31 10:37:44 · 187 阅读 · 0 评论 -
24.过渡属性
一般用来做简易的动画,从一个状态渐渐过渡到另一个状态,它的语法是这样的属性是像宽度,高度,位置,背景颜色这种。必选参数花费时间单位是s,必须要写单位。可以使用浮点秒数,比如0.5s,必选参数运动曲线是指渐变的速度情况,比如前快后慢,前慢后快这种,默认是ease,我们一般不用动这个。可选参数何时开始的单位是s,默认是0s,如果要更改的话必须要写单位,我们可以在这里设置延时触发,可以使用浮点秒数。可选参数,当你只想写何时开始而不写运动曲线是不行的,当只想改动何时开始的时候,前面要给一个e原创 2022-03-16 10:55:45 · 223 阅读 · 0 评论 -
23.calc 函数
calc函数可以用于尺寸的计算我们现在有两个父子关系的盒子我们现在想让子盒子的宽与高,永远是父盒子的一半再加20像素,那么我们可以这样写符号可以是加减乘除,符号的两侧一定要有空格,不然不会生效现在我们改变一下父盒子的宽度发现子盒子的宽度也会随之变化...原创 2022-03-16 10:07:49 · 161 阅读 · 0 评论 -
22.图像滤镜
CSS3滤镜filter的语法是这样的相关函数可以在这里面看一下filter - CSS(层叠样式表) | MDN除了我截图的这些还有其他的,我们这里做一个图像模糊的例子,它的效果是这样的我们现在将一张图片变模糊一点小括号中数值越大,图像越模糊,如果改为0,图像就不会模糊它的效果是这样的...原创 2022-03-15 10:39:42 · 112 阅读 · 0 评论 -
20.溢出文本用省略号表示
我们现在有一个盒子,盒子里装很多的文字1单行文本溢出用省略号表示我们要搞三步强制一行显示文本 white-space:nowrap; 如果设置为normal会自动换行,normal是默认值 超出部分隐藏 overflow:hidden; 用省略号代替超出部分 text-overflow:ellipsis; ellipsisi是省略号的意思,如果想用别的符号可以查一下text-overflow跟的值 我们现在把上面三行写上去效果是这样的2多行文本溢出...原创 2022-03-11 10:20:21 · 471 阅读 · 0 评论 -
19.垂直对齐 vertical-align
我们之前让文字垂直居中都是让行高与容器宽相等但当我们在容器中加入一张图片,这种方式就会失效我们可以将其放置在两个不同的盒子中,但这样会很麻烦,这个时候我们就用到了vertical-alignvertical-align只对行内元素或行内块元素生效,它的语法是这样的baseline 把元素放置在基线上,默认值 top 将元素与最高元素顶端对齐 middle 将元素放置在最长元素的中部(与父元素无关) bottom 将元素与最低元素的底端对齐位置大概是这样的我原创 2022-03-11 10:10:18 · 229 阅读 · 0 评论 -
18.用户界面样式
目录1鼠标样式 cursor2表单轮廓线 outline3文本域防止拖拽 resize1鼠标样式 cursor鼠标样式的属性是cursor,它的语法是这样的它有下面五个常用的样式default 白色光标,大部分元素的默认值 pointer 手型光标 move 移动光标,十字的内种 text 文本光标 not-allowed 禁止光标我们做一个例子现在我将鼠标放到红色区域,鼠标就会变成移动光标的样式,我当前截图截不了鼠标cursor只对...原创 2022-03-09 14:37:23 · 883 阅读 · 0 评论 -
17.CSS三角
像京东的这里这个就是css三角css三角的原理实际上是对宽高为0的盒子设置边框,当只有一个边框有颜色时,其他边框颜色都为透明时,就会出现三角的效果可以通过改边框宽度把三角搞大一点我们可以把代码写简单一点这样写使用不同方向的三角只用改border-bottom-color中间的bottom,如果要使用不同的颜色只需要改动后面的颜色值我们看别人的css时可能会看到这两行写这两行是照顾兼容性问题,大多数情况不写也没事儿1简易京东效果我们简单做..原创 2022-03-09 14:32:26 · 7449 阅读 · 2 评论 -
15.精灵图
像这种给小图标攒成一张图的图像,就叫精灵图使用精灵图的目的是降低请求次数,比起每个小图标都要请求一次,我们直接给一个大的图像,在显示若干个小图标的时候,只需要请求一次精灵图主要用于小的且不经常换的图像(因为整一张精灵图费劲),像这种要经常换的图像,最好不要使用精灵图技术精灵图被称作 CSS sprite,它的工作原理实际上是改动background-position,我们做个例子,我们现在有这样一张精灵图一般从美工手里拿到的都是透明背景的,我这是白的,我就简单用一下我现在搞两个原创 2022-03-09 09:30:50 · 2140 阅读 · 0 评论 -
14.元素的显示与隐藏
显示与隐藏多用于这种广告你点这个叉,这个广告就会消失(隐藏),当我们刷新后,这个广告就又回来了显示与隐藏中有三个属性,分别是display,visibility与overflow目录1display1.1隐藏元素 display:none2visibility2.1hidden2.2visible2.3inherit2.4collapse2.4.1非表格元素2.4.2表格元素3overflow3.1hid......原创 2022-03-09 09:27:49 · 1561 阅读 · 0 评论 -
13.定位属性
主要的布局方式有三种,标准,浮动,定位。使用定位,我们可以随意将元素放到指定位置标准,浮动,定位是相互冲突的,对一个元素,我们只能使用一种布局方式像百度的这个导航栏我们就可以使用定位布局无论我如何滚动右侧的滚动条,导航栏的位置总是不变的定位有两个部分构成,分别是定位模式与边偏移我们先说定位模式,定位模式通过position属性设置,有五种不同的模式static 静态定位,这个是默认值,静态定位就是标准流 relative 相对定位 absolute 绝对定位 fixed原创 2022-03-09 09:21:14 · 1452 阅读 · 0 评论