- 博客(11)
- 收藏
- 关注
RSS订阅原创 H5基础-11
文章目录一、css3处理兼容性问题方式（添加私有前缀）二、图片整合技术/精灵图实现步骤三、css中常见的bug及hack 一、css3处理兼容性问题方式（添加私有前缀） 前缀 浏览器内核 代表浏览器 -o- presto 欧朋-ms- trident IE-moz- gecko 火狐-webkit- webkit 谷歌、safari blink 二、图片整合技
2022-03-07 12:54:17
626
原创 H5基础-10
文章目录一、多种显示与隐藏方式的区别二、表格1.表格相关的属性2.表格相关的标签三、表单1.表单字段级2.label标签：改善用户的鼠标体验3.下拉列表4.多行文本域5.input的其它type属性四、BFC1.触发、生产BFC：2.应用场景： 一、多种显示与隐藏方式的区别 1.display:none;—不占据原位置2.visibility:hidden;—会占据原位置 visibility:visible;—显示3.opacity:0;—会占据原位置，可以点击触摸等 二、表格 1.表格相关的属性 1
2022-03-03 19:23:28
505
原创 H5基础-9
一、透明度 opacity:0-1的数字; filter:alpha(opacity=0-100的数字)---解决兼容性问题; 注：0代表透明，opacity属性1或filter的100代表完全不透明，是让元素整体透明，如果只是让颜色透明，使用rgba{R,G,B,透明度} 二、自适应 概念：能够根据设备类型和尺寸，自动调整页面效果，以达到显示一个比较正常的布局效果 1.宽度自适应 A.不设置宽度 B.使用百分比 C.使用最大最小宽度 min-width:*px; max-width:
2022-03-02 14:36:23
207
原创 H5基础-8
一、继承：有上下级关系的元素之间，上级元素的样式被下级元素所拥有 注：文本相关的属性和列表相关的属性会被继承 二、单行文本溢出显示省略号 步骤： 1.设置宽度---width:*px; 2.强制不换行---white-space:nowrap; 3.设置溢出隐藏---overflow:hidden; 4.设置溢出的标识是省略号---text-overflow:ellipsis; 注：多行文本溢出用js实现 white-space:nowrap---不换行丨pre---保存原格式; ove
2022-03-01 13:36:02
287
原创 H5基础-7
一、元素类型 常规分类 1.行级元素：有多宽占据多宽，不是完整的盒子，不可以设置宽高、垂直方向的内外边距等 2.块级元素：默认独占整行，是完整的盒子 3.行内块元素：有多宽占据多宽，是完整的盒子 4.可变元素：会根据周围的元素种类不一样，显示不一样的效果 非主流分类 1.置换元素：浏览器要根据元素的属性和属性值，才能决定渲染什么效果(input丨button丨img) 2.非置换元素：除去置换元素，都是 元素的嵌套规则 1.块级元素里面可以有块级和行级，行级里面只能有行级元素 2.li
2022-02-28 21:00:12
197
原创 H5基础-6
一、标准盒子和怪异盒子 概念：它们都是盒子模型，只是是不同的模式而已. 语法： box-sizing:content-box丨border-box; content-box---标准模式 border-box---怪异模式 区别：元素实际占据的宽高的计算方式不一样 标准模式：实际占据的宽度=width+margin+padding+border 怪异模式：实际占据的宽度=width+margin 注：怪异模式一般用于移动端 二、文本的属性 1.字体大小 font-size:*px丨*e
2022-02-28 18:59:47
105
原创 H5基础-5
一、浮动：是一种布局属性，主要用于实现一行多列效果 语法：float:left丨right丨none; 作用：1.让元素靠在父元素的左边/右边（实现一行多列效果） 2.实现图文环绕效果 注：浮动会让元素脱离文档流 二、盒子模型 概念：是一种思维模型，主要用于实现页面布局效果。由尺寸、内外边距、边框组成 1.尺寸 width: *px丨*%;--...
2022-02-25 16:35:52
269
原创 H5基础-4
一、CSS介绍 CSS:层叠样式表 CSS3：CSS最新版本 语法：选择器 { 属性：属性值；} 二、CSS的三种引入方式 1.内联式 <元素 style="属性：属性值；"> </元素> 2.内部式 在head标签里面添加一个style标签 <style> 选择器{属性：属性值；} </style> 3.外链式 A.新建一个以.css为后缀的文件 B.在html文件的head标签里面写一个link标签 ...
2022-02-24 16:30:12
513
原创 H5基础-3
一、表格 语法： <table border="边框的粗度" cellspacing="双线边框之间的间隔" cellpadding="内容和边框的间隔"> <tr> ---行 <td>内容</td> ---单元格 <td>内容</td> ...
2022-02-23 17:40:21
250
原创 H5基础-2
一、列表标签 无序列表 <ul> <li>列表项内容</li> <li>列表项内容</li> </ul> 有序列表 <ol> <li>列表项内容</li> <li>列表项内容</li> </ol> 定义列表 <dl> <dt>名词、术语、图片</dt> <dd>说明</dd>
2022-02-22 15:59:06
394
原创 H5基础-1
一、前端 结构---html 样式----css 交互---js 二、html基础 html---超文本标记语言 h5---html最新版本+前端技术的总称 w3c---万维网联盟（web领域最权威的中立性、公益性组织） 命名规则：1.名字由数字、字母、下划线组成，不能数字开头 2.推荐使用对应内容的英文命名 3.推荐使用驼峰命名法 html语法：<元素 属性=属性值">要标记的内容</元素> 三、常用标签 1.基础标签： 标题：<hr>标题内容&
2022-02-21 18:58:34
722
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人