HTML&CSS&Sass
HTML5、CSS3笔记
H千面
菜得出奇的菜鸡成长史...
展开
-
Sass学习
学习网址:Sass入门篇原创 2021-09-01 17:18:48 · 153 阅读 · 0 评论 -
html&css开发规范
仓库地址:html-css-guide原创 2021-09-01 17:31:03 · 161 阅读 · 0 评论 -
CSS3 动画
一、相关知识点1、动画的基本使用制作动画分为两步:(1) 先定义动画(2)再使用(调用)动画(1)用keyframes 定义动画(类似定义类选择器)@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; }}(2)元素使用动画2、动画常用属性3、动画简写属性二、案例:热点图案例波纹的部分是缩放的其中图片是资源,如下图:代码:定义动画:70%不要使用transform: scale(原创 2020-12-17 10:49:13 · 168 阅读 · 0 评论 -
CSS实现旋转,缩放 --- CSS3之 2D 转换
相关知识点:1、旋转2、缩放3、2D转换综合写法综合写法:4、2D 转换总结2D即平面的,x轴和y轴1、效果:实现框中内部右边的箭头p::before { content: ''; position: absolute; right: 20px; top: 10px; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform:原创 2020-12-16 22:36:35 · 206 阅读 · 0 评论 -
CSS实现进度条---CSS3新特性之过渡
一、基础知识过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画: 是从一个状态 渐渐的过渡到另外一个状态,可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。样例:鼠标放上去变化 div { width: 200px;原创 2020-12-16 11:12:37 · 1265 阅读 · 0 评论 -
CSS3新特性实现各行换色,数据样式随数据行数变化
表格等信息展示样式常常需要各行换色,即样式跟数据行数有关系使用CSS3的新特性可以很方便的实现效果:涉及的知识点:nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2020-12-15 22:53:51 · 440 阅读 · 0 评论 -
CSS权重,属性书写顺序,布局技巧和网页布局总结,盒子模型排列位置---CSS
通过盒子模型,清楚知道大部分html标签是一个盒子。标准流可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。定位定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。...原创 2020-12-13 23:32:45 · 681 阅读 · 0 评论 -
子级绝对定位,父级相对定位的由来 --- CSS定位
CSS定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子。定位 = 定位模式 + 边偏移 。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。绝对定位相对定位固定定位子级绝对定位,父级相对定位的由来(子绝父相)① 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。② 父盒子需要加定位限制子盒子在父盒子内显示。③ 父盒子布局时,需要占有位置,因此父亲只能是相对定位。这就是子绝父相的由来,所以相对定原创 2020-12-11 15:40:56 · 4101 阅读 · 0 评论 -
圆角边框----CSS样式
原创 2020-12-04 15:44:34 · 164 阅读 · 0 评论 -
案例:CSS布局网页的产品信息模块
本文两个案例案例一效果及分析:代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&原创 2020-12-04 14:57:01 · 571 阅读 · 0 评论 -
前端需要掌握的PS基本操作
为网页美工大部分效果图都是利用 PS(Photoshop)来做的,所以以后我们大部分切图工作都是在 PS 里面完成。原创 2020-12-04 10:58:00 · 215 阅读 · 0 评论 -
案例:新浪导航案例-padding影响盒子好处---CSS
效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti原创 2020-12-02 16:44:05 · 585 阅读 · 0 评论 -
CSS三大特性
CSS三个特性:层叠性、继承性、优先级1、层叠性2、继承性:跟文字相关的一些特性。3、优先级选择器的权重优先级注意事项权重叠加:如果是复合选择器,会有权重叠加的问题权重有叠加,不会有进位的问题。...原创 2020-12-01 15:30:56 · 133 阅读 · 0 评论 -
五彩导航栏练习---CSS
这个导航栏,没啥借鉴的,只是对CSS背景的一些练习。效果:相关知识点:(1)CSS的模式转换,行级转换成块级(2)CSS的复合选择器,父子(3)链接伪类选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2020-12-01 11:08:28 · 460 阅读 · 0 评论 -
页面导入图片并设置位置---CSS背景及总结
页面中导入图片,并设置位置,不要使用src直接导入,而要使用background-image: url(url);导入,其中,括号内的url是图片的地址。使用src导入,不好设置位置。background-image : none | url (url)属性是设置背景图片,小的装饰图片,背景图片都可以使用这个属性。利用 background-position 属性可以改变图片在背景中的位置。div { width: 300px; height: 300原创 2020-12-01 09:27:59 · 1036 阅读 · 0 评论 -
使用a标签写小米官网侧边栏--CSS
效果:案例的核心思路分为两步:把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.鼠标经过a 给 链接设置背景颜色CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中涉及到的知识点:块级行级元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-11-30 16:01:28 · 515 阅读 · 0 评论 -
CSS 的元素显示模式---块级和行级的元素
资料来源于黑马pink老师的课程了解元素的显示模式可以更好的让我们布局页面.什么是元素的显示模式元素显示模式的分类元素显示模式的转换2.1 什么是元素显示模式2.2 块元素2.2 行内元素2.3 行内块元素2.4 元素显示模式总结2.5 元素显示模式转换例如将多个div在同一行显示。转换为块元素:display:block;转换为行内元素:display:inline;转换为行内块:display: inline-block;<!DOCTYPE htm原创 2020-11-30 14:54:03 · 481 阅读 · 0 评论 -
CSS的复合选择器之链接伪类选择器
CSS 复合选择器总结链接伪类选择器,超链接<a>标签可以设置<a>标签的各类状态,例如鼠标经过时,访问过等等。原创 2020-11-29 23:18:23 · 197 阅读 · 0 评论 -
Emmet语法---HTML&CSS
Emmet语法,大部分的编辑器已经集成了,合理使用可以减少工作量,快捷方便。快速生成HTML结构语法快速生成CSS样式语法相关博客:前端工具HBuilder 一些使用方法黑马pink老师的课件1、2、3、格式化代码:shitft+alt+f编译器VScode,保存代码时自动格式化...原创 2020-11-29 17:16:06 · 130 阅读 · 0 评论 -
HTML的表格标签<table>
HTML、CSS的课程是在B站看的黑马pink老师的,讲得比较详细,笔记做得也挺好,这篇博客只是将一些面试可能会考的点拿出来了。网课地址:黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩1、表格的相关属性2、合并单元格...原创 2020-11-23 17:02:55 · 161 阅读 · 1 评论