北京专业网站建设,WordPress如何调用,口碑营销方案,开福区城乡建设局门户网站使用工具#xff1a;
Vscode使用#xff1a;
需要下载插件#xff1a;open in browser。这个插件可以快速打开浏览器。
选择文件夹有两种方式#xff1a;选择打开文件、拖拽方式#xff08;这种最方便#xff09;
快捷键#xff1a;快速生成Htm结构文件#xff1a;…使用工具
Vscode使用
需要下载插件open in browser。这个插件可以快速打开浏览器。
选择文件夹有两种方式选择打开文件、拖拽方式这种最方便
快捷键快速生成Htm结构文件!回车 注意是英文符号
代码格式化shiftaltf
向上移动Altup
快速复制一行(复制到上行)shiftAltup 一、HTML补充
HTML5 是超文本标记语言。它有两种表现形式双标签html、p、div 和单标签img、meta。
meta是单标签 用来指定网页格式。常用meta charsetutf-8 路径
路径分为绝对路径和相对路径。绝对路径就是从d盘一直到目标所在。
相对路径分为 父级路径 ../ 一般表示回退到上一个文件夹。然后找到图片所在位置。 子级路径 /1.jpg 同级路径: ./images/1.jpg 一般来说子级路径和同级路径是一起使用的。比如上面一个例子。
超文本链接a 内联元素和块级元素 HTML5新版本 新增的标签
新增标签的目的是为了利于SEO搜索引擎的排名。利于搜索爬虫快速找到。 需要注意的是存在浏览器版本兼容性问题。 选择器的优先级 二、CSS补充
CSS是层叠样式表又叫 级联样式表简称样式表。
语法由两部分构成 选择器一条或多条声明。
CSS引入样式
分为 内联样式p style~ /p 内部样式在头部定义。style /style 外部样式link relstylesheet href .css 选择器
分为 全局选择器*{ } 它的优先级是最低的 元素选择器根据HTML元素选择。而且一旦选择了就是body部分所有这个元素的样式。 类选择器 用圆点 . 定义。针对所需要的标签使用。注意命名不能以数字开头。同一个标签可以使用多个类选择器用空格隔开。例如p classfirst second/p ID选择器在css里面用#定义。 h2 idcontent / #content{ } 。特点它的名称只能使用一次。和类选择器不同类选择器可以使用多次。 合并选择器 p,h2{ } 或者 .text.title{ }
需要注意 选择器的优先级行内样式优先级最高、同级类元素后者会覆盖前者。 关系选择器
分为 后代选择器E F{ } 选择E里面所有的F标签 子代选择器div p { } 紧跟div后的p标签 相邻兄弟选择器h3p{ } 只有相邻的。隔一个都不行 通用兄弟选择器E~F{ } 选择E之后的所有同级标签。 CSS盒子模型
注意下边图像的四个概念。 外边距透明的、消除边框外的区域。 撑开自身内容大小不变//不是撑大噢
边框
内边距消除内容周围区域是透明的。不过会因为背景的改变而改变外边距不会。它会撑大自身内容大小不变。
content显示文本和图像。 弹性盒模型flex box
目的为了适应不同屏幕的大小。提供一种更加有效的方式对一个容器中的子元素进行排列、对齐和分配 空白空间。
组成弹性容器flex-container和弹性子元素flex-item组成。
设置displayflex定义 一个弹性容器 默认是横向摆放。 flex-direction 属性
row、row-reverse、column垂直摆放、column-reverse。 justify-content
就是相当于 子元素是什么方向那么它的样式就是什么方向。 align-items属性
相当于 子元素是什么方向它的方向就是子元素的纵向。它一般和justify-content搭配使用。搭配使用可以定义五个方向的位置。 小结弹性盒模型只能定义5个位置的方向。如果需要指定位置存放。在后续浮点元素和定位元素会有介绍。 扩展flex元素定义宽度权重。
例如在一个父框架里面定义n个子框架。在子框架设置flex:2 flex:1flex:1。那么就是占用父框架的几分之几。 文档流
存在几个问题高矮不齐、底边对齐元素之间无空隙空格折叠。
文档流就是普通定义的一些选择器它们会在一个文档里面的样式。 为了解决文档流的问题提出了脱离文档流的方法。
分别是浮动、绝对定位、固定定位。
脱离文档流
浮动
定义 它会脱离文档流相当于在上层有一个布局。 如果有两个图片都定义float:left它们都显示在上层不会出现有空隙的情况。
浮动也可以使 同级元素横向摆放。类似于display:flex;
当浮动的元素超出容器的框架它会被挤在容器下面。
不同点浮动可以设置宽高flex可以适应屏幕。
注意浮动使元素脱离文档流且只有左右浮动无上下浮动。 清除浮动
浮动的缺点会造成 父元素高度的塌陷后续元素受影响。
例如如果没有设置 父框架的高度它的框架是靠子元素撑开。而一旦设置子元素为浮动那么父元素的高度就会变为0。而且后续添加的子元素或者同级元素它会出现在原本父元素的位置被设置为浮动的子元素所覆盖。 清除浮动的方法 父元素设置高度 //它可以直接撑开框架就不需要子元素撑开了。 对受影响的元素增加clear属性。例如后续添加的子元素使用clear:both无论是左浮动还是右浮动都可以消除。 overflow清除浮动。 在父元素上添加overflow:hidden clear:both 这种情况下父元素不能设置高度。 伪对象方式。 在父元素添加 .container::after{ content:; display:block; clear:both; }。同样父元素不能设置高度。
小结在没有对父元素设置高度的情况下一般使用第三种清除浮动的方式。而第二种清除浮动方式用于会受影响的子元素或者同级元素下才使用。 定位position
分为relative、absolute、fixed。后面两种方式可以脱离文档流。 它们有四个属性值left、right、top、bottom。
绝对定位absolute每设置一个绝对定位相当于单独设置一层。
固定定位fixed它的特点是无论页面怎么流动它都会固定在页面上。 相对定位和绝对定位 是相对于具有定位的父级属性进行位置调整如果没有父级元素就往上找直到最底层是文档流。
z-index决定堆叠顺序。谁大谁放在上面。 CSS新特性
圆角border-radius 50%或者100%都表示圆形。它有四个值分别表示的顺序是左上右下右上坐下。
border-radius1px 2px 3px 4px
回顾margin0 auto表示图形 在屏幕居中。0表示上下位置不用管auto表示左右自适应。 阴影box-shadow
它也有四个值分别的含义是h-shadow水平阴影、v-shadow垂直阴影、blur模糊和color。
注意blur和color可以合起来 用rgba表示。rgba(0,0,0,0.1)。 0.1就是模糊度。
box-shadow2px 2px rgba(0,0,0,0.1) 动画
是指 使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意次
需要指定变化的时间两种方式
使用关键词 from (等同于0%)、to等同于100%使用百分号0%表示动画开始、100%表示动画完成。 keyframes创建动画
keyframes myAnim{0% {top: 0px;}25% {top: 200px;}50% {top: 100px;}75% {top: 200px;}100% {top: 0px;}
}
animation执行动画 p{ animationmyAnim 5s linear 0s infinite} //分别表示动画器名称、持续时间、速度匀速、延迟时间、循环次数无数次 还可以加上鼠标触碰就停止的效果p:hover { animation-play-statepaused}
执行动画的一些详情值见下图所示 媒体查询 会根据设备的大小 自动识别加载不同的样式。
一般都是在开头设置meta标签使用设备的宽度作为视图宽度并禁止初始的缩放。比如一些在pc屏幕设置宽度后在缩放它会等比例缩放而不是按照我们需要的样式不变。
meta nameviewport content widthdevice-width initial-scale1maximum-scaleuser-scale1 媒体查询的语法
media screen and 雪碧图Css Sprite
也叫做css精灵图。
原理通过background-image 引入背景图片通过background-position 将背景图片移动到自己需要的位置。
注意display:block表示将一个行内联元素变为块级元素。 字体图标 当使用图标时我们可能遇到图片失真的情况也可能因为图片的数量很多使页面的加载很慢。继而提出了字体图标的方式。
它的用法可以参考图标库。从图标库下载代码然后复制到我们的项目中直接使用。
iconfont-阿里巴巴矢量图标库 如果要改变字体图标的样式建议新建一个类。例如下图
