自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(28)
  • 收藏
  • 关注

原创 弹性子元素在侧轴上的对齐方式

* 默认值(如果子元素没有高度的时候):如果弹性子元素没有高度或者高度为auto、将占满整个容器的高度 */align-items: flex-start;/* 默认值:子元素在侧轴的顶端对齐 */align-items: baseline;/* 子元素在第一行文字的基线对齐 */align-items: flex-end;/* 子元素在侧轴的默端对齐 *//* 子元素在侧轴的中间对齐 *//* 弹性子元素在侧轴上的对齐方式 */

2023-02-23 19:45:41 187

原创 弹性盒主轴的方向

* 两端对齐、子元素和子元素之间有空白、项目之件的间距相等 *//* 平均分配、项目和项目之间、项目与边框之间、间距相等 *//* 垂直方向--从下往上,起点在下方 *//* 居中对齐、子元素位于弹性容器中心 *//* 垂直方向--从上往下,起点在上方 */justify-content: flex-start;/* 默认值:主轴在顶端对齐 */justify-content: flex-end;/* 设置主轴的对齐方式、弹性子元素在主轴方向的对齐方式 *//* 主轴的方向----子元素的排列方向 */

2023-02-23 19:44:51 179

原创 a标签--超链接标签

本地文件1伪链接内容内容点击跳转到顶部没有#空链接

2023-02-23 19:38:19 207

原创 五大浏览器及内核

文档第一代码是HTML5标准网页声明,告知浏览器用HTML5标准解析此网页。五大浏览器:chrome、safari、Firefox、Opera、IE。DOCTYPE html 代码的作用?内核:presto blink。内核:webkit、blink。2.Firefox 火狐浏览器。1.chrome 谷歌浏览器。3.Safari 苹果浏览器。4.opera 欧朋浏览器。1.五大浏览器及内核。内核:trident。不是标签,是声明语句。

2023-02-23 19:32:42 797

原创 圣杯布局应用

中间右侧左侧中间右侧左侧

2023-02-23 19:24:45 116

原创 双飞翼实现步骤

.centerbox内部嵌套.center,不定宽度,通过定义左右margin留出左侧列的宽和右侧列宽。- .centerbox固定宽度100%,left,.right固定宽度。- 移动.right通过margin-left:-200px;- .centerbox与.left,.right浮动在一行排列。- 移动.left通过margin-left:-100%;

2023-02-23 19:24:41 86

原创 布局技巧应用

div class="left">1当前,新冠疫情的防疫已进入新常态新阶段,如何防患于未然,把基层常态化防控的藩篱扎得更牢,显得愈加重要。当前,新冠疫情的防疫已进入新常态新阶段,如何防患于未然,把基层常态化防控的藩篱扎得更牢,显得愈加重要。当前,新冠疫情的防疫已进入新常态新阶段,如何防患于未然,把基层常态化防控的藩篱扎得更牢,显得愈加重要。- 准备三个负责背景的盒子.bg1,.bg2,.bg3,HTML结构上层层嵌套。

2023-02-23 19:20:09 81

原创 新增的多媒体元素

