百里屠苏top - 博客园

2025年2月28日

摘要：一、JS语句 JavaScript程序的单位是行(line)，也就是一行一行地执行。一般情况下，每一行就是一个语句。语句以分号结尾，一个分号就表示一个语句结束。 <body> <script> var name = "张三" </script> </body> html中，JS是写在<script 阅读全文

posted @ 2025-02-28 15:29 百里屠苏top 阅读(11) 评论(0) 推荐(0)

No.26 JavaScript--简介

摘要：前端3件套：HTML CSS JS 一、JS简介 JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。 JavaScript 是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多。 1.为什么学阅读全文

posted @ 2025-02-28 11:50 百里屠苏top 阅读(7) 评论(0) 推荐(0)

No.25 CSS--字体图标

摘要：一、字体图标我们会经常用到一些图标，但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题。 1.常用的字体图标库阿里字体图标库：https://www.iconfont.c 阅读全文

posted @ 2025-02-28 11:28 百里屠苏top 阅读(19) 评论(0) 推荐(0)

No.24 CSS--雪碧图（Sprite,精灵图）

摘要：一、雪碧图 CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。 1.1优点减少图片的字节减少网页的http请求，从而大大的提高页面的性能 1.2原理通过background-image引入背景图片通过b 阅读全文

posted @ 2025-02-28 09:50 百里屠苏top 阅读(218) 评论(0) 推荐(1)

No.24 CSS--CSS3新特性（圆角、阴影、动画、媒体查询）

摘要：主要内容：圆角阴影动画一、圆角（border-radius） <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen 阅读全文

posted @ 2025-02-28 09:13 百里屠苏top 阅读(19) 评论(0) 推荐(0)

2025年2月27日

No.23 CSS--定位

摘要：一、定义 position属性指定了元素的定位类型。其中，绝对定位和固定定位会脱离文档流. 设置定位之后:可以使用四个方向值进行调整位置:Ieft、top、right、bottom. 二、相对定位 <head> <meta charset="UTF-8"> <meta name="viewport 阅读全文

posted @ 2025-02-27 16:44 百里屠苏top 阅读(15) 评论(0) 推荐(0)

No.22 CSS--浮动

摘要： 1.浮动的定义通过float属性定义元素在哪个方向浮动，任何元素都可以浮动。需要的时候才用。只有两个方向： left 元素向左浮动 right 元素向右浮动 2.浮动的原理浮动以后使元素脱离了文档流。只有左右浮动，没有上下浮动。脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。阅读全文

posted @ 2025-02-27 15:32 百里屠苏top 阅读(32) 评论(0) 推荐(0)

No.21 CSS--弹性盒子模型（flex box）

摘要：一、定义弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、CSS3弹性盒内容弹性盒子由弹性容器( 阅读全文

posted @ 2025-02-27 11:35 百里屠苏top 阅读(43) 评论(0) 推荐(0)

No.20 CSS--盒子模型（Box Model）

摘要：一、概念所有HTML元素可以看作盒子，在CSS中，"box model”这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括:外边距(margin)，边框(border)，内边距(padding)，和实际内容(content)。 1.margin marg 阅读全文

posted @ 2025-02-27 10:07 百里屠苏top 阅读(29) 评论(0) 推荐(0)

No.19 CSS--关系选择器

摘要：一、关系选择器分类后代选择器子代选择器相邻兄弟选择器通用兄弟选择器 1.1 后代选择器（E F{ }） ol标签下的所有li标签 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, 阅读全文

posted @ 2025-02-27 09:43 百里屠苏top 阅读(6) 评论(0) 推荐(0)