html+css笔记
文章平均质量分 93
2020我的寒假学习笔记
宠儿呀
万众仰望之前,捱过散落的妄言
展开
-
番外:设置自定义字体
番外:css中设置自定义字体(引入字体)1.常规下(你自己有字体包的情况下)假设你的文件夹这个样子:font文件夹下有两个字体文件,此时你想使用zkkh.ttf(站酷酷黑字体)代码如下: <style> @font-face { font-family: "zkkh"; src: url("font/zkkh.ttf"); } p{ font-family:原创 2020-05-13 18:30:28 · 183 阅读 · 0 评论 -
16.flexbox弹性盒模型
1.来源需求:一种更为简单、有效的方式来对一个元素块中的子元素进行排列、对齐和分配空余空间。2.基本概念3.属性详解①应用:display:flex;②决定主轴的方向:flex-directionrow; 主轴横向从左至右row-reverse;主轴横向,从右至左column;主轴纵向,从上至下column-reverse;主轴纵向,从下至上③换行:flex-wrap:...原创 2020-03-15 14:03:11 · 157 阅读 · 0 评论 -
18响应式网站--媒体查询
18响应式网站–媒体查询文章目录18响应式网站--媒体查询1、什么是响应式网站2、响应式网站的核心逻辑3、媒体查询????视口viewport????方式一@media????方式二@inport????方式三link????断点设计????根元素rem1、什么是响应式网站响应式是一种网页设计的技术做法,该设计可使网站在不同的设备(从桌面计算机显示器到移动电话或其他移动产品设备)上浏览时对应不同分辨率皆有适合的呈现 。2、响...原创 2020-03-03 18:34:15 · 280 阅读 · 0 评论 -
17图标icon、iframe与语义化标签
文章目录一、图标1、应用2、获取方式3、应用方式①为使用unicode中图标②为使用font class图标③为使用Symbol中图标二、iframe框架三、语义化标签一、图标1、应用商品缩略图网页组件logo2、获取方式阿里巴巴矢量图标库:https://www.iconfont.cn/第一步:登陆账号–>选择任意logo–>点击弹出的购物车logo(可多次选择)–...原创 2020-03-03 18:22:11 · 613 阅读 · 0 评论 -
15.3D动画、盒阴影、滤镜样式
15.3D动画、盒阴影、滤镜样式文章目录15.3D动画、盒阴影、滤镜样式1.3d动画1-1立方体代码2.盒阴影box-shadow2-1凹凸文字代码3.滤镜样式1.3d动画感觉讲原理也没有什么用,3d动画就是建立在空间坐标系上的,使物体产生立体感的东东吧。默认情况下前端的3D坐标系是没有Z轴值的, 所以默认看不到3d物体的远近, 只能看到3D物体的投影,通过给坐标系添加perspectiv...原创 2020-02-28 18:24:24 · 167 阅读 · 0 评论 -
14transform变化样式
最近新学了思维导图,就用图来表示吧他们的复合样式位置的不同会导致效果的不同。比如这样:①transform:translateX(200px) translateY(300px) rotate(45deg);②transform:rotate(45deg) translateX(300px) translateY(200px) ;话不多说,下边是一个摩天轮旋转代码:/*css样式...原创 2020-02-27 18:07:10 · 167 阅读 · 0 评论 -
13动画样式
13动画样式文章目录13动画样式1.定义2.动画发生的基本实现条件3.关键帧动画创造方式4.????触发式(过渡)动画5.????主动式动画1.定义 动画是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。为了得到活动的画面,每个画面之间都会有细微的改变。(以上定义来自维基百科)2.动画发生的基本实现条件短时间内连续播放多张静态的帧(...原创 2020-02-26 18:21:57 · 287 阅读 · 0 评论 -
12伪类选择器和伪元素应用
12伪类选择器和伪元素应用1.伪类选择器CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字。<style> li:nth-of-type(2n){ background-color:red; }</style>关于伪类选择器,做了一个简单的思维导图来表示他们的作用:2.伪元素 伪元素的目的即为现...原创 2020-02-26 18:13:23 · 253 阅读 · 0 评论 -
11表格元素与表格布局
11表格元素与表格布局1.典型表格布局网站2.表格元素3.合并单元格4.边框样式设计原创 2020-02-22 16:11:35 · 386 阅读 · 0 评论 -
10表单
10表单1.应用网页注册登录界面、信息调查问卷。搜索引擎的输出框。2.表单form标签浏览器在网页上专门用来划分出一个用来存储表单元素的块元素。form标签的action属性内部是一个连接,指向的是提交表单时向哪个服务器地址发送表单数据。form标签的method属性内部存储着,该表单向目标服务器传输数据时采用的是哪种方式。get提交的内容会出现在地址栏上,不安全,存储量小;post...原创 2020-02-22 16:07:09 · 212 阅读 · 0 评论 -
09定位样式
09定位样式(1)由来应用:不随网页内容上下滑动而改变位置的导航栏。交叉重叠布局漂浮起来的元素不再遵守普通流,我们需要另起一套布局规则来实现元素的位置设置,该规则即为坐标系布局。(2)定位样式①绝对定位position:absolute;绝对定位参照浏览器。(从浏览器左上角开始进行值的计算。)代码: position: absolute; to...原创 2020-02-19 16:22:20 · 117 阅读 · 0 评论 -
08浮动样式
08浮动样式(1)由来首先了解一下默认元素标准流。普通流规则: 浏览器在默认情况下规定一个块元素在父元素内的排列规则:从上往下排列从左开始排列一个块元素占一行为了更好的排版布局,开始脱离标准文档流,使用浮动样式。(2)原理注1:设置了浮动样式的元素不再遵守普通流规则,因此两个浮动的元素可以在同一行显示。注2:当父元素的宽度不足以放下所有的浮动元素时,那么超出父元素边...原创 2020-02-19 15:03:15 · 180 阅读 · 0 评论 -
07圆角样式和渐变色样式
07圆角样式和渐变色样式文章目录07圆角样式和渐变色样式(一)圆角样式border-radius(1)定义(2)基本原理(3)样式值格式(4)椭圆设计(二)渐变色background-image(1)定义(2)线性渐变linear-gradient()(3)径向渐变radial-gradient()(4)重复渐变色(5)渐变形状(一)圆角样式border-radius(1)定义圆角样式(b...原创 2020-02-17 17:22:53 · 414 阅读 · 0 评论 -
06背景样式
06背景样式(1)定义背景样式,是W3C规定一个浏览器如何渲染元素的背景层,用户可以在背景层上增加颜色,图片等效果。(2)设置背景颜色(background-color)背景颜色的值常用三类设置方式:reb:字符含义 r→red(红) g→green(绿) b: blue(蓝).取值范围:rgb(0,0,0)→rgb(255,255,255)rgba:...原创 2020-02-13 19:12:36 · 1707 阅读 · 0 评论 -
05默认显示类型与显示类型转换
05默认显示类型与显示类型转换(1)显示样式显示样式(display),是W3C规定浏览器采取哪种盒模型规则来显示一个元素,常用显示样式的值有:block(块级盒模型)inline(行内盒模型)inline-block(行内块级盒模型)行内块级盒模型(inline-block box moldel):让一个元素拥有块元素的宽高、边距、边框等特性的同时,还拥有垂直居中对齐,文本对齐方式...原创 2020-02-13 00:45:30 · 149 阅读 · 0 评论 -
04.CSS行内盒模型及文字样式详解
04.CSS行内盒模型及文字样式详解文章目录04.CSS行内盒模型及文字样式详解<1>定义<2>行内盒模型的概念分析????内容区????文本基线(baseline)、中线middle、顶线top、底线bottom????行间距与行高(line-height)<3>复杂的行内盒模型????替换元素对文本框高度的影响????单行不同文字大小、行高对行内盒模型的影响<4>文字样式????...原创 2020-02-11 19:22:40 · 587 阅读 · 1 评论 -
03盒模型概念及企业级应用规则
03盒模型概念及企业级应用规则文章目录03盒模型概念及企业级应用规则1.盒模型定义2.标准盒模型概念分析????**内容区 width/height**????**边框区 border**????**内边距区 padding**????**外边距 margin**????????????**整体分析:**3.怪异盒模型概念分析4.企业级应用规则①父子元素外边距合并②兄弟元素外边距合并1.盒模型定义盒模型(Box Moldel),是W...原创 2020-02-09 16:58:36 · 159 阅读 · 0 评论 -
02css基本样式与元素选择器
02css基本样式与元素选择器1.定义 层叠样式表(Cascading Style Sheets,简写CSS),是一种用来为HTML文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。HTML是内容的展示,CSS是内容的装饰。 CSS中的代码注释格式采用的是:/...原创 2020-02-09 14:47:30 · 183 阅读 · 0 评论 -
01. HTML基本标签
一. HTML基本标签(1)基本标签(骨架)标签详解<!DOCTYPE html>文档类型定义。<!DOCTYPE> 标签位于文档的最前面。此标签不属于 网页的内容,它是一条指令。<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。1. html:声明该文档是html5版本...原创 2020-02-05 23:15:54 · 259 阅读 · 0 评论