用于输入电话号码的文本输入域,服务于触屏网页开发,在电脑网页中无效,在触屏网页中点击输入域,显示虚拟电话键盘(0-9、*、#)- MP3 audio/MPEG 支持浏览器 chrome、firefox、OPera10+、IE9+、safari。- MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+- 包含e-mail地址的输入域,在提交表单时,自动验证email域的值。- 包含访问协议的完整路径的输入域,在提交表单时,自动验证url域的值。

2023-02-23 19:17:13 105

原创 html5页面

html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用。注意:使用javascript新增元素的方法解决,新增的出来的html5标签是行级元素,需要css把行内元素转为块。- 典型应用:论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组,或者其他独立的内容项目。- 作用:元素表示文档、页面、应用或网站中的独立结构,可以成为可独立分配的或可复用的结构。日期时间,在time标签中设置日期时间。

2023-02-23 19:16:58 124

原创 文本溢出处理显示省略号

div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带男士经典系列椭圆形针扣皮带带 38157可以沉迷,可以抱怨,可以奔溃,,可以抱怨,可以奔溃,人要有自愈能力可以沉迷,可以抱怨,可以奔溃,,可以抱怨,可以奔溃,人要有自愈能力。/* 设置宽度可以微调省略号的盒子大小,盖住多余的文字 */-webkit-box-orient:vertical;/* 设置宽度可以微调省略号的盒子大小,盖住多余的文字 */

2023-02-23 19:14:02 109

原创 CSS块级格式化

div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表-- 原因:浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字 反而还会环绕浮动的盒子。原因:浮动 不会脱离文本流 浮动的盒子会遮盖下面的盒子,但是下面盒子里的文字是不会被遮盖的,文字 反而还会环绕浮动的盒子。6、BFC就是页面上的一个隔离的独立容器,容器里面的子标签不会影响到外面标签, 反之亦然。

2023-02-22 19:30:37 152

原创 、CSS 用户界面

ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。nw-resize 此光标指示矩形框的边缘可被向上及向左移动(北/西)。se-resize 此光标指示矩形框的边缘可被向下及向右移动(南/东)。sw-resize 此光标指示矩形框的边缘可被向下及向左移动(南/西)。e-resize 此光标指示矩形框的边缘可被向右(东)移动。n-resize 此光标指示矩形框的边缘可被向上(北)移动。w-resize 此光标指示矩形框的边缘可被向左移动(西)。用户可以调整元素的宽度和高度。

2023-02-22 19:30:32 121

原创 文本框和按钮不对齐现象(高度得设置一样)

按钮按钮

2023-02-22 19:28:20 266

原创 html表单应用

input type="image" src="./images/4.jpg" alt="图片" width="100" height="200">实现用户信息的收集和传递。男。

2023-02-22 19:26:51 155

原创 盒子阴影应用

正数阴影扩大(阴影大小大于盒子大小),负数阴影缩小(阴影大小小于盒子大小),0阴影与盒子同等大小。box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影(outset默认)> 可以在一个元素上设置一个或多个阴影,阴影之间用逗号隔开。> 可以在一个文字中设置一个或多个阴影,阴影之间用逗号隔开。inset:表示添加内阴影,默认为外阴影。h-shadow 必需,水平阴影的位置,允许负值;v-shadow 必需,垂直阴影的位置,允许负值;color 可选,阴影的颜色;

2023-02-22 19:24:41 186

原创 css定位应用

如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的,那么元素的“height”和“width”将隐式地由偏移量决定。**注意:子元素设置绝对定位,父元素可以设置相对定位、绝对定位、固定定位, 这三种情况,参照元素都是父元素**相对于元素本身的位置进行一个位置调整,占位依然在原来的位置,也就是说,元素设置相对定位后,其原来的位置还占位。定位模式通过position属性来设置,以下为常用四种定位模式静态定位,相对定位,绝对定位,固定定位。使用margin:auto;

2023-02-22 19:21:49 172

原创 滑动门如何应用

帮助与反馈公众与平台实际文字写在span里面,span的宽度由文字和内边距撑开。开发平台微信支付-- span用来撑开右边的小括号 -->a的宽度是由span撑开了 -->-- a用来撑开左边的小括号 -->a的宽度是由span撑开了。首页

2023-02-22 19:17:46 89

原创 css精灵图

background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置。css精灵英文叫法 css sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”;是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。1.减少网页的http请求,提高页面的性能。### 1.精灵图的原理。

2023-02-22 19:15:48 84

原创 常用复合选择器

我是第a二span个我是第a二span个/* 鼠标悬停到.box3上,让p标签和h3标签的文字颜色都变为blue */我是第一个span我是第三个span我是第一个span我是第三个span

2023-02-22 19:12:09 137

原创 基本选择器

多个单词可以以驼峰式(newsCont)、中划线连接(news-cont)、下划线连接(news_cont)等。- 多个单词可以以驼峰式(newsCont)、中划线连接(news-cont)、下划线连接(news_cont)等。:具有唯一性,一般用于页面唯一性的元素如头部、底部等,经常和 JavaScript 搭配使用。:具有唯一性,一般用于页面唯一性的元素如头部、底部等,经常和 JavaScript 搭配使用。- 作用:选择所有同一元素名称的所有元素。- 作用:选择所有同一元素名称的所有元素。

2023-02-22 19:11:58 162

原创 css显示模式

初级

2022-11-21 17:23:42 572

原创 overflow属性详解

overflow属性详解概述:溢出元素内容区的内容会如何处理## 取值overflow: visible;溢出显示,默认值overflow: hidden;溢出隐藏overflow: scroll;溢出显示滚动条,横向和纵向滚动条都显示overflow: auto;自动,内容溢出时,显示滚动条overflow-x 只包括水平方向。overflow-y 只包括垂直方向```htmlbody{ /* ov

2022-11-16 14:32:34 1523

原创 外边距问题与解决

外边距问题及解决方法## 1、兄弟关系外间距塌陷问题```html兄弟关系外间距塌陷问题 现象:元素呈并列关系,在垂直方向相邻的margin外间距相遇,会出现叠加现象; 两个值一样大,取当前值 两个值不同,取较大值 原因:并列关系的两个元素共用了一个外间距区域 解决办法: 分别给这两个元素套一个父元素,并为父元素设置overflow:'hidden' .bo

2022-11-13 20:41:11 96

原创 HTML的css显示隐藏

CSS显示模式与元素特性总结概述:显示模式是指元素以什么方式显示,如div默认独占一行,span默认可以多个在一行排列,了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素## 1、元素默认显示模式与元素特性总结- 本身属性为display:block;的元素 称为块级元素 - 常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol- 本身属性为display:inline;的元素称为行级元素 - 常见行级元

2022-11-11 13:40:16 328

原创 HTML的css显示隐藏

CSS显示隐藏的方法### display:- none:隐藏该元素并且该元素所占的空间也不存在了。- block; 显示元素### visibility:(v 热 倍 了 忒)- hidden 隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。- visible 显示元素CSS背景(background简写)CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色、背景图片、背景图片的平铺方式和显示位置等。### 1、background

2022-11-10 22:26:46 429

原创 HTML的标签

## 标记(标签)构成网页的基本单位- 标签:由尖括号括起来的关键词- 单标签:<标签名 >或 <标签名 />- 双标签:`<开始标签名>[内容]`- 元素:标签及内容的整体- 属性```html<标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>```<后面的第一个单词叫做标签的名字,标签名空格之后的叫做标签的属性。- 属性由属性名和属性值组成,属性名和属性值用等号连接- 属性值

2022-11-08 20:22:44 187 1

原创 HTML页面

2、页面的三大组成部分- 结构:给页面搭建基本的框架结构。 html ,类比于建房子的时候要搭的地基跟钢筋。- 表现:页面的美化,装饰。 css 相当于给房子加背景和家具的排列布局。- 行为:页面的轮播图,返回顶部... javascript 相当于房子加灯的开关。 结构层html和表现层css,是 W3C 制定的规范,万维网联名。行为层js,是 ECMA 制定的规范,欧洲计算机协会。## 3、什么是HTML- HTML是 Hyper

2022-11-07 20:39:21 1690

原创 html的第一章

一、浏览器及HTML标签## 1、浏览器及内核- web浏览器是用于读取HTML文件,并将其作为网页显示- 浏览器最重要的部分或其核心是渲染引擎,我们一般称为内核;- 内核的作用负责对网页语法的解释并渲染网页;- 五大浏览器:chrome、safari、Firefox、Opera、IE1.chrome 谷歌浏览器生产商:Google内核:webkit、blink2.Firefox 火狐浏览器生产商:Mozilla内核:gecko3

2022-11-03 19:30:03 84

1_Web前端笔记.md

1_Web前端笔记.md

2022-11-09

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除