- 博客(23)
- 收藏
- 关注
RSS订阅原创 项目文件夹规范
# 项目规范### 1、项目文件夹- 根据项目名称创建项目文件夹。如：ushop- html、css、img、js 文件均归档至项目名称目录中- HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html- css 文件以英文命名 - 公用样式通常命名为reset.css（常用的浏览器样式） - public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式） - 首页通常
2023-02-24 17:27:45
153
原创 布局技巧，
## 布局技巧### 1、等高布局等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。#### 1.1、实现要点（需求）- 多列- 每一列背景不同- 其中任意一列变高，其它列同步变高#### 1.2、方法一##### 1.2.1、原理 利用padding和margin负值相抵消- 利用pa
2023-02-24 17:27:19
85
原创 html5新特性
# **HTML5**>html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用## 1、新特性- 新增语义化元素- 新增表单相关新元素、新属性- 新增canvas元素 * canvas 元素使用JavaScript 在网页上绘制图像- 新增了多媒体相关的video和audio元素- 地理信息 * HTML5通过引入Geolocation的API可以
2023-02-24 17:25:44
70
原创 阿里矢量图标
# 一、阿里矢量图标(字体图标)网址：https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码，下载完成后解压文件 5.把下载的文件放到你的项目中 6.引入iconfont.css文件或者iconfont.js文件##### 使用三种方式：下载代码##### 1、Unicode 方式引用
2023-02-24 17:22:11
91
原创 响应式web开发
响应式web开发## 概述（什么是响应式）响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。 布局CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进行布局，提高工作效率“flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行或者一列。相比较 “Grid网格布局”，则是二维布局可以同时处理行和列上的布局通常适用于布局页面主要
2023-02-24 17:17:58
159
原创 CSS 盒模型
CSS 盒模型1、概述CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）2、内容 content概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。2.1、width作用：设置宽度
2022-11-08 20:31:29
61
原创 学习目标.
学习目标了解什么是网页，能够说出网页的组成部分了解Web标准，W3C组织掌握主流浏览器及其内核（熟记）网页与网站网站在因特网上用于展示特定内容相关的网页集合网页网页是网站中一页，是构成网站的基本元素它通常由图片、链接、文字、声音、视频等元素组成网页要使用网页浏览器来阅读浏览器网页浏览器简称浏览器，用于读取 HTML 文件，并将其作为网页显示渲染引擎即浏览器内核决定了浏览器如何显示网页的内容以及页面的格式信息，不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也
2022-11-06 19:37:00
59
原创 CSS显示模式
CSS显示模式概述： 显示模式是指元素以什么方式显示，如div默认独占一行，span默认可以多个在一行排列，了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素1、元素默认显示模式与元素特性总结本身属性为display:block;的元素 称为块级元素常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol本身属性为display:inline;的元素称为行级元素常见行级元素：span,strong,em,i,a,b本身属性为dis
2022-10-08 09:09:59
181
原创 CSS 盒模型
二、CSS 盒模型1.边框围绕着内容和内填充区域的线 1.border-width:边框的宽度 单位：像素 注意：只写一个border-width设置不上边框的宽的，得写上边框的线型 2.border-style：边框的线型 1.solid 单实线 2.double 双实线 3.dashed 条状虚线 4.dotted 点状边框
2022-10-08 09:07:37
61
原创 什么是响应式设计
1、什么是响应式设计也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的响应式布局原理：一个网站适配所有终端，实现不同屏幕分辨率下的终端上网页的不同布局；使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配不同屏幕的目的简单的说：响应式布局是元素随着屏幕发生宽高大小变化 + 盒子布局发生变化自适应：元素随着屏幕发生宽高大小变化优缺
2022-10-08 09:04:57
146
原创 帧动画.html
一、帧动画1、定义关键帧@keyframes 动画名称（英文） { 0% { /* 动画的开始 */ } 25% { /* 在25%的时候进行的一个动画 */ } 50% { /* 在50%的时候进行的一个动画 */ }
2022-09-28 17:09:31
702
原创 css3动画&2D3D
css3动画&2D|3D一、css3的transform属性2d坐标轴（图示）x轴：水平，向右为正，向左为负y轴：垂直，向下为正，向上为负2d转换的方法1、2D变形：平移、旋转、缩放、倾斜1) transform: translate()平移transform: translate(x,y) 沿着x轴和y轴移动transform: translateX(x) 沿着x轴移动transform: translateY(y) 沿着y轴移动取值:px百分比
2022-09-27 19:09:19
96
原创 子绝父相.web
1.子绝父相注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
2022-09-25 19:04:18
138
原创 定位.web
一、定位2、position:absolute绝对定位没有定位父级时相对于html进行定位，有定位父级时相对于最近的定位父级进行定位特性特性： 1.元素脱离正常文档流，不占位(也脱离文本流，全脱) 2.有定位父级相对于定位父级发生定位偏移 3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html） 4.能使不能设置宽高的行级元素设置宽高 5.提升层级
2022-09-25 19:02:14
75
原创 浮动特性.前端
浮动特性应用实例应用实例—图文绕排总结：浮动脱离文档流不脱离文本流最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
2022-09-25 19:00:12
69
原创 calc（）函数
一、calc()函数用于动态计算长度值，值灵活css3新增功能任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数使用标准的数学运算优先级规则；运算符前后都需要保留一个空格语法： calc(表达式)运算符前后都需要保留一个空格width: calc(100% - 200px); 减号的前后添加空格.box { width: calc(100% - (10px + 20px) *
2022-09-21 22:38:11
812
原创 CSS基础
css3基础1、什么是css3?是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷css3按模块化进行设计，比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点: CSS3是完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。2、浏览器的私有前缀（兼容性前缀）有些css3的属性还只是最新版的预览版，还没有正式发
2022-09-20 20:17:58
66
原创 弹性盒子.html
一、弹性盒子1、什么是弹性盒子？弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端2、设置弹性盒子——display属性display
2022-09-20 20:16:34
218
原创 前端_web省略号
一、文本溢出处理显示省略号1、单行文本溢出显示省略号方法1：省略号单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号<style>.box{ width:200px; background-color:red; height:40px; line-height:4
2022-09-07 21:41:54
1241
原创 a标签内容_web
a标签 利用锚点来跳转指定锚点处 定义锚点 <div id='锚点名称'></div> 引用锚点 <a href=" ">内容</a >1、HTML列表1、无序列表各列表项之间没有次序，各项之间为并列关系语法 <ul><!-- 列表容器 --> <li>列表项</li> <li>列表项&l
2022-09-04 23:35:05
197
原创 前端开发-Web-CSS
一、初识CSS学习目标能够说出什么是CSS熟悉CSS的语法规范掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块1、什么是CSS?全称Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表）作用为HTML标记语言提供了一种样式描述即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）CSS语法规范CSS 规则由两个主要的部分构成：选择器、一条或
2022-09-01 16:51:54
284
原创 Web.前端
1、浏览器及内核web浏览器是用于读取HTML文件，并将其作为网页显示浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；内核的作用负责对网页语法的解释并渲染网页；五大浏览器：chrome、safari、Firefox、Opera、IE1.chrome 谷歌浏览器生产商：Google内核：webkit、blink2.Firefox 火狐浏览器生产商：Mozilla内核：gecko3.Safari 苹果浏览器生产商：苹果公司内核：webkit4.o
2022-08-25 17:34:37
64
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人