前端入门part10

最新推荐文章于 2021-08-09 17:23:24 发布
最新推荐文章于 2021-08-09 17:23:24 发布
阅读量62 收藏
点赞数
分类专栏： 前端入门 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyp3171790866/article/details/112491041
版权
div和span标签补充
  • 容器级可以嵌套其他所有标签；文本级只可以嵌套文本、超链接、图片
divspan
完成网页布局修改局部信息
独占一行不会独占一行
容器级标签文本级标签
块级元素和行级元素
  • 块内元素独占一行，行内元素不会独占一行；
  • 块级元素如果没有设置宽和高，就默认和父元素一样；也可以自己设置
  • 行级元素如果没有设置宽度，和内容一样宽；不可以自己设置
  • 行内块级元素：既可以不独占一行，又可以设置高度和宽度；
块级元素div h ul ol dl li dt dd和p
行级元素span buis stong em ins del
行内块级元素img,input,textarea
容器级div h ul ol dl li dt dd
文本级span buis stong em ins del p

上面这些不用记住，不同类型可以相互转换！！！

不同显示模式的转换

通过设置display: block; 块级；inline 行内 inline-block 行内块级
在这里插入图片描述

在这里插入图片描述

小小小泥鳅
关注
专栏目录
java雷电源码-study-part2-part3:前端入门HTML、CSS（重点：布局原则、盒子模型、弹性盒子）、JavaScript基础
06-05
端入门和进阶t是《全栈工程师修炼之路》的Part2、Part3部分。本教程是书籍+源代码+视频（未来录制） 本教程是本人原创教程，90%以上示例代码都经过本人亲自所敲，引用他人示例的本人会标明引入来源。 原创不容易，请...
前端 jiemi angular2 学习资料 电子书part3
09-22
《揭秘Angular 2》第一部分从前端的故事起点说起，然后对 Angular 以及 TypeScript 进行了简单的介绍，接着通过一个通讯录例子让读者快速入门 Angular 的开发；第二部分则深入讲解了 Angular 架构以及 Angular 核心...
前端入门part19
小泥鳅
01-20 43
a标签的伪类选择器 专门用来修改a标签不同状态的样式的； 注意点 以下适用于访问连接为http而不是HTTPS的！！ 要注意顺序，是上面的顺序！（爱恨原则 love hate） 如果默认状态下的样式和被访问过的一样（link和visited），那么可以缩写 在企业开发中，a标签的伪类选择器最好写在标签选择器的后面； 在企业开发中，和a标签盒子相关的属性都写在标签选择器中（显示模式/width/height/padding/margin） 在企业开发中，和a标签文字/背景相关的都写在伪类选择器中；
前端入门part06
小泥鳅
01-09 91
HTML中废弃的标签 注意：以上标签尽量不使用； strong==b; 定义重要性强调的文字； ins == u; 定义插入的文字； em == i; 定义强调的文字； del == s; 定义被删除的文字； 区别在于：下面几个有语义，上面几个没有语义； 字符实体 在HTML中对空格、回车、tab不敏感，会把多个当成一个空格来处理； 比如&nbsp；代表一个空格；&lt; 代表<;&gt; 代表>;&copy;代表版权符号©;别的参考W3C文档； .
前端入门part22阴影
小泥鳅
01-23 108
盒子阴影 box-shadow:水平偏移、垂直偏移、模糊度、阴影扩展、阴影颜色、内外阴影 注意 ① 盒子分为内外阴影，默认情况下是外阴影；inset实现内阴影； ② 快速添加阴影只需要快速编写三个参数即可；水平偏移、垂直偏移、模糊度； ③ 默认情况下阴影的颜色和盒子里面内容的 颜色一致； 文字阴影 text-shadow:水平偏移、垂直偏移、模糊度、阴影颜色； 注意点与上面一样； ...
前端入门part12精灵图
小泥鳅
01-12 178
精灵图 精灵图就是一种图像合成技术；（就像把一对小图标放在一张图片里，定位找到你此处想要展现的那个图标） 作用：可以减少请求次数，降低服务器处理压力； 使用：需要配合背景图片和背景定位来使用； 比如在网上随便找一张图片，想要里面几个小图标，就可以通过把该放置图标的几个div的背景都设置为这一张图片，然后在通过调整位置找到你想要的的小图标。 ...
前端入门part23动画模块
小泥鳅
01-26 107
动画模块 动画模块与过渡模块的异同 与过渡模块不一样的是，过渡模块需要人为出发才会启动； 其他类似，都是给元素添加动画的； 都需要满足三要素； 书写三要素 告诉系统执行哪个动画 animation-name: 动画名称; 创建这个动画；@keyframes abcd{} 告诉系统动画执行多长时间 animation-duration: 3s; 其他属性见W3C！ 如果有多个from->to怎么办？ 0{}->25%->50%->75%->100%; 动画的三种状态
前端入门part16网页布局
小泥鳅
01-14 84
网页布局方式 就是指浏览器如何对网页中的元素就行排版的； 标准流排版方式 浮动流排版方式 定位流排版方式
前端入门part20过渡模块
小泥鳅
01-21 57
过渡模块 过渡效果三要素 一定有属性发送变化； 必须告诉系统哪个属性需要执行过渡； 必须告诉系统过渡效果持续时间； 当有多个属性需要同时执行过渡时： 简单练习 要求 由第一幅图渐变为第二幅图： 问题分析 将每一个文字放置在一个标签中，在鼠标悬停时，扩大标签margin属性即可； 代码如下： 编写过渡的套路 不要管过渡，先编写基本界面； 修改我们认为需要修改的属性； 再回过头 去给被修改元素的属性添加过渡即可； 复杂练习之手风琴效果 问题需求 初始效果 当鼠标悬停在某一个图片上面时，底片
前端入门part07css学习
小泥鳅
01-09 237
css 写在head标签中；<style type="text/css"></style> css的文字属性 规定文字样式的属性；font-style：italic; 斜体；写下fs按下tab键直接生成 规定文字粗细的属性；font-weight：bold; 加粗，取值分为单词和数字取值；比如bolder比bold还粗；lighter细线；写下fw+tab键 规定文字大小的属性；font-size 规定文字字体的属性；font-family；必须是用户已经安装的字体； 需求：如
前端入门part14盒子模型
小泥鳅
01-13 81
在HTML中所有的标签都可以设置宽度、高度、内边距、外边距、边框；所以HTML中所有标签都是盒子。 内容的宽度和高度 通过标签的width和height属性设置的宽度和高度； 元素的宽度和高度 宽度=左边框+左内边距+width+右内边距+右边框 元素空间的宽度和高度 宽度=左外边距+元素的宽度+右外边距 css中新增了box-sizing：border-box；可以保证给盒子新增padding和 border之后，盒子的宽度和高度没变 如果两个盒子是嵌套关系，设置了一个盒子的顶部的外边距；
jsdom之创建子节点
小泥鳅
04-07 1795
创建一个元素节点、文本节点、为元素节点添加子节点（基础版） 创建一个元素节点、文本节点、为元素节点添加子节点（加强版） 效果如图：（并进行类型和数据的两次判空操作！） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加强版创建节点</title> <script> //需求：点击subm
js书写格式
小泥鳅
01-28 1000
什么是js? 程序执行前，不需要对代码进行编译，在运行时边解析边执行的语言； HTML用来搭建网页结构；CSS用来美化网页样式；JS控制网页交互； ECMAScript是ECMA制定的脚本语言的标准，规定了一种脚本语言实现包含的基本内容（基础语法）； DOM是JS操作网页上的元素的API； BOM是JS中操作浏览器部分的API； JS的书写格式 首先CSS的书写格式是怎样的？ 行内样式：写在标签的内部；（不推荐！） 内嵌样式：写在一对head标签中，一对style标签； 外链样式：写在一个单独地
修改element中表格的样式
小泥鳅
08-01 597
想修改组件中的样式，第一步，需要去掉css的局部作用 修改表头的背景色 方法：找到自己网页的源代码，利用类名一层一层的向下找，然后修改他的样式 值得注意的是：① 必须找自己对应的类名；② 如果没效果加个importment试试； 修改整个表格内容的背景色 方法：和上面类似，一层一层 的找类名 修改整个表格的斑马线样式 方法：根据行索引把行内容分为两种，返回对应的类名，并给两类类名加不同的背景颜色即可； 效果 修改表头文字样式 效果 修改表格内容文字样式 修改表格每行的高度 也是一
js之常量、变量、标识符
小泥鳅
01-28 456
常量 表示一些固定不变的数据； 常量类型①整型常量 js中随便一个整数都是整型常量； 常量类型②实型常量 随便一个小数都是实型常量； 常量类型③字符串常量 就是用单引号或者双引号括起来的内容； 注意： 无论括起来多少个字符，都是字符串常量； 常量类型④布尔常量 只有俩取值，true、false； 常量类型⑤自定义常量 const 常量名称 = 常量取值； 变量 可以被修改的数据； var 变量名称;//如果变量不进行初始化，存储的是undefined； 变量名称 = 需要存储的数
前端入门part13边框和边距
小泥鳅
01-12 413
边框 边框就是环绕在标签宽度和高度周围的线条； ①同时设置四条边的边框 border：边框的宽度 边框的样式 边框的颜色 ② 分别设置边框 border-top: 边框的宽度 边框的样式 边框的颜色 border-right: 边框的宽度 边框的样式 边框的颜色 border-left: 边框的宽度 边框的样式 边框的颜色 border-bottom: 边框的宽度 边框的样式 边框的颜色 连写格式下的注意点： 颜色可以省略，默认是黑色； 样式不可以省略，看不到边框啦； 宽度可以省略，可以看得
登录页面——用户名、密码、邮箱的验证
小泥鳅
08-09 330
需要用到后台提供的接口文档 注意根据接口文档判断是get还是post 如果是get，send里面就是null 如果是post，需要加一个请求头，send里面也有自己需要传的内容（key+value的形式） 同时根据接口文档的不同返回值进行不同情况下的处理 ...
jsDOM之删除、插入节点
小泥鳅
04-09 302
删除节点 a节点.parentnode.removeChild(a节点) 可以增加一个对话框提示是否确定删除
jQuery入门：构建动态前端开发指南
"《从入门到精通：jQuery开发JavaScript与CSS》是一本详尽的指南，由Richard York撰写，旨在帮助读者掌握JavaScript和CSS的基础以及如何通过jQuery进行高级开发。本书适合初学者和有一定经验的开发者，它提供了全面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值