前端笔记
关注
分享
扫一扫
文章平均质量分 89
戴代_
爱测试的小朋友
展开
-
十.CSS3的过渡效果
目录一、效果概述二、效果应用1.改变宽度2.带参数设置3.多属性的过渡效果三、形变的效果一、效果概述CSS3的过渡效果可以让一个元素的某一个或多个css属性从一个值平滑过渡到另一个值。可以用一个transition来实现元素的过渡效果。二、效果应用1.改变宽度通过transition属性，可以设置元素的过渡效果，当某个属性被设置成过渡属性之后，这个属性的值如果发生变化，就会以动画的形式从初始状态过渡到结束状态。代码如下（示例）：.box { width: 200px; hei原创 2020-09-02 08:51:46 · 641 阅读 · 0 评论 -
四、Box Model
盒子模型目录盒子模型一、模型的概述二、盒子的属性marginpaddingborder宽高的计算一、模型的概述可以把一个网页分解成一个个区域，大的区域内部可以嵌套小的区域，就像博客首页一样。红色的区域是最大的区域，整个网页由两部分红色区域组成，蓝色区域在红色区域之中，绿色区域最小。每个区域都可以看做一个盒子，一个网页就是由一个个大大小小的盒子嵌套而成。盒子之间或内外是有边距的，通过以下属性控制盒子的边距margin：外边距padding：内边距盒子模型还会涉及到我们之前学过的一个属原创 2020-08-24 15:22:31 · 195 阅读 · 0 评论 -
五、浮动布局
目录一、元素的种类1.特点2.分类3.类型的转换二、浮动布局1.float的属性2.空div清除浮动3.伪元素清除浮动一、元素的种类1.特点h1标签可以设置宽高，可以设置所有外边距，独立成行。img标签可以设置宽高，可以设置外边距，不独立成行。a标签不可以设置宽高，不可以设置上下外边距，不独立成行。2.分类html元素可以分为三大类：块元素、行内元素、行内块元素，特性如下所述：块元素：可以设置宽高，可以设置所有外边距，独立成行。块元素：h*、div、ul、li、p、form行内原创 2020-08-25 09:03:26 · 237 阅读 · 0 评论 -
八.HTML5新增的标签
目录一、HTML5概述二、html5布局标签三、html5媒体标签1.音频标签2.视频标签一、HTML5概述html5是超文本标记语言（html）的第五次重大修改，可以简单的理解为是html的第五个大版本。我们平时所说的html5其实是包含了html5，css3的新特性，以及新增的JavaScript接口。本节的主要内容是讲解html5中新增加的布局标签和媒体标签。二、html5布局标签网页布局一直都是使用div作为容器，html5新标准中，为了让容器元素有语义，让网页更具可读性，新增了以下的标原创 2020-08-28 09:43:22 · 141 阅读 · 0 评论 -
二、表单与表格元素的介绍
二、表单与表格元素目录二、表单与表格元素1.表格元素2.表单元素form标签input标签placeholder属性下拉菜单1.表格元素在网页中，我们经常用表格来显示数据，例如下面的班级列表。项目价格电脑$1600手机$12我们可以用表格元素实现在网页中制作表格代码如下（示例）：<table border="1" width="100%"> <thead> <tr> <原创 2020-08-20 10:00:43 · 175 阅读 · 0 评论 -
九.CSS3新增的属性
文章目录一、属性的概述二、圆角三、阴影四、形变1.旋转2.缩放3.位移一、属性的概述在此前我们讲解的css课程中，课程内容是以css2版本为基础的，本章开始我们讲解css3版本的新特性。在css2的时代，由于css的功能局限性，我们制作的很多网页效果都是利用一些取巧的方法，例如实现一个圆角的页面，我们需要把圆角的部分用图片代替，而制作动画效果，都需要使用JavaScript来完成的，这不仅增加了代码编写的难度，还降低了web开发人员的工作效率。在css3中我们可以使用大量新增的属性，例如圆角，阴影原创 2020-09-01 11:06:56 · 91 阅读 · 0 评论 -
十二.flex布局
目录一、flex布局概述二、flex容器1.flex-direction2.justify-content3.align-items三、flex项目1.align-self2.flex一、flex布局概述此前我们制作的所有网页都是基于盒子模型和浮动布局完成的，本节我们一起学习弹性布局（或者叫弹性盒子布局），这是一种更先进的布局方式，可以让网页布局更简洁，更易于维护。本节会针对flex布局的常用属性，讲解如何将flex布局应用到实际项目中。二、flex容器代码如下（示例）：.box{ dis原创 2020-09-03 14:44:02 · 110 阅读 · 0 评论 -
十四.媒体查询
目录一、响应式页面概述二、媒体查询1.max-width2.min-width3.多个标准三、响应式页面四、响应式页面的缺点一、响应式页面概述在我们学习媒体查询之前，先来了解一下什么事响应式页面链接: 响应式页面.这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看到手机端和电脑端访问同一个网页时，都能获得比较好的浏览体验。也就是说，一套代码可以同时适应多个设备。这样的网页就是响应式网页。这里需要特别注意的是，我们访问同一个网站的地址，用手机可以正原创 2020-09-04 11:18:16 · 192 阅读 · 0 评论 -
十一.CSS3的动画效果
目录一、动画效果1.定义动画2.设置动画3.让动画更连贯4.循环动画5.停止动画一、动画效果动画效果与过渡效果的区别在于，过渡效果一般用于用户与浏览器有交互的情况下，网页出现一些动态的变化。动画效果可以实现网页没有任何交互的情况下，自己就会展示动态效果。1.定义动画通过@keyframes可以定义动画效果。代码如下（示例）：.box { width: 200px; height: 200px; background-color: #00f; animation:原创 2020-09-02 09:48:03 · 95 阅读 · 0 评论 -
七.CSS的定位
目录一、CSS定位的概念二、理解1.绝对定位2.相对定位3.固定定位4.设置参照物一、CSS定位的概念在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，现在我们就讲解css定位相关的属性，定位可以分为三类，绝对定位相对定位固定定位二、理解我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、right属性来设置元素原创 2020-08-27 09:33:50 · 195 阅读 · 0 评论 -
六、树状结构
文章目录一、树状结构1.结构概述二、html文件的树状结构一、树状结构1.结构概述节点之间的关系以家谱为例，家谱中的每一个人我们都可以称他为树状结构的节点。司马懿是一个节点，司马炎同样也是一个节点，这些节点是有关系的，具体关系如下：根节点：每一个树状结构都有一个没有父级的节点，他被称作根节点。父级节点：司马防是司马懿的父级，司马懿是司马师的父级。子级节点：司马师是司马懿的子级，司马懿是司马防的子级。同级关系：有相同父级的节点就是同级关系，司马懿和司马朗是同级，司马昭和司马亮是同级。（这里原创 2020-08-26 14:33:33 · 250 阅读 · 0 评论 -
十三.grid布局
目录一.grid布局概述1.grid布局与flex布局对比2.grid布局基本概念二.id容器1.设置gird容器2.grid-template-columns属性与grid-template-rows属性3.grid-column-gap属性与grid-row-gap属性4.justify-items属性与align-items属性5.justify-content属性与aling-content属性三.grid项目1.justify-self属性与align-self属性2.grid-column-st原创 2020-09-04 11:05:23 · 248 阅读 · 0 评论 -
三、CSS
三、CSS选择器和常用属性目录三、CSS选择器和常用属性一、CSS基本语法二、CSS选择器元素选择器：h1,div,img等等类选择器2.读入数据总结一、CSS基本语法CSS(层叠样式表)控制着网页的样式，例如我们之前编写的HTML文件，文字的颜色都是默认的黑色，如果希望将文字设置成其他颜色，就需要CSS了，可以在HTML文件中填写如下代码，即可把一个h1标签的文字设置成红色。代码如下（示例）：<body><style> /* CSS注释：用来备注一些代码讲原创 2020-08-21 16:03:48 · 140 阅读 · 0 评论 -
一、前端开发的HTML介绍
一、HTML目录一、HTML1.HTML语法html语法有以下四个特征2.常见的标签标题标签列表标签超链接标签（锚点标签）图片标签div标签span标签3.常用的html属性总结1.HTML语法代码如下（示例）：<!DOCTYPE html> <!-- 文档声明 --><html lang="en"> <!-- html开始标签 --><head>原创 2020-08-19 16:21:30 · 192 阅读 · 0 评论 -
1.1HTML/CSS面试题
（HTML/CSS）目录（HTML/CSS）1. 行内元素（行级元素、内联元素）、行内块元素、块元素各有什么区别。html元素的分类2. 清除浮动有哪些方法3. 盒子模型有哪些常用的属性，如何使用这些属性。1. 行内元素（行级元素、内联元素）、行内块元素、块元素各有什么区别。行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的ma原创 2020-08-20 14:15:54 · 237 阅读 · 2 评论 -
1.1我的笔记
HTML标签：记录：HTML标签标签一级标题标签二级标题标签三级标题标签四级标题标签五级标题标签六级标题标签li标签一定要写在列表之中，不能单独使用。ul标签内只存放li标签，不要把其他标签也放入ul当中（如果需要在列表中添加图片或链接，可以写在li中，而不是ul中）。p换行超链接跳转到百度跳转到demo01.html文件跳转到页尾分行标题超链接 百度 网易 腾讯图片标签网页中的图片可以使用img标签表示，代码如下所示：示例代码img标原创 2020-08-25 09:43:50 · 107 阅读 · 0 评论